How to render HTML in the event pop up

Hi there,

As of version 1.2.3 it’s now possible to add your own custom data into the popover. Here’s a doc article on how to do that: https://docs.piecalendar.com/article/50-using-custom-field-data-in-pie-calendar-popover

It’s possible to add custom field data or anything else using that doc article as a general guide.

Hope this helps!

Thanks,
-Jonathan

Hello,

Thank you for your help and the code. I am able to render custom data in the pop up, but I still cannot render it as HTML.

Below the code renders the link HTML as text HTML characters instead of the link itself:

<?php
// Step 1, add the required custom field data to the event array so that it's available in the Pie Calendar JavaScript.
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['event_information'] = 'This is a <a ; //get_field('event_information');
    return $event;
}, 10, 4);

// Step 2, make sure this data is passed to the calendarEngine object on event click so it can be output in the popover.
// Properties added this way are always located under info.event._def.extendedProps
add_action('piecal_additional_event_click_js', function() {
    ?>
    Alpine.store("calendarEngine").event_information = info.event._def.extendedProps.event_information;
    <?php
}, 10, 0);

// Step 3, output the data in the popover using Alpine
function my_inject_custom_field_in_popover( $atts ) {
	// Note: $atts is available so you can check for shortcode attributes before making modificats, e.g. make sure showcustomfields=true.
	ob_start();
	?>
	<p class="piecal_popover_custom_field" x-show="$store.calendarEngine.event_information" x-text="'Event Information: ' + $store.calendarEngine.event_information"></p>
	<?php
	echo ob_get_clean();
}

add_action( 'piecal_popover_before_view_link', 'my_inject_custom_field_in_popover', 10, 1 );

• This reply was modified 5 months, 2 weeks ago by Anonymous User 9588789.

I figured it out – I needed to use the html directive (https://alpinejs.dev/directives/html):

<p class="piecal_popover_custom_field" x-show="$store.calendarEngine.event_information" x-html="'Event Information: ' + $store.calendarEngine.event_information"></p>

Hey @anthonybartoli,

Glad you got this working and thanks for sharing the solution!

Have a great day