Divi is a theme by the wonderful folks over at Elegant Themes. It’s flexibility and page-building capabilities has made it one of the more popular WordPress themes and, yes, it works with The Events Calendar.
What you need
- The Events Calendar (free): This is the base calendar plugin that allows you to publish event posts and display them in a calendar format.
- Event Tickets (free, optional): This is the base ticketing plugin for The Events Calendar that adds ticket and RSVP functionality to events, pages, and posts.
- Divi from Elegant Themes: This is the main theme.
- Divi Compatibility Extension (free): This is a free extension by The Events Calendar that addresses a few minor compatibility issues between the plugin and the theme.
- Divi Events Calendar from Pee-Aye Creative: This is an Elegant Themes add-on the adds tighter integration between Divi and The Events Calendar, providing modules for event features.
Using Divi with The Events Calendar is practically the same as integrating The Events Calendar with any other WordPress theme. Install the theme and plugin as you would any other WordPress theme or plugin and you get a nice-looking calendar right out of the box.
The next thing is to configure your calendar. The Events Calendar provides a lot of flexibility to customize your views and events, but Divi adds even more settings that help the calendar and theme work even more seamlessly together.
Navigate to Divi → Theme Options from the WordPress dashboard to access Divi’s theme option settings, starting with the General section.
The setting for the number of posts displayed on archive pages is a key setting. All calendar events (i.e. list, month, day, week, etc.) are archive pages. This setting overrides the same setting in The Events Calendar, so the number you add here is what will take effect on the calendar. To change that, download and install our free Divi Compatibility extension and the calendar setting will be used instead.
The Events Calendar allows you to customize a number of display settings for the calendar and events in the WordPress Customizer.
Divi also allows you to customize your entire site using the WordPress Customizer and some of the settings are applied to the calendar as well. This includes the following:
- General Settings → Layout: Enable Boxed Layout
- General Settings → Typography
- Header Text Size
- Header Font
- Body Link Color
- Body Text Color
- Header Text Color
If you’re looking for even more ways to configure the way the calendar integrates with the theme, consider using the Divi Events Calendar add-on. The Pee-Aye Creative team put it together and it provides additional features, including more layouts, display options, and settings.
Fixing display issues
If you are using Events Calendar Pro alongside The Events Calendar, then there are additional adjustments needed to ensure that the display of calendar-related widgets works as expected. Once again, this is where our free Divi Compatibility extension comes into play, addressing those issues without any additional configuration or setup.
Currently, the best way to publish an event is to use the Classic Editor with events instead of the newer Block Editor. This preserves all of the available event post settings that become unavailable in the Block Editor when Divi is installed and active. You can enable the Classic Editor in The Events Calendar’s settings by navigation to Events → Settings and toggling the option in the General plugin settings.
But chances are that you are using Divi because you prefer using its page builder for creating content. The Divi Events Calendar add-on by Pee-Aye Creative extends Divi Builder to include event modules and elements that can be used to create events. In that case, there is no need to enable the Classic Editor in The Events Calendar settings, and you can use Divi Builder to create events as you would any other page or post.