How to change color and style of time in The Events Calendar Shortcode

So you’d like to format the time separate from the date of an event in The Events Calendar Shortcode, but there’s no spans or other HTML for you to do that with. But with a bit of customization this can be done!

If you create a new file in wp-content/plugins/ called the-events-calendar-shortcode-time-formatting.php then paste the following into it (or add it to your child theme’s functions.php), some additional spans will be added around the times and around the separators between the date and times:

<?php
/*
Plugin Name: The Events Calendar Shortcode Pro Spans Around Time
Plugin URI: https://eventcalendarnewsletter.com/the-events-calendar-shortcode/
Description: Adds additional spans around the date/time output for ease of CSS formatting
Version: 1.0
Author: Event Calendar Newsletter
Author URI: https://eventcalendarnewsletter.com/the-events-calendar-shortcode/
License: GPL2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

function tecs_add_span_around_time( $output, $atts, $post ) {
$event = null;
$before = $after = ”;
if ( is_null( $event ) ) {
global $post;
$event = $post;
}

if ( is_numeric( $event ) ) {
$event = get_post( $event );
}

$inner = ‘’;
$format = ”;
$date_without_year_format = tribe_get_date_format();
$date_with_year_format = tribe_get_date_format( true );
$time_format = get_option( ‘time_format’ );
$datetime_separator = tribe_get_option( ‘dateTimeSeparator’, ‘ @ ‘ );
$time_range_separator = tribe_get_option( ‘timeRangeSeparator’, ‘ – ‘ );

$settings = array(
‘show_end_time’ => true,
‘time’ => true,
);

$settings = wp_parse_args( apply_filters( ‘tribe_events_event_schedule_details_formatting’, $settings ), $settings );
if ( ! $settings[‘time’] ) {
$settings[‘show_end_time’] = false;
}

/**
* @var $show_end_time
* @var $time
*/
extract( $settings );

$format = $date_with_year_format;

// if it starts and ends in the current year then there is no need to display the year
if ( tribe_get_start_date( $event, false, ‘Y’ ) === date( ‘Y’ ) && tribe_get_end_date( $event, false, ‘Y’ ) === date( ‘Y’ ) ) {
$format = $date_without_year_format;
}

if ( tribe_event_is_multiday( $event ) ) { // multi-date event

$format2ndday = apply_filters( ‘tribe_format_second_date_in_range’, $format, $event );

if ( tribe_event_is_all_day( $event ) ) {
$inner .= tribe_get_start_date( $event, true, $format );
$inner .= ‘’ . $time_range_separator . ‘’;
$inner .= ‘’;

$end_date_full = tribe_get_end_date( $event, true, Tribe__Date_Utils::DBDATETIMEFORMAT );
$end_date_full_timestamp = strtotime( $end_date_full );

// if the end date is <= the beginning of the day, consider it the previous day
if ( $end_date_full_timestamp <= strtotime( tribe_beginning_of_day( $end_date_full ) ) ) {
$end_date = tribe_format_date( $end_date_full_timestamp – DAY_IN_SECONDS, false, $format2ndday );
} else {
$end_date = tribe_get_end_date( $event, false, $format2ndday );
}

$inner .= $end_date;
} else {
$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? ‘’ . $datetime_separator . ‘’ . tribe_get_start_date( $event, false, $time_format ) . ‘’ : ” );
$inner .= ‘’ . $time_range_separator . ‘’;
$inner .= ‘’;
$inner .= tribe_get_end_date( $event, false, $format2ndday ) . ( $time ? ‘’ . $datetime_separator . ‘’ . tribe_get_end_date( $event, false, $time_format ) . ‘’ : ” );
}
} elseif ( tribe_event_is_all_day( $event ) ) { // all day event
$inner .= tribe_get_start_date( $event, true, $format );
} else { // single day event
if ( tribe_get_start_date( $event, false, ‘g:i A’ ) === tribe_get_end_date( $event, false, ‘g:i A’ ) ) { // Same start/end time
$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? ‘’ . $datetime_separator . ‘’ . tribe_get_start_date( $event, false, $time_format ) . ‘’ : ” );
} else { // defined start/end time
$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? ‘’ . $datetime_separator . ‘’ . tribe_get_start_date( $event, false, $time_format ) . ‘’ : ” );
$inner .= ‘’ . ( $show_end_time ? ‘’ . $time_range_separator . ‘’ : ” );
$inner .= ‘’;
$inner .= ( $show_end_time ? ‘’ . tribe_get_end_date( $event, false, $time_format ) . ‘’ : ” );
}
}

$inner .= ‘’;

/**
* Provides an opportunity to modify the *inner* schedule details HTML (ie before it is
* wrapped).
*
* @param string $inner_html the output HTML
* @param int $event_id post ID of the event we are interested in
*/
$inner = apply_filters( ‘tribe_events_event_schedule_details_inner’, $inner, $event->ID );

// Wrap the schedule text
$schedule = $before . $inner . $after;

/**
* Provides an opportunity to modify the schedule details HTML for a specific event after
* it has been wrapped in the before and after markup.
*
* @param string $schedule the output HTML
* @param int $event_id post ID of the event we are interested in
* @param string $before part of the HTML wrapper that was prepended
* @param string $after part of the HTML wrapper that was appended
*/
return $schedule;
}
add_filter( ‘ecs_event_list_details’, ‘tecs_add_span_around_time’, 10, 3 );

Then just activate the new “The Events Calendar Shortcode Pro Spans Around Time” plugin and you’re all set!

The Events Calendar Shortcode Tutorials