How to add calendar event render hooks by another module or a theme?

Created on 21 June 2022, about 2 years ago

Updated 27 April 2023, about 1 year ago

What are the calendar event hooks for?

Fullcalendar provides some event render hooks to allow customized render functionality.
For example, if you want to add tooltip to the calendar events. You might want to do that by the 'eventDidMount' hook. Here is an example, https://fullcalendar.io/docs/event-tooltip-demo#:~:text=Edit%20in-,CodeP...

The available hooks provided by Fullcalendar 5 are listed in https://fullcalendar.io/docs/event-render-hooks

How to hook your own event handler to a calendar by your module?

Implement the hook_block_view_BASE_BLOCK_ID_alter to add your JavaScript to a calendar block.

/**
 * Implement hook_block_view_BASE_BLOCK_ID_alter
 *
 * @param array $build A renderable array of data, only containing #cache.
 * @param BlockPluginInterface $block he block plugin instance.
 */
function YOUR-MODULE_block_view_fullcalendar_block_alter(array &$build, \Drupal\Core\Block\BlockPluginInterface $block) {
  // Add the js library to the calendar block.
  $build['#attached']['library'][] = 'YOUR_MODULE/library_name';
}

In your JavaScript script, add the event handler functions.

// Codes run both on normal page loads and when data is loaded by AJAX (or BigPipe!)
// @See https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
(function($, Drupal, once, drupalSettings) {
  if (Drupal.fullcalendar_block) {
    /**
     * The event Did Mount callback.
    */
    function eventDidMount(info) {
      console.log(info.el);
    }
    
    function eventCalendarBuild(event, blockInstance) {
      console.log(blockInstance);
    }
    
    function eventCalendarBeforeBuild(event, calendarOptions) {
      console.log(calendarOptions);
      calendarOptions.eventDidMount = eventDidMount;
    }
    
    $(document).on("fullcalendar_block.build", eventCalendarBuild);
    $(document).on("fullcalendar_block.beforebuild", eventCalendarBeforeBuild);
  }
  
})(jQuery, Drupal, once, drupalSettings);

Is there an easy way to do that?

If you just simply want to modify some calendar options and don't need to deal with any complex business logic. You don't any custom code or module to do that. You can modify or add the calendar options or Drupal settings via the block configurations.
Here is how to do that,
https://git.drupalcode.org/project/fullcalendar_block#configuration

This document is about how to to create some new features, for example tooltip for the calendar. In this case, you have to create a new module and implement the new features by those Drupal hooks or the calendar event hooks in JavaScript.

📌 Task

Status

Closed: outdated

Version

1.0

Component

Documentation

Created by

🇦🇺Australia Mingsong 🇦🇺

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment about 1 year ago →
🇺🇸United States nmillin
@mingsong, thanks for the documentation page!

One thing I got caught up on is the "if (Drupal.fullcalendar_block) {" not working. This ended up being due to the order of the JS being loaded. I resolved it by adding a dependency in my library to:
- fullcalendar_block/fullcalendar

I'm not sure if/how to add this note to the documentation page, so adding it here in case it is helpful for others. Thanks.
Comment about 1 year ago →
🇦🇺Australia Mingsong 🇦🇺
Thanks @Nate Millin,

I will mention it in that document.

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024