Fullcalendar 设计具有12个月插槽的自定义年视图

示例视图：

我想创建一个自定义的年视图来显示每个月的时间线。我可以将fullcalendar scheduler与自定义视图一起使用，并定义如下：

 views: {
   timelineCustom: {
    type: 'timeline',
    buttonText: 'Year View',               
    duration: {year:1},   
    slotDuration: {month:1}
   }
 }

---

但是，无法设置从明年4月1日开始到3月31日结束的会计年度视图。此外，时间线栏将覆盖整个月时段，即使活动仅从该月的下半月开始。

您的第一个问题-从4月开始查看，到次年3月结束，可以使用新的“visibleRange”选项解决。这允许您提供视图的开始/结束日期，相对于“currentDate”（即fullCalendar当前视为已选择的日期）。您还必须设置“dateIncrement”选项，以确保下一次/上一次将当前日期增加1年

注意：这需要fullCalendar 3.3.0和Scheduler 1.6.0或更高版本

timelineCustom: {
    type: 'timeline',
    buttonText: 'Year View', 
    dateIncrement: { years: 1 },
    slotDuration: { months: 1 },
    visibleRange: function(currentDate) {
        return {
            start: currentDate.clone().startOf('year').add({ months: 3}),
            end: currentDate.clone().endOf("year").add({ months: 4})
        };
    }
}

有关详细信息，请参阅和

然而，即使活动仅在下半月开始，时间线栏也会覆盖整个月的时间段，这样的问题并不能以您想要的方式真正解决。“插槽”的全部意义在于，事件在该特定视图中显示的最短时间。如果你想让它更微妙，你必须定义更短的槽。在fullCalendar的默认“月”（非时间线）视图中也会发生同样的情况-所有事件都覆盖一整天，即使它们是定时的，但您可以在描述中看到时间。我在您的示例中看到，您已经在描述中显示了这些事件的日期，因此对于您的用户来说应该相当清楚

---

我建议您的用户点击月视图，以获得更详细的细分，更准确地显示插槽持续时间。或者你必须妥协并将

slotDuration

设置为更小的值。

可以在“duration”对象或“view”对象中设置哪些参数来控制三级时间线（年/月/日）？我找到了一个使用最新完整日历的解决方案-请参见下面的答案。@Joeyao:你能创建这种类型的计划程序吗？是的，我意识到，如果我需要一个特定的日期范围，我必须按“天”使用插槽。你的解决方案真的帮了我解决了第一个问题。我在“visibleRange的末尾”上编辑了一点，以使其工作（end:currentDate.clone（）.endOf（“year”）.add（{months:4}））。谢谢！太好了，很高兴这有帮助。感谢您指出了截止日期的错误-我们已经修改了答案以反映这一点。