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, and even then it should be sanitized and escaped.

The Code

add_filter( 'piecal_excerpt_allow_html', '__return_true' );
add_filter( 'piecal_excerpt_length', function( $length ) { return 500; } );
add_filter( 'piecal_popover_details', 'enable_html_in_popover', 10, 1);

function enable_html_in_popover( $details ) {
	ob_start();
	?>
		<p
		class="piecal-popover__details"
		x-html="$store.calendarEngine.eventDetails">
		></p>
	<?php
	return ob_get_clean();
}

Breakdown

First, we need to __return_true on the piecal_excerpt_allow_html filter. This causes our built-in excerpt function to run the excerpt through wp_kses_post() instead of strip_all_tags() .
Next, we use the piecal_excerpt_length filter to return the number of characters that should be shown in the excerpt. The default is 200.
Finally, we need to change the way the excerpt (or event details) is output on the front-end, since by default we run it through a safeOutput() function that removes HTML. The piecal_popover_details filter allows us to replace the default details HTML with a new paragraph element that outputs $store.calendarEngine.eventDetails without running it through safeOutput() . Note that x-html accepts JavaScript expressions, if you want to sanitize before output this would be a good place to do it via a library such as DOMPurify.