# Colour-Code Event Categories in Calendar Views

> Adds a coloured left border to events in The Events Calendar's list, day and month views based on their event category, so visitors can scan the calendar by type.

- Type: PHP
- Runs: Run everywhere
- Category: [Plugin Integrations](https://wpide.com/library/category/integrations/)
- Tags: events-calendar, categories, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/tec-event-category-colors/

## Code

```php
$wpide_colors = array( // Event category slug => colour.
    'workshops' => '#2271b1',
    'concerts'  => '#d63638',
    'kids'      => '#00a32a',
);

add_action( 'wp_head', function () use ( $wpide_colors ) {
    if ( ! class_exists( 'Tribe__Events__Main' ) || ! function_exists( 'tribe_is_event_query' ) || ! tribe_is_event_query() ) {
        return;
    }

    $css = '';
    foreach ( $wpide_colors as $slug => $color ) {
        $slug  = sanitize_html_class( $slug );
        $color = sanitize_hex_color( $color );
        if ( $slug && $color ) {
            $css .= sprintf(
                '.tribe-events .tribe_events_cat-%1$s,.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-%1$s{border-inline-start:4px solid %2$s;padding-inline-start:8px}',
                $slug,
                $color
            );
        }
    }

    if ( $css ) {
        echo '<style id="wpide-tec-cat-colors">' . $css . '</style>'; // phpcs:ignore WordPress.Security.EscapeOutput -- built from sanitized parts.
    }
} );
```

## Notes

Map category slugs to colours in $wpide_colors. Uses the category classes TEC adds to each event.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Colour-Code Event Categories in Calendar Views" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/