简体   繁体   中英

How group by date and resource with FullCalendar.js?

I use FullCalendar to generate my agenda with 3 sections each day. I add attribute groupByDateAndResource and resources like there:

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'agendaWeek,agendaDayTrucks'
    },
    views: {
        agendaDayTrucks: {
            type: 'agenda',
            duration: { day: 1 },
            buttonText: 'Truck View Per Day'
        }
    },
    buttonText: {
        week: 'Week View'
    },
    nowIndicator: true,
    defaultView: 'agendaWeek',
    defaultDate: moment().format('YYYY-MM-DD'),
    slotDuration: '01:00:00',
    snapDuration: '00:05:00',
    groupByDateAndResource: true,
    resources: [
        { id: 'truck1', title: 'Truck 1' },
        { id: 'truck2', title: 'Truck 2' },
        { id: 'truck3', title: 'Truck 3' }
    ]
    ...
});

My calendar show perfectly, but my columns doesn't divided in 3 sections. See image

How can I make divide all my days in sections with FullCalendar.js?

Thanks!

SOLUTION:

I installed extension scheduler.js . This extension of FullCalender display all my resources exactly like I want.

You need to do like this, This is in header, and in body you will have to divide cells again.

在此处输入图片说明

 $('#calendar').fullCalendar({
    header: {
    left: 'prev,next',
    center: 'title',
    right: 'agendaWeek,agendaDayTrucks'
},
 groupByDateAndResource: true,
  views: {
    agendaDayTrucks: {
        type: 'agenda',
        duration: { day: 1 },
        buttonText: 'Truck View Per Day'
    }
},
buttonText: {
    week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
    { id: 'truck1', title: 'Truck 1' },
    { id: 'truck2', title: 'Truck 2' },
    { id: 'truck3', title: 'Truck 3' }
]
...
 });

you have to put groupByDateAndResource: true https://fullcalendar.io/docs/v3/groupByDateAndResource

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM