Rendering HTML In Popover Event Details Area

For security reasons, Pie Calendar doesn't render HTML from the post content when viewing an event in the popover.

If you'd like to circumvent this, be aware that you could be opening yourself up to vulnerabilities by doing so.

Below we will provide the hooks, filters, and methodology available in order to output HTML in the popover details area.

We strongly advise against outputting user-generated HTML in the popover unless you're intimately familiar with the potential security pitfalls of doing so. Only HTML from trusted users should ever be rendered in this manner.

// Remove default details.
add_filter( 'piecal_popover_details', 'custom_alter_piecal_details', 10, 1 );

function custom_alter_piecal_details( $details ) {
	return '';
}

// Add custom details
add_filter('piecal_event_array_filter', function( $event ) {
    if( !get_the_ID() ) {
        return $event;
    }

    // Get custom field data and assign it to the event array
    $event['customDetails'] = get_the_content( get_the_ID() );

    return $event;
}, 10, 4);

add_action('piecal_additional_event_click_js', function() {
    ?>
    Alpine.store("calendarEngine").customDetails = info.event._def.extendedProps.customDetails;
    <?php
}, 10, 0);

add_action('piecal_popover_before_details', 'custom_piecal_new_details', 10, 1);

function custom_piecal_new_details( $atts ) {
	echo '<div class="piecal-popover__custom-details" id="piecal-popover__details--01" x-html="$store.calendarEngine.safeOutput( $store.calendarEngine.customDetails )"></div>';
}

Brief walk-through:

• We first use the piecal_popover_details filter to stop rendering the normal event details content. This content can't contain HTML, so it's not useful in this scenario.
• Next, we use the piecal_event_array_filter filter to add a new customDetails property to our event object which contains the event's content.
• Then, we use the piecal_additional_event_click_js hook to add our new customDetails information to the Alpine store, which is used for rendering content in the popover.
• Finally, we use the piecal_popover_before_details hook to inject new content before the normal details area in the popover. This content is HTML with Alpine attributes, allowing us to both retrieve our new customDetails content and make sure it's put through the safeOutput() function to avoid script execution.