The Events Calendar supports the WordPress Customizer, located at Appearance
→ 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 Appearance
→ 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 Appearance
→ Customize
screen.
Using the WordPress Customizer
Once you’ve got the Customizer open, you’ll notice that it’s 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.
You can also use the Additional CSS option directly below The Events Calendar to add any custom styles or CSS properties.
All Available Options
The WordPress Customizer options for The Events Calendar are organized in the following groups.
Global Elements
Option Name | Notes |
---|---|
Select Font Family | Choose from Default or Inherit theme font(s) to use the font from The Events Calendar or the font from your theme. |
Select Font Size | Choose the font size based on pixel or by scale (small, medium, or large). |
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. |
Single event
Option Name | Notes |
---|---|
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. |
Month View
Option Name | Notes |
---|---|
Days of the Week | Changes the color of the days of the week headings above the Month View calendar. |
Date Marker | Controls the colors of the individual dates. |
Event Span | Controls the color for all-day and multi-day event spans. Can use the Accent Color or a custom color. |
Grid Lines Color | Changes the color of the lines on the Month View grid. |
Day Hover | Changes the color of the bottom border when hovering over a day. |
Grid Background | Can either be set to transparent or custom. |
Event Preview Background | Changes the preview display color when hovering on an event title. Can be set to White or can respect the General Background Color. |
Events Bar
Option Name | Notes |
---|---|
Text Color | Changes the color of the text in the search bar. |
Find Events Button Text | Controls the color of the Find Events button. |
Icons | Controls the color of all icons in the search bar. |
Find Events Button Color | Changes the background color of the Find Events button. |
Background Color | Changes the background color of the search bar. |
View Dropdown Background Color | Changes the background color of the view switcher dropdown. |
Border Color | Changes the color of the border of the search bar. |