如何按日期和资源分组FullCalendar.js?

时间:2017-11-20 19:53:47

标签: javascript resources fullcalendar grouping

我使用FullCalendar每天生成3个部分的议程。我添加属性groupByDateAndResource和资源,如:

$('#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' }
    ]
    ...
});

我的日历显示完美,但我的专栏没有分为3个部分。 See image

我怎样才能在FullCalendar.js的各个部分中划分?

谢谢!

SOLUTION:

我安装了extension scheduler.js。 FullCalender的这个扩展显示了我想要的所有资源。

2 个答案:

答案 0 :(得分:0)

你需要这样做,这是在标题中,在正文中你将不得不再次分割单元格。

enter image description here

答案 1 :(得分:0)

 $('#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' }
]
...
 });

您必须输入groupByDateAndResource:true https://fullcalendar.io/docs/v3/groupByDateAndResource