{"id":1966013,"date":"2025-07-16T07:35:13","date_gmt":"2025-07-16T11:35:13","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1966013"},"modified":"2025-07-16T07:35:14","modified_gmt":"2025-07-16T11:35:14","slug":"how-to-add-an-add-to-calendar-button-in-divi-for-events-calendar","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-add-an-add-to-calendar-button-in-divi-for-events-calendar\/","title":{"rendered":"How to Add an \u201cAdd to Calendar\u201d Button in Divi for Events Calendar"},"content":{"rendered":"\n

How to Add an \u201cAdd to Calendar\u201d Button in Divi for Events Calendar<\/strong><\/p>\n\n\n\n

If you’re using the Divi Builder<\/strong>, the default “Add to Calendar”<\/strong> button from The Events Calendar <\/strong>plugin won\u2019t appear. This is because Divi uses its own template for single events.<\/p>\n\n\n\n

Option 1: Use Divi Events Calendar Extension<\/strong><\/p>\n\n\n\n

Divi offers a premium extension that integrates directly with The Events Calendar: Divi Events Calendar Module \u2013 Elegant Themes<\/a><\/p>\n\n\n\n

This can provide built-in support for calendar buttons and other event features.<\/p>\n\n\n\n

Option 2: Use a Custom Shortcode for Google Calendar<\/strong><\/p>\n\n\n\n

If you prefer not to use the extension, you can create a simple Google Calendar<\/strong> button using the steps below.<\/p>\n\n\n\n

Step 1: Add Custom Code with Code Snippets<\/strong><\/p>\n\n\n\n

Install and activate the Code Snippets<\/a><\/strong> plugin.

Then add the following snippet:<\/p>\n\n\n\n

function custom_add_to_calendar_button_auto() {\n\n    $event_id = get_the_ID();\n\n    if (!$event_id || get_post_type($event_id) !== 'tribe_events') {\n\n        return '';\n\n    }\n\n    $title = get_the_title($event_id);\n\n    $start = tribe_get_start_date($event_id, false, 'Ymd\\THis');\n\n    $end = tribe_get_end_date($event_id, false, 'Ymd\\THis');\n\n    $location = tribe_get_venue($event_id);\n\n    $description = get_the_excerpt($event_id);\n\n    $google_calendar_url = \"https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE\" .\n\n        \"&text=\" . urlencode($title) .\n\n        \"&dates=\" . $start . \"\/\" . $end .\n\n        \"&details=\" . urlencode($description) .\n\n        \"&location=\" . urlencode($location) .\n\n        \"&sf=true&output=xml\";\n\n    ob_start(); ?>\n\n    <a href=\"<?php echo esc_url($google_calendar_url); ?>\" target=\"_blank\" class=\"add-to-calendar-button\">\n\n        Add to Calendar\n\n    <\/a>\n\n    <style>\n\n        .add-to-calendar-button {\n\n            display: inline-block;\n\n            padding: 10px 15px;\n\n            background-color: #0073aa;\n\n            color: #fff;\n\n            text-decoration: none;\n\n            border-radius: 5px;\n\n        }\n\n    <\/style>\n\n    <?php\n\n    return ob_get_clean();\n\n}\n\nadd_shortcode('add_to_calendar_auto', 'custom_add_to_calendar_button_auto');\n\nSave and activate the snippet<\/code><\/pre>\n\n\n\n
Step 2: Use the Shortcode in Divi<\/strong><\/p>\n\n\n\n
In your Divi single event template<\/strong>, add the following shortcode where you want the button to appear:<\/p>\n\n\n\n
[add_to_calendar_auto]<\/code>

This will add a working Add to Calendar<\/strong> button linking to Google Calendar.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
How to Add an \u201cAdd to Calendar\u201d Button in Divi for Events Calendar If you’re using the Divi Builder, the default “Add to Calendar” button from The Events Calendar plugin won\u2019t appear. This is because Divi uses its own template for single events. Option 1: Use Divi Events Calendar Extension Divi offers a premium extension…<\/p>\n","protected":false},"author":27,"featured_media":1955565,"comment_status":"open","ping_status":"open","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":[116,24,59],"tags":[23,25,58],"stellar-product-taxonomy":[158,161],"class_list":["post-1966013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","category-customizing","category-customizing-resources","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"},{"value":24,"label":"Customizations"},{"value":59,"label":"PHP & Functions"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Abz","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/abz\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS & Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS & Styling","category_nicename":"css-styling","category_parent":24},{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":110,"filter":"raw","term_order":"0","cat_ID":24,"category_count":110,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0},{"term_id":59,"name":"PHP & Functions","slug":"customizing-resources","term_group":0,"term_taxonomy_id":59,"taxonomy":"category","description":"","parent":24,"count":101,"filter":"raw","term_order":"0","cat_ID":59,"category_count":101,"category_description":"","cat_name":"PHP & Functions","category_nicename":"customizing-resources","category_parent":24}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1966013"}],"version-history":[{"count":3,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966013\/revisions"}],"predecessor-version":[{"id":1966028,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966013\/revisions\/1966028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1966013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1966013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1966013"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1966013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}