Change color of date and time

[Jessica Hanson]

As the code is now, there is no way to target just the time portion with CSS to make it a different color from the date. Because the first part of the date and the time are strung together and the end time is off on it’s own.

I want to have the date be one color and the time be another separate color so that they are differentiated from one another and don’t string along confusingly.

Is there someway to do this?

Thank you!

[Brook]

Howdy Jessica,

I would love to help you with that. It’s certainly possible to add some spans to the dates and times, allowing selective targeting with CSS.

Typically the date/time is output by calling the function tribe_events_event_schedule_details(). You can find the code for that function here: /the-events-calendar/src/functions/template-tags/general.php on line 1050. You can override the HTML output by this function with the filter ‘tribe_events_event_schedule_details’. There are two ways to modify it:

1. Using regex search and replace on the main $schedule variable find the dates and times then wrap them in spans. This will be difficult, there are a lot of optional elements so your regex will need to be very flexible.
2. Option 2 is to create your own modified version of tribe_events_event_schedule_details(). The best way to do that is:
   1. Copy/paste the entire function tribe_events_event_schedule_details() into your theme’s functions.php.
   2. Remove the “apply_filter” line at the very end of this new function, which applies the filter ‘tribe_events_event_schedule_details’.
   3. Rename this function to something like custom_event_schedule_details. And add this newly renamed filter to the filter:
      add_filter( 'tribe_events_event_schedule_details', 'custom_event_schedule_details', 10, 3 );
   4. Now you can modify the output of the function. In the middle of it you will see the $inner variable, which is forming the output HTML based on whether the event has a start time, end time, spans multiple days, etc. Add spans anywhere you need them.

So there you have it! Does that answer your question?

Cheers!

– Brook

[Jessica Hanson]

Thank you! I just ended up making direct edits to general.php and made notes to re-enter my changes if there is an update. This is how my function looks, notice the new span class timeFormat.

I did a search within the-events-calendar/src/template-tags/general.php for:
function tribe_events_event_schedule_details( $event = null, $before = ”, $after = ” )

then within this function there is a section starting with:

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

I then went in and found:

tribe_get_start_date( $event, false, $time_format )

and

tribe_get_end_date( $event, false, $time_format )

and then added in my span class around these so that they ended up looking like this:
‘<span class=”timeFormat”>’.tribe_get_start_date( $event, false, $time_format ).'</span>’

and

‘<span class=”timeFormat”>’.tribe_get_end_date( $event, false, $time_format ).'</span>’

In the end, this section looked like this:

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 class=”value-title” title=”‘ . $microformatStartFormat . ‘”></span>’;
$inner .= ‘</span>’ . $time_range_separator;
$inner .= ‘<span class=”date-end dtend”>’;
$inner .= tribe_get_end_date( $event, true, $format2ndday );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatEndFormat . ‘”></span>’;
} else {
$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? $datetime_separator . ‘<span class=”timeFormat”>’.tribe_get_start_date( $event, false, $time_format ).'</span>’ : ” );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatStartFormat . ‘”></span>’;
$inner .= ‘</span>’ . $time_range_separator;
$inner .= ‘<span class=”date-end dtend”>’;
$inner .= tribe_get_end_date( $event, false, $format2ndday ) . ( $time ? $datetime_separator . ‘<span class=”timeFormat”>’.tribe_get_end_date( $event, false, $time_format ).'</span>’ : ” );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatEndFormat . ‘”></span>’;
}
} elseif ( tribe_event_is_all_day( $event ) ) { // all day event
$inner .= tribe_get_start_date( $event, true, $format );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatStartFormat . ‘”></span>’;
} 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 . ‘<span class=”timeFormat”>’.tribe_get_start_date( $event, false, $time_format ).'</span>’ : ” );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatStartFormat . ‘”></span>’;
} else { // defined start/end time
$inner .= tribe_get_start_date( $event, false, $format ) . ( $time ? $datetime_separator . ‘<span class=”timeFormat”>’.tribe_get_start_date( $event, false, $time_format ).'</span>’ : ” );
$inner .= ‘<span class=”value-title” title=”‘ . $microformatStartFormat . ‘”></span>’;
$inner .= ‘</span>’ . ( $show_end_time ? ‘<span class=”timeFormat”>’.$time_range_separator.'</span>’ : ” );
$inner .= ‘<span class=”end-time dtend”>’;
$inner .= ( $show_end_time ? ‘<span class=”timeFormat”>’.tribe_get_end_date( $event, false, $time_format ).'</span>’ : ” ) . ‘<span class=”value-title” title=”‘ . $microformatEndFormat . ‘”></span>’;
}
}

$inner .= ‘</span>’;

[Brook]

That sounds good. I am sorry this was a pain in this case. I would like to see us insert more spans here for all to enjoy. But there is a small penalty when we do stuff like that as it typically breaks some themes. If you would like to see us add those spans in a future update, please suggest this as a feature on UserVoice (click here).

Thanks for marking this topic resolved, and sharing your solution. Cheers!

– Brook

[Author]

Posts