There are three distinct ways to customize calendar styles:

Adding custom styles directly in your stylesheets (child theme)

This is only a good idea if you’re using a child theme. If you add custom CSS to any CSS files in your parent theme, then you will lose those changes the next time your theme updates. For more information about how to set up a child theme and why check out this knowledgebase article.

Using the WordPress Customizer

Use this by navigating to Appearance → Customize from the WordPress dashboard, then selecting the Additional CSS option.

Learn more about our other customizer settings

Demo Site banner ad

Overwriting CSS files

It’s possible to override the calendar’s stylesheets with your own custom versions the same way you would override the calendar’s other template files. In other words, you still make a copy of the file, add a tribe folder in your child theme directory, then drop the copied file in that folder to start customizing.

The difference between overriding calendar templates and calendar stylesheets is that your custom stylesheet will load in addition to the plugin’s stylesheets. Put differently, it overrides the styles but doesn’t fully replace the original file. This means that you don’t need to copy all the CSS code from the original CSS file and paste it into the template override. You can simply create a blank CSS template and add your custom CSS.

The Events Calendar offers 2 default stylesheet options to choose from:

  • Skeleton Styles – Includes only enough CSS to achieve complex layouts like calendar and week view
  • Tribe Event Styles – More detailed layouts, relying heavily on the plugin styles.

Stylesheets reference

The following is an outline of what to name and where to put your custom stylesheets for each plugin and add-on.

PluginStylesheet NameTheme Location
The Events Calendartribe-events.css/tribe-events
Events Calendar Protribe-events-pro.css/tribe-events/pro
Calendar Widgetwidget-calendar.css/tribe-events/pro
Event Ticketstickets.csstribe-events/tickets
Community Eventstribe-events-community.css/tribe-events/community

Class naming and CSS structure

One of the many good things about the CSS styles and structure we introduced in the upgraded views is that we’re using BEM. It stands for “Block Element Modifier”, and is a naming styling that provides a better structure for the CSS code and scalable CSS. In the large list of pros, we can find that most of the HTML elements should contain a pretty unique CSS class. This will make it super easy when it comes to customizing styles!

Another good thing to know is that the new views are contained by a wrapper that works flawlessly to target the styles within each view.

The Events Calendar views are wrapped in a container that has the following class: .tribe-events

The entire implementation is described in our developer docs

Replacing Default Stylesheets

If you’d like to replace the default stylesheets offered by The Events Calendar, you can simply use WordPress’ built-in functions for enqueuing and deregistering stylesheets: wp_enqueue_style() and wp_deregister_style(), respectively.

You’ll want to use wp_deregister_style() as opposed to wp_dequeue_style() here, because The Events Calendar and its add-ons register stylesheets and scripts first before later enqueueing them. This comes with many benefits, but it means that wp_dequeue_style() will only work some of the time.

An example of this approach in action is as follows—put the following snippet in your theme’s functions.php file to disable most of The Events Calendar’s and Events Calendar Pro’s main built-in styles:

<?php
function deregister_tribe_styles() {
    wp_deregister_style( 'tribe-events-pro-views-v2-skeleton' );
    wp_deregister_style( 'tribe-events-pro-views-v2-full' );
    wp_deregister_style( 'tribe-events-views-v2-skeleton' );
    wp_deregister_style( 'tribe-events-views-v2-full' );
    wp_deregister_style( 'tribe-common-skeleton-style' );
    wp_deregister_style( 'tribe-common-full-style' );
}
add_action( 'wp_enqueue_scripts', 'deregister_tribe_styles', 1 );

You can then use wp_enqueue_style() in a separate function to load all of your own styles.