javascriptfullcalendarfullcalendar-premium

Edit Full Calendar resourceTimelineMonth to display full weeks


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.


Solution

  • 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).