24 hour clock format

24-hour time format is supported, but there’s some manual intervention required.

The date/time format used on the calendar itself is determined by your site’s language or the “locale” attribute on the piecal shortcode. If you choose a locale that uses a 24-hour clock, e.g. en-GB, it will display times in a 24-hour format on the calendar itself.

[piecal locale="en-GB"]

To set the times in the popover (that appears when you click an event) to use 24-hour format, you’ll need a code snippet:

add_filter( "piecal_locale_date_string_format", function( $format ) {
	$format['hour12'] = false;
	
	return $format;
}, 10, 1);

Ohh right, that’s working, thanks. I also had to change the code that’s used to reformat the meta fields in query loops as described in this article:

https://docs.piecalendar.com/article/35-reformat-meta-fields-in-query-loops

<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() + ', ';

    // Get the hours, minutes
    var hours = date.getHours();
    var minutes = date.getMinutes();

    // Format the time
    var formattedTime = hours + ':' + minutes;

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