Skip to main content
All CollectionsEvents Calendar
Event Calendar Categories & Color Coding
Event Calendar Categories & Color Coding

Make your club calendar easier to navigate by categorizing events and color coding the categories.

Updated over 5 months ago

Presenting your calendar and all it has to offer can get overwhelming to your members when your club has a lot going on. Adding color-coded event categories to your events can help keep things in order and visually pleasing.

How to add an Event Category

In the Wordpress admin menu, click on Events -> Categories to access the event category settings.

To add a new category fill in the Name on the form at left and select a color via the color picker at the bottom of the form. The Slug field can be left blank as that will be automatically generated based on the name. The Description field is only for internal use -- it is not displayed on the front end of the site and is not required.

On the front end members will now see the various events with colored backgrounds indicating their category. If you would like to add a select menu so members can filter the calendar view by category you can do that by editing the shortcode used to display the calendar on the page. Shortcodes are snippets of specially formatted text that get replaced with various content when the page is rendered. The full list of options that the Events Calendar supports via shortcodes can be found here.

To edit the calendar page go the Pages menu in the dashboard and select the calendar page OR go to the calendar on the front end of the site (while logged in as an administrator) and click on the Edit Page link at the top of the screen. Adding the word category to the list of options for one of the three calendar header sections (left, center and right) will render the select menu for filtering by category.

For example, the following short code will render a month calendar with options at the top left to navigate forwards and backwards and at the top right to switch between month and week views, jump back to the current date (if you have navigated away from it) and show a select menu for categories.

[eo_fullcalendar headerLeft='prev,next title' headerCenter='' headerRight='today month,agendaWeek, category']

A calendar with a number of events and multiple categories will look something like the following, depending on the colors you have selected.

Did this answer your question?