带有FullCalendar Timeline的自定义时间范围(5个月)

Question

我正在进行一个项目，在该项目中，我必须使用React在时间轴中创建FullCalendar 5上的一些特定视图。

这个想法是显示或多或少的长周期，每个月都有持续时间段。

一般来说，地平线将在6个月前，但我找不到如何使用精确的地平线进行自定义视图(例如：4月1日至8月31日(。

我认为通过定义开始+持续时间是可能的，但显然没有办法动态地做到这一点，因为用户必须能够在需要时更改范围。

我错过了这样做的选择吗？还是FullCalendar真的不适合这个？

谢谢！

Answer 1

创建一个持续5个月的自定义视图，将按钮添加到标题中：

• https://fullcalendar.io/docs/custom-views
• https://fullcalendar.io/docs/duration

let calendar = new Calendar(calendarEl, {
customButtons: {
resourceTimelineSixMonths: {
text: 'resourceTimelineSixMonths',
click: () => {calendar.changeView('resourceTimelineSixMonths')},
},
},
headerToolbar: {
left:   'title',
right:  'prev,today,next resourceTimelineSixMonths',
},
initialView: 'resourceTimelineSixMonths',
views: {
resourceTimelineFiveMonths: {
duration: { months: 5 },
type: 'resourceTimelineMonth',
},
},
};

您可以告诉日历开始日期：https://fullcalendar.io/docs/initialDate

let calendar = new Calendar(calendarEl, {
initialDate: '2022-09-28',
};

您也可以将其添加到calendar对象中：https://fullcalendar.io/docs/visibleRange

let calendar = new Calendar(calendarEl, {
visibleRange: {
start: '2022-09-23',
end: '2023-02-23',
},
};