设计具有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”选项解决。这使您可以提供相对于“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/和https://fullcalendar.io/docs/current_date/dateIncrement/

但是，即使事件仅在一个月的下半月开始，时间线栏涵盖整个月位置的问题也无法以您想要的方式解决。 “插槽”的重点是在特定视图中为显示事件的最短时间。如果你想要它比那更微妙，你将不得不定义更短的插槽。同样的事情发生在fullCalendar的默认“月”（非时间轴）视图中 - 即使它们被定时，所有事件也会覆盖一整天，但您可以在描述中看到时间。我在您的示例中看到您已经在说明中显示了这些事件的日期，因此对于您的用户来说应该相当清楚。

我建议您的用户点击月视图以获得更详细的细分，并更准确地显示插槽持续时间。无论是那个还是你必须妥协并将slotDuration设置为更小的东西。