Overview of the event date and time module

The Event Date and Time module shows an event’s date, start and end time, and timezone. It is ideal for single event pages and Theme Builder templates.

How to add the event date and time module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for Event Date & Time in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab controls which events the module shows and how they are displayed. The module-specific settings are grouped into the toggles below; Link, Background and Element Label are the standard Divi options.

Event

• Event Source: Which event source this module reads from. Site default follows the setting under Divi Extended → Events; pinning one lets a second module on the same page read from another, which is a supported configuration rather than a migration step.
• Event: Which event this shows. “This event” follows the event the page is about, so one layout serves every event, and is offered only where there is one — a single event or a Theme Builder template. Options: This event, Next upcoming event, A specific event.
• Choose Event: The event this shows. If it is later deleted or unpublished the module renders nothing rather than switching to another event, so a pinned field never quietly becomes a different event’s.

Display

• Date Layout: Stacked reads down the module — the date, then the time under it, then the timezone — which is what a single event page has the width for. One line runs the same values together with a separator, for a sidebar or a narrow column. Options: Stacked, One line.
• Show End Time: Include the time the event finishes. An all-day event never shows times, and an event whose end time is hidden in its own settings stays hidden here.
• Show Timezone: Name the timezone the times are printed in. Worth keeping while Divi Extended → Events reads dates in each event’s own zone, where 09:30 alone is a time a reader in another country will get wrong; turn it off on a site whose events all sit in one zone, where the label says the same thing on every event.

Tip: Use Event = This event in a Theme Builder single event template so every event page shows its own date.

Design tab settings

The Design tab lets you style every part of the module. Each toggle below controls one element:

• Date & Time: style of the date and time text.
• Date: style of the date.
• Time: style of the time.
• Timezone: style of the timezone label.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.