Reformat Meta Fields in Query Loops

When you want to use Pie Calendar's meta fields like _piecal_start_date in a query loop block or repeater element, you'll see the event date and time format looks a bit strange:

2023-11-21T13:35:43

This is the way that Pie Calendar stores the date and time string in the database, but of course you likely don't want to display that to your users in a post loop.

So, to reformat this into something similar to what users will see when they click the popover, you can follow these steps:

Add a class of "pc-event-time" to each dynamic data element where you're bringing in Pie Calendar meta fields inside your Query Loop
Add the JavaScript below to a code block on your page after the Query Loop block

The code will find all instances of pc-event-time and format them to be more human readable.

The code below was tested and works in the GenerateBlocks 1.8 Query Loop, as well as Bricks Builder 1.9.3 Query Loop.

This code might require adaptation to work in your environment and is not guaranteed to work perfectly. Because this is a developer level doc, we can only provide limited support, especially if you require customization to this code.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Find all elements with the class 'pc-event-time'
    var eventTimes = document.querySelectorAll('.pc-event-time');

    eventTimes.forEach(function(element) {
        // Check if the element has child nodes
        var targetElement = element.childElementCount > 0 ? element.children[0] : element;

        // Parse the ISO date string
        var date = new Date(targetElement.textContent);

        // Format the date and time
        var formattedDate = 
            (date.getMonth() + 1) + '/' + // months are 0-based
            date.getDate() + '/' +
            date.getFullYear() + ', ';

        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;

        var formattedTime = hours + ':' + minutes + ' ' + ampm;

        // Update the text content
        targetElement.textContent = formattedDate + formattedTime;
    });
});
</script>