资源在预览中被挤压

Question

我正在使用这种格式：

https://fullcalendar.io/js/fullcalendar-scheduler-1.5.1/demos/vertical-resource-view.html

，但当我添加超过 4 个房间时，它会被挤压。我希望通过添加更多房间（我需要 12 个），我不会把所有东西都挤得水泄不通。我该怎么做？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script>

    $(function() { // document ready

        $('#calendar').fullCalendar({
            defaultView: 'agendaDay',
            defaultDate: '2017-03-06',
            editable: true,
            selectable: true,
            eventLimit: true, // allow "more" link when too many events
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaDay,agendaTwoDay,agendaWeek,month'
            },
            views: {
                agendaTwoDay: {
                    type: 'agenda',
                    duration: { days: 2 },

                    // views that are more than a day will NOT do this behavior by default
                    // so, we need to explicitly enable it
                    groupByResource: true

                    //// uncomment this line to group by day FIRST with resources underneath
                    //groupByDateAndResource: true
                }
            },

            //// uncomment this line to hide the all-day slot
            //allDaySlot: false,

            resources: [
                { id: 'a', title: 'Consultório A' },
                { id: 'b', title: 'Consultório B', eventColor: 'green' },
                { id: 'c', title: 'Consultório C', eventColor: 'orange' },
                { id: 'd', title: 'Consultório D', eventColor: 'red' },
                { id: 'e', title: 'Consultório E', eventColor: 'blue' },
                { id: 'f', title: 'Consultório F', eventColor: 'yellow' },
                { id: 'g', title: 'Consultório G', eventColor: 'black' },
                { id: 'h', title: 'Consultório H', eventColor: 'white' },
                { id: 'i', title: 'Consultório I', eventColor: 'gray' },
                { id: 'j', title: 'Consultório J', eventColor: 'brown' },
                { id: 'k', title: 'Consultório K', eventColor: 'purple' },
                { id: 'l', title: 'Consultório L', eventColor: 'purple' },
                { id: 'm', title: 'Consultório M', eventColor: 'purple' }

            ],
            events: [
                { id: '1', resourceId: 'a', start: '2017-03-06', end: '2017-03-08', title: 'event 1' },
                { id: '2', resourceId: 'a', start: '2017-03-07T09:00:00', end: '2017-03-07T14:00:00', title: 'event 2' },
                { id: '3', resourceId: 'b', start: '2017-03-07T12:00:00', end: '2017-03-08T06:00:00', title: 'event 3' },
                { id: '4', resourceId: 'c', start: '2017-03-07T07:30:00', end: '2017-03-07T09:30:00', title: 'event 4' },
                { id: '5', resourceId: 'd', start: '2017-03-07T10:00:00', end: '2017-03-07T15:00:00', title: 'event 5' }
            ],

            select: function(start, end, jsEvent, view, resource) {
                console.log(
                    'select',
                    start.format(),
                    end.format(),
                    resource ? resource.id : '(no resource)'
                );
            },
            dayClick: function(date, jsEvent, view, resource) {
                console.log(
                    'dayClick',
                    date.format(),
                    resource ? resource.id : '(no resource)'
                );
            }
        });

    });

</script>
<style>

    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 50px auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

Answer 1

我也遇到了这个问题。我的解决方案是在 eventAfterAllRender 回调函数中使用它。

function eventAfterAllRenderCallback(){
    $('.fc-agendaDay-button').click(function(){
        $("#schedule_container").css('min-width',$('.fc-resource-cell').length*slot_width_resource);
    }
    $('.fc-resourceDay-button').click(function(){
        $("#schedule_container").css('min-width','');
    }
}

slot_width_resource 是您希望列的像素宽度（我使用 125）。在 Fullcalendar 推出更好的支持之前，这个解决方案一直有效

将这个函数放在你的全日历初始化器之后，并在初始化器内部像另一个全日历选项一样放置回调函数

$('#calendar').fullCalendar({
    eventAfterAllRender:eventAfterAllRenderCallback,
});

资源在预览中被挤压

Resource squeezed in preview

fullcalendar-scheduler