How to Add an “Add to Calendar” 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’t appear. This is because Divi uses its own template for single events.

Option 1: Use Divi Events Calendar Extension

Divi offers a premium extension that integrates directly with The Events Calendar: Divi Events Calendar Module – Elegant Themes

This can provide built-in support for calendar buttons and other event features.

Option 2: Use a Custom Shortcode for Google Calendar

If you prefer not to use the extension, you can create a simple Google Calendar button using the steps below.

Step 1: Add Custom Code with Code Snippets

Install and activate the Code Snippets plugin.

Then add the following snippet:

function custom_add_to_calendar_button_auto() {

    $event_id = get_the_ID();

    if (!$event_id || get_post_type($event_id) !== 'tribe_events') {

        return '';

    }

    $title = get_the_title($event_id);

    $start = tribe_get_start_date($event_id, false, 'Ymd\THis');

    $end = tribe_get_end_date($event_id, false, 'Ymd\THis');

    $location = tribe_get_venue($event_id);

    $description = get_the_excerpt($event_id);

    $google_calendar_url = "https://calendar.google.com/calendar/render?action=TEMPLATE" .

        "&text=" . urlencode($title) .

        "&dates=" . $start . "/" . $end .

        "&details=" . urlencode($description) .

        "&location=" . urlencode($location) .

        "&sf=true&output=xml";

    ob_start(); ?>

    <a href="<?php echo esc_url($google_calendar_url); ?>" target="_blank" class="add-to-calendar-button">

        Add to Calendar

    </a>

    <style>

        .add-to-calendar-button {

            display: inline-block;

            padding: 10px 15px;

            background-color: #0073aa;

            color: #fff;

            text-decoration: none;

            border-radius: 5px;

        }

    </style>

    <?php

    return ob_get_clean();

}

add_shortcode('add_to_calendar_auto', 'custom_add_to_calendar_button_auto');

Save and activate the snippet

Step 2: Use the Shortcode in Divi

In your Divi single event template, add the following shortcode where you want the button to appear:

[add_to_calendar_auto]

This will add a working Add to Calendar button linking to Google Calendar.