Using Custom Field As Post Link URL In Popover

In Pie Calendar, adding custom data for use in the popover is a three step process. In step 1, we add the data to the $event array using the filter piecal_event_array_filter . In step 2, we make sure that data is assigned to the Alpine store used for the popover. In step 3, we fetch the new data from the Alpine store and use it in the popover.

// Step 1: Use piecal_event_array_filter filter to add our custom field to the event data. Here, we're using get_field because we're fetching an Advanced Custom Fields (ACF) field, but you can use get_post_meta as well.

add_filter('piecal_event_array_filter', function($event) {
	// Here, replace 'custom_url' with the field name (if you're using ACF). If you're not using ACF, replace get_field() with get_post_meta() as needed. Make sure it returns null if not set.
    $event['customLink'] = get_field('custom_url') ?? null;
    return $event;
});

// Step 2: Use piecal_additional_event_click_js to ensure the new data is added to the Alpine store so we can use it in the popover later.
add_action('piecal_additional_event_click_js', function() {
    ?>
        // customLink is an arbitrarily named property. You can use any name that is not already in use in the calendarEngine store. To assign a value, you'll always use info.event._def.extendedProps.{name}, where {name} is the name you assigned in step 1 for your custom data in the $event array.
   	Alpine.store('calendarEngine').customLink = info.event._def.extendedProps.customLink;
    <?php
});

// Step 3: Finally, we use piecal_popover_link_url to set the popover link's URL to the URL from our custom field. Note the fallback to .eventUrl if .customLink isn't available.
add_filter('piecal_popover_link_url', function() {
    ?>
    Alpine.store('calendarEngine').customLink || Alpine.store('calendarEngine').eventUrl
    <?php
});