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>
