Customizing date formats across Pie Calendar

Below are some snippets and information on how to modify datetime formats in Pie Calendar.

Case #1: Modify the date format shown in the popover, but nowhere else.

The below code will alter the localeDateString format used for displaying event datetimes in the popover, but nowhere else. You can find all available DateTimeFormat options at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat.

add_action( 'piecal_additional_event_click_js', 'piecal_custom_popover_date_format' ); 

function piecal_custom_popover_date_format() {
?>
Alpine.store('calendarEngine').localeDateStringFormat = {
  "weekday": "long",
  "day": "numeric",
  "year": "numeric",
  "month": "long",
  "hour": "numeric",
  "minute": "numeric",
  "second": "numeric"
};
	
Alpine.store('calendarEngine').allDayLocaleDateStringFormat = {
  "weekday": "short",
  "day": "numeric",
  "year": "numeric",
  "month": "long"
};
<?php
}

Case #2: Modify dates on the main calendar view and in the popover.

The below code will alter the localeDateString format used for both the main calendar view and the popover. This is the best route if the popover should use the same format as the main calendar view.

Note: If you want to alter the date format on the calendar view and in the popover view, but the formats should be different, you can use this snippet and the snippet from Case #1 in tandem to achieve different formats for each context.

add_filter('piecal_locale_date_string_format', 'my_callback');

function my_callback( $format ) {
    $format['weekday'] = 'short'; // Other possible values: long, short, narrow
    $format['day'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['year'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['month'] = 'long'; // Other possible values: numeric, 2-digit, long, short, narrow
    $format['hour'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['minute'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['second'] = 'numeric'; // Other possible values: numeric, 2-digit
	
    return $format;
}

add_filter('piecal_allday_locale_date_string_format', 'my_allday_callback');

function my_allday_callback( $format ) {
    $format['weekday'] = 'short'; // Other possible values: long, short, narrow
    $format['day'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['year'] = 'numeric'; // Other possible values: numeric, 2-digit
    $format['month'] = 'long'; // Other possible values: numeric, 2-digit, long, short, narrow
    
    return $format;
}

Case #3: Modify the format used in the [piecal-info] shortcode output and nowhere else.

The [piecal-info] shortcode has its own format attribute that it uses to format its output. It uses PHP's DateTime formatting syntax, which you can learn more about at https://www.php.net/manual/en/datetime.format.php.

[piecal-info format="Ymd \\a\\r\\o\\u\\n\\d H:i:s"]

Note: Double backslashes must be used to escape characters that should not be interpreted as formatting instructions.