0

私はこの形式を使用しています：

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>
4

1 に答える 1