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_event_data_transform_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_event_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_event_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.