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

Question

示例视图：

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

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

但是，无法设置从明年 4 月 1 日开始到明年 3 月 31 日结束的会计年度视图。而且，即使事件仅从该月的下半月开始，时间轴栏也会覆盖整个月。

Answer 1

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

N.B。这需要 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})
        };
    }
}

有关详细信息，请参阅 https://fullcalendar.io/docs/current_date/visibleRange/ and https://fullcalendar.io/docs/current_date/dateIncrement/

但是，即使事件仅在下半个月开始，时间轴栏也会覆盖整个月的时间段，您的问题并不能真正按照您想要的方式解决。 "slots" 的全部要点是在该特定视图中可以为显示事件的最短时间。如果您希望它比这更微妙，则必须定义更短的插槽。同样的事情发生在 fullCalendar 的默认 "Month"（非时间轴）视图中 - 所有事件都涵盖一整天，即使它们是定时的，但您可以在描述中看到时间。我在你的例子中看到你已经在描述中显示了这些事件的日期，所以你的用户应该相当清楚。

我建议您的用户单击“月视图”以获得更详细的细分，并更准确地显示时段持续时间。或者你必须妥协并将 slotDuration 设置为更小的值。

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

Design a custom year view with 12 month slots

fullcalendar

fullcalendar-scheduler