Custom JavaScript interactions for the Drupal calendar

I want to add a couple of custom integrations to the view built by the https://www.drupal.org/project/fullcalendar_view module. It utilises the https://fullcalendar.io/ library, and I’d like to access the calendar JavaScript object after it’s assembled by Drupal Views.

I studied /web/modules/contrib/fullcalendar_view/js/fullcalendar_view.js to figure it out.

You can access the calendar object by fetching the drupalSettings.calendar array in your custom module/theme.

However, you need to wait until the calendar is fully built – until the DOM loads and the drupalSettings.calendar options are available to use.

I tweaked the fullcalendar_view code slightly:

var checkReadyState = setInterval(function () {
  if (document.readyState === "complete" &&
    $('.js-drupal-fullcalendar').length > 0
  ) {
    let calendarEl = $('.js-drupal-fullcalendar')[0];
    let viewIndex = parseInt(calendarEl.getAttribute("data-calendar-view-index"));
    let calendarObject = drupalSettings.calendar[viewIndex];
    clearInterval(checkReadyState);
  }
}, 100);

Now, we have direct access to the calendarObject, allowing us to utilise options from https://fullcalendar.io/docs/v4 like here:

calendarObject.gotoDate('2025-01-01');
calendarObject.changeView("listYear");