Use the category colors you've already set in The Events Calendar to color-code your events in the shortcode and block designs, so visitors can see at a glance what type of event it is.
Colors are set under Events → Event Categories in The Events Calendar (version 6.14 or later). Each category can have a primary (border), secondary (background) and text color, along with a priority.
Turning on Category Colors
Turn them on for every shortcode and block under Events → Shortcode & Block by checking Use category colors, or for a single shortcode with category_colors="true":
[ecs-list-events design="calendar" category_colors="true"]
If you've turned them on for the whole site, you can turn them off for a particular shortcode with category_colors="false".
Calendar Design
Each event uses the category's secondary color for the background, the primary color for the border and the text color for the event title and time.
[ecs-list-events design="calendar" category_colors="true" timeformat="h:mm a"]
List View
[ecs-list-events design="calendar" defaultview="listMonth" category_colors="true"]
See more options on the Calendar Design page.
Default Design
A bar in the category's primary color is added beside each event.
[ecs-list-events category_colors="true" limit="5"]
Street Food Tour: Flavors of Asia
Stowe, VT 50333 United States
Artisan Bread & Sourdough
New York, NY 14588 United States
Handmade Pasta Workshop
Hamilton, ON M60 411 Canada
Lebanese Mezze & Grill
Paris, 75007 France
Indian Breads: Naan to Paratha
New York, NY 14588 United States
Compact Design
The date box beside each event uses the category's colors.
[ecs-list-events design="compact" thumb="true" category_colors="true" limit="5"]
Grouped Design
[ecs-list-events design="grouped" groupby="month" category_colors="true" limit="6"]
December 2026
With the Filter Bar
Category colors work well with the Filter Bar, letting visitors narrow down to the categories they're interested in.
[ecs-list-events design="calendar" filterbar="true" filterorder="category" category_colors="true"]
Events in More Than One Category
If an event is in more than one category with a color, the colors of the category with the highest priority (set when editing the category) are used. Events without a colored category are shown as they normally would be, and for the calendar design they'll still use any eventbg, eventfg and eventborder colors you've set.