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.
$('#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.