I'm working on a project where I have to create some particular views on FullCalendar 5 in timeline with React.
The idea is to display more or less long periods with duration slots per month.
Generally, the horizons will be by 6 months, but I can't find how to make custom views with a precise horizon (Ex: 01 April - 31 August).
I thought it was possible by defining a start + a duration, but obviously no way to do it dynamically, because the user must be able to change the horizon when needed.
Did I miss an option to do this? Or is FullCalendar really not made for this?
Thank you!
Make a custom view with 5 month duration, add the button to the header:
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',
},
},
};
You can tell the calendar what date to start on: https://fullcalendar.io/docs/initialDate
let calendar = new Calendar(calendarEl, {
initialDate: '2022-09-28',
};
You can also play with adding this to the calendar object:
https://fullcalendar.io/docs/visibleRange
let calendar = new Calendar(calendarEl, {
visibleRange: {
start: '2022-09-23',
end: '2023-02-23',
},
};