In my project, I use the view resourceTimelineMonth with fullCalendar. The view starts at day 1 and stops at the end of the month. But I need to display the full first week and the full last week. For exemple for this april 2025, the first is a thuesday so I need to display Monday 31st, and the 30th of April is a wednesday so I need to display thursday, friday, saturday and sunday of this week.
I saw that we can use views like this :
views: {
resourceTimelineMonthEdited: {
type: 'resourceTimelineMonth',
duration: {weeks: 5},
dateAlignment: '2025-03-31'
}
},
But the start of the view is the current day and not the 1st. And i got this error :
Cannot read properties of undefined (reading 'getUTCFullYear')
I also tried to use visibleRange like this :
calendar.setOption('visibleRange', {
start: '2025-03-31',
end: '2025-05-04'
});
But nothing happens.
As per https://fullcalendar.io/docs/visibleRange, visibleRange
only works with a custom view. timelineMonth
isn't a custom view because it's a documented, pre-defined view which specifies a duration in its name. For such views, fullCalendar will respect the pre-defined duration and ignore anything you specify in visibleRange
settings.
Instead, define the custom view's type
as resourceTimeline
without a duration, and this will allow it to respect the visibleRange
definition.
views: {
resourceTimelineCustomMonth: {
type: "resourceTimeline",
visibleRange: {
start: '2025-03-31',
end: '2025-05-05'
}
}
}
Live demo: https://codepen.io/ADyson82/pen/pvvzKej
Obviously this is not dynamic so you may want to consider using the callback function that visibleRange
supports to calculate the correct dates for your views, and you will probably then also need something custom to ensure the next/prev buttons work correctly (assuming you want to enable them).