Fullcalendar visibleRange not working on resource-daygrid

Question

I am using fullcalendar's resource-daygrid on an event, and I'm trying to add a range.

Let say the event starts on Jan 12, 2021 and ends on Jan 15, 2021. Then I would like to show only this range and not allow clicking previous or next dates.

Currently I am using this code:

const calendarElement = document.getElementById("programme");
    let calendar = new Calendar(calendarElement, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      locale: nlLocale,
      timeZone: "UTC",
      plugins: [ 
        resourceDayGridPlugin,
      ],
      initialView: 'resourceDayGridDay',
      resources: `${window.location.href}/getRoomsJSON`,
      eventDisplay: 'block',
      headerToolbar: {
        start: 'title,prev,next',
        center: '',
        end: ''
      },
      visibleRange: {
        start: '2020-01-12',
        end: '2020-01-15'
      },
      events: [
        { id: '1', resourceId: '2', start: '2020-01-12T12:00:00', title: 'event 1' },
        { id: '2', resourceId: '2', start: '2020-01-12T12:00:00', title: 'event 2' },
        { id: '3', resourceId: '3', start: '2020-01-12T12:00:00', title: 'event 4' },
        { id: '4', resourceId: '4', start: '2020-01-12T12:30:00', title: 'event 5' }
      ]
});

calendar.render();

It looks like the visibleRange is ignored since this doesn't seem to do anything at all. I also won't get console errors.

Any ideas on this?

score 4 · Accepted Answer · answered Dec 22 '20 at 12:02

Visible Range isn't applicable because you're using a view with a fixed time range already - a Day view implicitly has a range of one day for display purposes. As per its documentation and examples, Visible Range is only useful when you have a custom view with no pre-defined time range.

If you want to control the overall range of dates which are permitted to navigate to (not just what's visible at any one time) then the correct option to set is Valid Range - see https://fullcalendar.io/docs/validRange

Fullcalendar visibleRange not working on resource-daygrid

1 Answers1