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                    = '<span class="tribe-event-date-start">';
	$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 .= '</span><span class="timerange_separator">' . $time_range_separator . '</span>';
			$inner .= '<span class="tribe-event-date-end">';

			$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 ? '<span class="datetime_separator">' . $datetime_separator . '</span><span class="tecs_time tecs_start_time">' . tribe_get_start_date( $event, false, $time_format ) . '</span>' : '' );
			$inner .= '</span><span class="timerange_separator">' . $time_range_separator . '</span>';
			$inner .= '<span class="tribe-event-date-end">';
			$inner .= tribe_get_end_date( $event, false, $format2ndday ) . ( $time ? '<span class="datetime_separator">' . $datetime_separator . '</span><span class="tecs_time tecs_end_time">' . tribe_get_end_date( $event, false, $time_format ) . '</span>' : '' );
		}
	} 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 ? '<span class="datetime_separator">' . $datetime_separator . '</span><span class="tecs_time tecs_start_time">' . tribe_get_start_date( $event, false, $time_format ) . '</span>' : '' );
		} else { // defined start/end time
			$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? '<span class="datetime_separator">' . $datetime_separator . '</span><span class="tecs_time tecs_start_time">' . tribe_get_start_date( $event, false, $time_format ) . '</span>' : '' );
			$inner .= '</span>' . ( $show_end_time ? '<span class="timerange_separator">' . $time_range_separator . '</span>' : '' );
			$inner .= '<span class="tribe-event-time">';
			$inner .= ( $show_end_time ? '<span class="tecs_time tecs_end_time">' . tribe_get_end_date( $event, false, $time_format ) . '</span>' : '' );
		}
	}

	$inner .= '</span>';

	/**
	 * 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!