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

Posted 2023-02-25

【中文标题】Fullcalendar：如何在时间线视图中显示明年的下两个月

【英文标题】：Fullcalendar: How to show next two month of next year in timeline view

【发布时间】：2017-05-07 08:47:46

【问题描述】：

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

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

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

日历显示正确的期间，但导航按钮“下一步”停止工作。

我也尝试改用duration 选项，但我不知道如何设置“开始”时间段……日历始终从当前日期开始。

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

【参考方案1】：

解决此问题的方法是设置 dateIncrement 值 - 这会告诉下一个/上一个按钮在您像这样自定义视图范围时增加/减少可见日期的距离。

这是一个例子。注：我使用了 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/