{"id":1949842,"date":"2021-06-14T16:12:51","date_gmt":"2021-06-14T20:12:51","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1949842"},"modified":"2026-04-21T19:55:02","modified_gmt":"2026-04-21T23:55:02","slug":"divi-theme","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/divi-theme\/","title":{"rendered":"Using the Divi Theme with The Events Calendar"},"content":{"rendered":"\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/O2wSqtVlkk0\" title=\"YouTube video player\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe>\n\n\n\n<p>Divi is a popular WordPress theme and page builder by <a href=\"https:\/\/www.elegantthemes.com\/\">Elegant Themes<\/a>. It works with The Events Calendar, and this article covers everything from installation and initial setup through styling, compatibility fixes, and advanced customizations.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-what-you-need\">What You Need<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/the-events-calendar\/\"><strong>The Events Calendar<\/strong><\/a> (free) \u2014 the base calendar plugin for publishing and displaying events.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/event-tickets\/\"><strong>Event Tickets<\/strong><\/a> (free, optional) \u2014 adds ticket and RSVP functionality to events, pages, and posts.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\"><strong>Divi from Elegant Themes<\/strong><\/a> \u2014 the theme itself.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.peeayecreative.com\/product\/divi-events-calendar\/\"><strong>Divi Events Calendar<\/strong><\/a> by Pee-Aye Creative (optional, third-party) \u2014 a premium add-on that provides dedicated Divi modules for event features, enabling tighter integration between the builder and The Events Calendar.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-installation\">Installation<\/h2>\n\n\n\n<p>Installing Divi alongside The Events Calendar follows the same process as any other WordPress theme and plugin combination. <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/downloading-and-installing-the-plugin\/\">Install both<\/a> as you normally would, and you get a working calendar out of the box.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/06\/divi-calendar-month-default.png\" alt=\"The default Month View calendar displayed on a site using the Divi theme\"\/><\/figure>\n\n\n\n<p>The default calendar URL is <code>\/events<\/code>, which can be changed in the plugin settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setup-and-customizer-settings\">Setup and Customizer Settings<\/h2>\n\n\n\n<p>The Events Calendar offers extensive <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/guide\/customization\/\">customization options for views and events<\/a>. When Divi is active, some of those options are also controllable via the WordPress Customizer, which Divi integrates with directly.<\/p>\n\n\n\n<p>Divi&#8217;s Customizer settings that affect the calendar include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>General Settings \u2192 Layout:<\/strong> Enable Boxed Layout<\/li>\n\n\n\n<li><strong>General Settings \u2192 Typography:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Header Text Size<\/li>\n\n\n\n<li>Header Font<\/li>\n\n\n\n<li>Body Link Color<\/li>\n\n\n\n<li>Body Text Color<\/li>\n\n\n\n<li>Header Text Color<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>For a full overview of TEC&#8217;s own Customizer settings, see <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\">The Events Calendar WordPress Customizer<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-styling-with-divi\">Styling with Divi<\/h2>\n\n\n\n<p>By default, TEC outputs its calendar using its own templates and stylesheets. Styling is controlled primarily through the Customizer and CSS \u2014 not through Divi&#8217;s visual builder directly. There are two main approaches to styling the calendar in a Divi site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-option-1-divi-events-calendar-add-on\">Option 1: Divi Events Calendar Add-On<\/h4>\n\n\n\n<p>The <a href=\"https:\/\/www.peeayecreative.com\/product\/divi-events-calendar\/\">Divi Events Calendar plugin by Pee-Aye Creative<\/a> adds custom Divi modules \u2014 including a calendar, event feed, carousel, filters, and single event pages \u2014 each with extensive design controls inside the builder. It provides hundreds of styling options: borders, spacing, typography, colors, and layout.<\/p>\n\n\n\n<p>To get started with this add-on:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install and activate Divi Events Calendar after The Events Calendar.<\/li>\n\n\n\n<li>Open the Divi Builder and add the desired module (e.g., Events Calendar, Events Feed).<\/li>\n\n\n\n<li>Configure the <strong>Content<\/strong> tab: filter by category, date range, thumbnails, virtual events, and more.<\/li>\n\n\n\n<li>Use the <strong>Design<\/strong> tab to adjust typography, borders, tooltips, hover effects, spacing, and colors.<\/li>\n<\/ol>\n\n\n\n<p>For single-event page control, use the <strong>Events Page<\/strong> module with a Divi Theme Builder template. Each event populates dynamically using that layout. <a href=\"https:\/\/divieventscalendar.com\/modules\/events-page\/\">View the demo.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-option-2-custom-css\">Option 2: Custom CSS<\/h4>\n\n\n\n<p>Whether you&#8217;re using Divi modules or TEC&#8217;s default templates, fine-grained appearance adjustments can always be made with CSS. See <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/customizing-css\/\">Customizing CSS with The Events Calendar<\/a> and <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/working-with-view-classes\/\">Calendar View CSS Classes<\/a> for reference.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fixing-compatibility-issues\">Fixing Compatibility Issues<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-the-classic-editor\">Use the Classic Editor<\/h3>\n\n\n\n<p>For the best compatibility between Divi and The Events Calendar, we recommend using the Classic Editor for events. When the Block Editor is active alongside Divi, some event post settings become unavailable. You can enable the Classic Editor by going to <strong>Events \u2192 Settings \u2192 General<\/strong> and making sure the <strong>Activate Block Editor for Events<\/strong> option is unchecked.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/06\/tec-admin-settings-cgeneral-classic-editor.png\" alt=\"The Events Calendar General settings screen with the Block Editor option unchecked\"\/><\/figure>\n\n\n\n<p>\ud83d\udca1 If you use the Divi Events Calendar add-on to build event content in Divi Builder, you don&#8217;t need to enable the Classic Editor \u2014 you can leave the Block Editor setting as-is and use Divi Builder to create events as you would any other page or post.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-disable-jquery-compatibility-script\">Disable jQuery Compatibility Script<\/h3>\n\n\n\n<p>Make sure the <strong>Enqueue jQuery Compatibility Script<\/strong> setting under <strong>Divi \u2192 Theme Options \u2192 Performance<\/strong> is <strong>disabled<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/image-3.png\" alt=\"The Divi Performance tab showing the jQuery Compatibility Script option that should be disabled\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fix-attendee-registration-layout-issues\">Fix Attendee Registration Layout Issues<\/h3>\n\n\n\n<p>If you&#8217;re experiencing layout problems on the attendee registration page, disable <strong>Dynamic CSS<\/strong> under <strong>Divi \u2192 Theme Options \u2192 Performance<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fix-calendar-template-issues\">Fix Calendar Template Issues<\/h3>\n\n\n\n<p>In some cases, the calendar&#8217;s default template may not load properly \u2014 events appear like regular blog posts rather than in Month or List view format. To resolve this, go to <strong>Divi \u2192 Theme Builder<\/strong>, temporarily disable all current templates, then re-enable them. This flushes Divi&#8217;s template hierarchy and reinitializes both Divi&#8217;s and TEC&#8217;s templates correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-events\">Creating Events<\/h2>\n\n\n\n<p>The recommended approach is to use the Classic Editor when creating events in Divi, as described in the compatibility section above. This preserves all available event post settings.<\/p>\n\n\n\n<p>If you prefer to use Divi Builder for event content, the <a href=\"https:\/\/divieventscalendar.com\/modules\/events-page\/\">Divi Events Calendar add-on<\/a> by Pee-Aye Creative extends the builder with dedicated event modules and elements, removing the need to switch to the Classic Editor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-an-add-to-calendar-button\">Adding an &#8220;Add to Calendar&#8221; Button<\/h2>\n\n\n\n<p>When Divi Builder is used to build single event pages, TEC&#8217;s native &#8220;Add to Calendar&#8221; button doesn&#8217;t appear \u2014 Divi uses its own template for single events, which doesn&#8217;t include it. There are two ways to add the button back.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-option-1-divi-events-calendar-add-on-0\">Option 1: Divi Events Calendar Add-On<\/h4>\n\n\n\n<p>The <a href=\"https:\/\/www.elegantthemes.com\/marketplace\/divi-events-calendar-module\/\">Divi Events Calendar Module by Elegant Themes<\/a> provides built-in support for calendar buttons and other event features within the builder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-option-2-custom-google-calendar-shortcode\">Option 2: Custom Google Calendar Shortcode<\/h4>\n\n\n\n<p>If you prefer not to use the add-on, you can create a Google Calendar button manually using a custom shortcode.<\/p>\n\n\n\n<p><strong>Step 1: Add the Shortcode Function<\/strong><\/p>\n\n\n\n<p>Install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\">Code Snippets<\/a> plugin, then add and activate the following snippet:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction custom_add_to_calendar_button_auto() {\n    $event_id = get_the_ID();\n\n    if ( ! $event_id || get_post_type( $event_id ) !== &#039;tribe_events&#039; ) {\n        return &#039;&#039;;\n    }\n\n    $title       = get_the_title( $event_id );\n    $start       = tribe_get_start_date( $event_id, false, &#039;Ymd\\THis&#039; );\n    $end         = tribe_get_end_date( $event_id, false, &#039;Ymd\\THis&#039; );\n    $location    = tribe_get_venue( $event_id );\n    $description = get_the_excerpt( $event_id );\n\n    $google_calendar_url = &quot;https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&quot;\n        . &quot;&amp;amp;text=&quot;     . urlencode( $title )\n        . &quot;&amp;amp;dates=&quot;    . $start . &quot;\/&quot; . $end\n        . &quot;&amp;amp;details=&quot;  . urlencode( $description )\n        . &quot;&amp;amp;location=&quot; . urlencode( $location )\n        . &quot;&amp;amp;sf=true&amp;amp;output=xml&quot;;\n\n    ob_start(); ?&gt;\n    \n        Add to Calendar\n    \n<\/pre><\/div>\n\n\n<p><strong>Step 2: Add the Shortcode to Your Divi Template<\/strong><\/p>\n\n\n\n<p>In your Divi single event template, add a Code module or Text module containing the following shortcode wherever you want the button to appear:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;add_to_calendar_auto]\n<\/pre><\/div>\n\n\n<p>This renders a styled &#8220;Add to Calendar&#8221; link that opens Google Calendar pre-filled with the event&#8217;s title, dates, location, and description.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-post-navigation-by-event-date\">Post Navigation by Event Date<\/h2>\n\n\n\n<p>Divi&#8217;s <a href=\"https:\/\/www.elegantthemes.com\/modules\/post-navigation\/\">Post Navigation Module<\/a> uses the post&#8217;s published date to determine previous and next event order. If you publish events out of chronological order (for example, publishing a December event before a November event), the navigation can appear random or out of sequence.<\/p>\n\n\n\n<p>The Events Calendar uses the event&#8217;s start date for its own navigation. The following snippet hooks into WordPress&#8217;s standard navigation filters to override Divi&#8217;s Post Navigation Module, sorting adjacent events by event start date (<code>_EventStartDate<\/code>) instead of publish date.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nadd_filter( &#039;get_previous_post_join&#039;, &#039;my_tec_adjacent_events_join&#039;, 10, 2 );\nadd_filter( &#039;get_next_post_join&#039;, &#039;my_tec_adjacent_events_join&#039;, 10, 2 );\n\n\/**\n * Join event start date meta for adjacent post queries on events.\n *\/\nfunction my_tec_adjacent_events_join( $join, $in_same_term ) {\n    if ( ! is_singular( &#039;tribe_events&#039; ) ) {\n        return $join;\n    }\n\n    global $wpdb;\n\n    $meta_join = &quot; LEFT JOIN {$wpdb-&gt;postmeta} AS tec_mt ON (tec_mt.post_id = p.ID AND tec_mt.meta_key = &#039;_EventStartDate&#039;) &quot;;\n\n    if ( strpos( $join, &quot;tec_mt.meta_key = &#039;_EventStartDate&#039;&quot; ) !== false ) {\n        return $join;\n    }\n\n    return $join . $meta_join;\n}\n\nadd_filter( &#039;get_previous_post_where&#039;, &#039;my_tec_adjacent_events_where_previous&#039;, 10, 2 );\n\n\/**\n * Adjust WHERE for previous event based on event start date.\n *\/\nfunction my_tec_adjacent_events_where_previous( $where, $in_same_term ) {\n    if ( ! is_singular( &#039;tribe_events&#039; ) ) {\n        return $where;\n    }\n\n    $event_date = get_post_meta( get_the_ID(), &#039;_EventStartDate&#039;, true );\n    if ( empty( $event_date ) ) {\n        return $where;\n    }\n\n    $where = preg_replace(\n        &quot;\/p\\.post_date\\s*&amp;lt;\\s*&#039;&#x5B;^&#039;]*&#039;\/&quot;,\n        &quot;tec_mt.meta_value &amp;lt; &#039;{$event_date}&#039;&quot;,\n        $where\n    );\n\n    if ( strpos( $where, &#039;tec_mt.meta_value IS NOT NULL&#039; ) === false ) {\n        $where .= &quot; AND tec_mt.meta_value IS NOT NULL&quot;;\n    }\n\n    return $where;\n}\n\nadd_filter( &#039;get_next_post_where&#039;, &#039;my_tec_adjacent_events_where_next&#039;, 10, 2 );\n\n\/**\n * Adjust WHERE for next event based on event start date.\n *\/\nfunction my_tec_adjacent_events_where_next( $where, $in_same_term ) {\n    if ( ! is_singular( &#039;tribe_events&#039; ) ) {\n        return $where;\n    }\n\n    $event_date = get_post_meta( get_the_ID(), &#039;_EventStartDate&#039;, true );\n    if ( empty( $event_date ) ) {\n        return $where;\n    }\n\n    $where = preg_replace(\n        &quot;\/p\\.post_date\\s*&gt;\\s*&#039;&#x5B;^&#039;]*&#039;\/&quot;,\n        &quot;tec_mt.meta_value &gt; &#039;{$event_date}&#039;&quot;,\n        $where\n    );\n\n    if ( strpos( $where, &#039;tec_mt.meta_value IS NOT NULL&#039; ) === false ) {\n        $where .= &quot; AND tec_mt.meta_value IS NOT NULL&quot;;\n    }\n\n    return $where;\n}\n\nadd_filter( &#039;get_previous_post_sort&#039;, &#039;my_tec_adjacent_events_sort_previous&#039; );\n\n\/**\n * Sort previous event by event start date DESC.\n *\/\nfunction my_tec_adjacent_events_sort_previous( $sort ) {\n    if ( ! is_singular( &#039;tribe_events&#039; ) ) {\n        return $sort;\n    }\n    return &#039; ORDER BY tec_mt.meta_value DESC LIMIT 1&#039;;\n}\n\nadd_filter( &#039;get_next_post_sort&#039;, &#039;my_tec_adjacent_events_sort_next&#039; );\n\n\/**\n * Sort next event by event start date ASC.\n *\/\nfunction my_tec_adjacent_events_sort_next( $sort ) {\n    if ( ! is_singular( &#039;tribe_events&#039; ) ) {\n        return $sort;\n    }\n    return &#039; ORDER BY tec_mt.meta_value ASC LIMIT 1&#039;;\n}\n<\/pre><\/div>\n\n\n<p>Add this snippet to your child theme&#8217;s <code>functions.php<\/code> file or via a dedicated code snippets plugin. See <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/best-practices-for-implementing-custom-code-snippets\/\">Best Practices for Implementing Custom Code Snippets<\/a> for guidance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi is a popular WordPress theme and page builder by Elegant Themes. It works with The Events Calendar, and this article covers everything from installation and initial setup through styling, compatibility fixes, and advanced customizations. What You Need Installation Installing Divi alongside The Events Calendar follows the same process as any other WordPress theme and&#8230;<\/p>\n","protected":false},"author":84,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[46],"tags":[],"stellar-product-taxonomy":[],"class_list":["post-1949842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"The Events Calendar Team","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/the_events_calendar_team\/"},"comment_info":0,"category_info":[{"term_id":46,"name":"Integrations","slug":"integrations","term_group":0,"term_taxonomy_id":46,"taxonomy":"category","description":"","parent":0,"count":40,"filter":"raw","term_order":"0","cat_ID":46,"category_count":40,"category_description":"","cat_name":"Integrations","category_nicename":"integrations","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1949842"}],"version-history":[{"count":7,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842\/revisions"}],"predecessor-version":[{"id":1969859,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842\/revisions\/1969859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1949842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1949842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1949842"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1949842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}