Fullcalendar：如何在时间轴视图中显示明年的下两个月

Question

我正在使用 Fullcalendar，我需要使用 timeline 视图显示所有当前年份以及下一年的下两个月。

如果我以这种方式使用 visibleRange 选项：

visibleRange: function (currentDate) {
return {
    start: currentDate.year()+'-01-01',
    end: currentDate.year()+1 + '-02-28',
};}

日历显示正确的时期，但导航按钮 'next' 停止工作。

我也尝试使用 duration 选项，但我不知道如何设置 "start" 期间....日历总是从当前日期开始。

我认为有一个解决方案不需要编写完整的自定义视图。

Answer 1

此问题的解决方案涉及设置 dateIncrement 值 - 这会告诉 next/prev 按钮距离 increase/decrease 可见日期有多远，当您像这样自定义视图范围时。

举个例子。 N.B。我使用了 momentJS 的内置函数，而不是字符串连接，来提供一种更强大、更简洁的设置可见范围的方法。将 slotDuration 设置为不会产生大量长日历的内容可能也是一个好主意。我以 1 个月的持续时间为例，但显然您可以根据需要配置它。

$('#calendar').fullCalendar({
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    defaultView: 'timeline',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'timeline'
    },
    slotDuration: { months: 1 },
    dateIncrement: { years: 1 },
    visibleRange: function (currentDate) {
        return {
            start: currentDate.clone().startOf('year'),
            end: currentDate.clone().startOf('year').add({ years: 1, months: 2}),
        };
    },
    //...etc
});

dateIncrement 设置记录在此处：https://fullcalendar.io/docs/current_date/dateIncrement/

Fullcalendar：如何在时间轴视图中显示明年的下两个月

Fullcalendar: How to show next two month of next year in timeline view

fullcalendar

fullcalendar-scheduler