How to add calendar event render hooks by another module or a theme?
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); - Add the dependency into your module or theme's library (.libraries.yml).
This step is optional if step 2 has already worked for you.
In your .libraries.yml file, add following into the dependencies section.
- fullcalendar_block/fullcalendar
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 need 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.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion