Adding Custom JavaScript To Calendar Hooks

Sometimes, you need to alter the behavior of the calendar's JavaScript on the front-end. This can be done via specific JavaScript hooks that allow you to inject JavaScript into the calendar code on the front-end.

piecal_additional_event_data_transform_js

The piecal_additional_event_data_transform_js hook allows you to inject JavaScript that manipulates individual event objects before they're rendered on the front-end. Here's a minimal example of usage:

add_action( 'piecal_additional_event_data_transform_js', function() {
?>
  event.title = "New title.";
<?php
});

Note the event object contains the details of the individual event, such as event.title . You can console.dir(event) to see the properties available.

piecal_additional_date_click_js

The piecal_additional_date_click_js hook allows you to inject JavaScript that is fired when an individual date in the calendar is clicked. Here's a minimal example of usage:

add_action( 'piecal_additional_date_click_js', function() {
?>
  piecalChangeView('listDay');
  this.gotoDate(info.dateStr);
<?php
});

Note the info object contains manipulable details that may be of use in your code. You can console.dir(info) to see what is available.

piecal_additional_event_did_mount_js

The piecal_additional_event_did_mount_js hook allows you to manipulate individual event data that is displayed on the calendar. Here's a minimal example of usage:

add_action( 'piecal_additional_event_did_mount_js', function() {
?>
  let link = info.el;
  link.setAttribute('role', 'button');
<?php
});

Note the info object contains manipulable details that may be of use in your code. You can console.dir(info) to see what is available.

piecal_additional_day_cell_did_mount_js

The piecal_additional_day_cell_did_mount_js hook allows you to manipulate the details of the calendar day cell itself. Here's a minimal example of usage:

add_action( 'piecal_additional_day_cell_did_mount_js', function() {
?>
  let dayLink = info.el.querySelector('.fc-daygrid-day-top a');

  dayLink.setAttribute('role', 'button');
<?php
});                        

Note the info object contains manipulable details that may be of use in your code. You can console.dir(info) to see what is available.

piecal_additional_day_header_did_mount_js

The piecal_additional_day_header_did_mount_js hook allows you to manipulate the calendar day header. Here's a minimal example of usages:

add_action( 'piecal_additional_day_header_did_mount_js', function() {
?>
  let dayHeaderLink = info.el.querySelector('a');

  dayHeaderLink.innerHTML = '<span class="piecal-grid-day-header-text piecal-grid-day-header-text--full">New Day Name</span>';
<?php
});                        

Note the info object contains manipulable details that may be of use in your code. You can console.dir(info) to see what is available.

Read more about our available hooks and filters here >>