fullcalendarfullcalendar-scheduler

how do i remove holidays from timeline view of FullCalendar.js


I want to find a way to remove some days from the timeline view of full calendar because they are company holidays. like removing the 4th of July, memorial day etc. how do I do this?


Solution

  • It's not possible to entirely remove them from the display via the API unfortunately, but you can easily mark them as unavailable or whatever - perhaps by using a feed of Background Events, with one event for each holiday. You can maybe generate them from your server, or there are public calendars online containing the official holidays of different countries, which you might be able to use as the source.

    A background event is the same as a regular event, except its display mode is changed - for example:

    {
      start: '2022-06-01T10:00:00',
      end: '2022-06-01T16:00:00',
      display: 'background'
    }
    

    If you additionally want to stop people creating events on those dates, or dragging events onto those dates, that can be controlled through the appropriate options / callbacks - there are examples in the fullCalendar documentation, such as this one which will prevent a user creating a new event on top of a background event:

    selectOverlap: function(event) {
      return event.rendering === 'background';
    }
    

    References: