Blog

Tickera Events Calendar Category Colors

If you are using Tickera Events Calendar, this is how you can display a custom background color for events on the calendar based on the event category.

You will need:

Tickera and Tickera Calendar extension (obviously) are your event management and display plugins. Colorful Categories is a free plugin on the WordPress Repo that adds a tidy color picker to Event Category Editor page.

Add CSS Classes of Category IDs to Calendar

In tickera-calendar.php:

Around line 144 you should find a foreach loop:

foreach ( $wp_events_search->get_results() as $event ) {
$event = new TC_Event( $event->ID );

Immediately after that line, add the following:

// Get the event_category ID(s) for this post, and stringify them
$term_list = wp_get_post_terms($event->id, 'event_category', array('fields' => 'ids'));
$the_terms = implode(', ', $term_list);

A little further down on the page and you should see and if statement like this:

if ( !empty( $event->details->event_end_date_time ) ) {

Within that statement, there are two iterations of event values. We’re going to add the event_category ID as CSS classes to each iteration, so that all events on the calendar will have the event_category id as a CSS class.

So, after

url: '" . $event_url . "', 

for each event details loop, start a new line and add:

className: '" . $the_terms . "',

Great start!

Add CSS style on Calendar Page using jQuery

In functions.php of your theme you are going to add a custom PHP function to insert some jQuery onto the calendar page to complete the work. Provided that the slug for your calendar page is “calendar,” you should be able to use the code below without alterations.

The main actions in this function are:

  1. lookup the color hex being stored in each category meta by the Colorful Categories
  2. find the elements that have both the class .fc-day-grid-event and the term ID
  3. set the CSS to the Colorful Categories value
add_action ('wp_footer', 'colorize_tickera_categories' );
function colorize_tickera_categories() {

	// restrict script to page with slug 'calendar'
	if ( is_page('calendar') ) {

		// start building jQuery
		$op = '<script> jQuery(document).ready(function($) { ';

		// get all event_category term id(s)
		$terms = get_terms( array( 'taxonomy' => 'event_category', 'hide_empty' => true ) );
		// foreach
		foreach ($terms as $term){
		// get color code
			$color = get_term_meta($term->term_id, 'color', true);
			// if there is a color code
			if ( $color != '' ){
				// add a line setting the classname css background value to that color code
				$op .= '$(".fc-day-grid-event.'.$term->term_id.'").css("background-color", "'.$color.'")';
			}
		}

		// close jQuery
		$op .= '});</script>';

		echo $op;
	}
}

 

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!