👋 This article covers Views 2 (V2), the updated design of calendar views that shipped in The Events Calendar 5 and Events Calendar Pro 5. If you are using the legacy views, please check out WordPress Customizer (V1).
The Events Calendar supports the WordPress Customizer, located at
Customize from the WordPress dashboard. This is an excellent way to make styling changes to the calendar directly in WordPress without touching code.
Locating the WordPress Customizer
The WordPress Customizer is part of the
Customize screen in the WordPress admin. The easiest way to access the Customizer, though, is to simply navigate to the event page that you wish to customize, and then click “Customize” in the admin Toolbar menu.
Some themes hide the admin Toolbar by default. If you can’t locate the Toolbar or the “Customize” link within it, you may find it easiest to just head to your site’s
wp-admin and to the
Using the WordPress Customizer
Once you’ve got the Customizer open, you’ll notice that its comprised of two panes: the customization options panel on the left, and the preview screen on the right.
In that left-hand panel of customization options, there’s a link that says “The Events Calendar.” Click on this to begin customizing the calendar.
You’ll see a list of options in the left-hand panel of features you can customize. Many of these options are for customizing colors, so, for example, if you click an option and then modify a color, you’ll see a corresponding preview in the right-hand pane of those changes.
Once you’ve found the right color for one item, you can customize the colors of as many other items as you’d like without having to save your changes yet. Once you’re all set with the customizations you want to make, click “Save & Publish.” If you don’t like your changes, though, simply click “Default” to remove them and exit the Customizer.
You can make as many customizations as you’d like before clicking that “Save & Publish” button, and can repeat this process over and over until your calendar is looking just right.
All Available Options
The WordPress Customizer options for The Events Calendar are organized in the following groups.
|Event Title||Changes the color of the event title in calendar views, on the single event page, and on some Event Tickets pages.|
|Date and Time||Controls the colors of the main event date and time display in calendar views, on the single event page, and on some Event Tickets pages.|
|Links||Controls the color of URLs on single events as well as Pro Venue & Organizer pages.|
|Background Color||Changes the background color of most calendar pages, including views, single events, Pro Venue & Organizer pages, Community Events pages, and some Event Tickets pages.|
|Accent Color||Changes the default blue color used throughout the calendar. Among other things, this controls the color of the Find Events button and the featured event highlights.|
|Custom Map Pin||Allows the ability to add or change a custom image for Map View and single event pages. Note that this function is only available to users who are using a custom Google Maps API Key.|
|Event Title Color||Controls the color of the event’s title in the single event view. This setting will override the Event Title color setting in the General section.|
|Details Background Color||Controls the background color of the event details box on the single event page. This applies to event made with the classic editor, or events made with the block editor that use the Event Details Classic block.|
Shortcodes and the WordPress Customizer
By default, the
[tribe_events] shortcode will apply styles from the WordPress Customizer if you make those changes for the main calendar page when using the legacy views.
If you are using the updated calendar views, which you can find under
Events Settings →
Display, the Customizer will not automatically apply the Customizer settings to your
However you can easily apply these styles by adding the following filter to your theme’s functions.php file:
add_filter( 'tribe_customizer_should_print_shortcode_customizer_styles', '__return_true' );