Use real URL for events and skip popover when clicked, going straight to event permalink instead

Add this PHP snippet via a Code Snippets plugin or custom functionality plugin to change event links from javascript:void to the real permalink of the event.

This snippet does the following:

  • Modifies the HREF attribute on the event links in the calendar to reflect the actual permalink of the event posts.
  • Prevents users from following the link when clicked.
  • Prevents the popover from activating when clicked.
  • Calculates the proper event link with pass-through data (for recurring events) and sends the user where when the event is clicked.

Important Note: This is likely to cause malfunctions if you're using external event sources (e.g. Eventbrite or ICS feeds) that have different click behaviors. Proceed with caution.

add_action( 'piecal_additional_event_did_mount_js', function() {
?>
  let link = info.el;
  link.setAttribute('href', info.event.extendedProps.permalink);
  link.addEventListener( 'click', (e) => {
	  e.preventDefault();
  });
<?php
});

add_action( 'piecal_additional_event_click_js', 'piecal_skip_popover' ); 

function piecal_skip_popover() {

?>
Alpine.store('calendarEngine').showPopover = false;
window.location.href = Alpine.store('calendarEngine').eventUrl ?? Alpine.store('calendarEngine').permalink;
<?php
};
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.