Overview
The Calendar Events module displays a fully interactive calendar on your page, powered by FullCalendar. It supports three data sources: manually added events (added as child items in the Visual Builder), a pasted JSON array, or a connected Google Calendar. Visitors can switch between Month, Week, Day, List, and Multi-Month views, and click any event to see a detail popup with the title, date, description, category, and link. A category filter bar above the calendar lets visitors show or hide events by type, making it ideal for event pages, team schedules, booking overviews, and community calendars.
Content Settings
Data Source
Data Source (Dropdown)
Choose how to provide event data to the calendar.
- Available options: Manual Events, JSON Import, Google Calendar
- Default: Manual Events
JSON Data (Text Area)
Paste a JSON array of events directly into this field. Each event needs at minimum a title and start date. Example format: [{“title”: “Meeting”, “start”: “2026-03-10”, “color”: “#3b82f6”}]
- Only appears when Data Source is JSON Import
Google API Key (Text Field)
Enter your Google Calendar API key to connect this module to a Google Calendar.
- Only appears when Data Source is Google Calendar
Calendar ID (Text Field)
Enter the Google Calendar ID for the calendar you want to display (e.g. your@gmail.com or a public calendar ID).
- Only appears when Data Source is Google Calendar
Calendar Settings
Default View (Dropdown)
Choose which calendar view is shown when the page loads.
- Available options: Month, Week, Day, List, Multi-Month
- Default: Month
First Day of Week (Dropdown)
Choose which day of the week appears in the first column of the calendar.
- Available options: Sunday, Monday, Saturday
- Default: Sunday
Locale (Text Field)
The language locale used for calendar labels and date formatting. Enter a standard locale code such as en, fr, de, es, or ja.
- Default: en
Show Header Toolbar (Toggle)
Show the navigation toolbar above the calendar with previous/next buttons, a Today button, and view-switching controls.
- Default: On
Interaction
Navigation Links (Toggle)
Allow visitors to click on a day number or week label to jump directly to that Day or Week view.
- Default: On
Week Numbers (Toggle)
Display the ISO week number on the left side of each week row.
- Default: Off
Features
Show Weekends (Toggle)
Include Saturday and Sunday columns in the calendar grid. Turn off to display only Monday through Friday.
- Default: On
Now Indicator (Toggle)
Show a horizontal line marking the current time on the Week and Day views.
- Default: On
Colors
Event Background (Color Picker)
The default background color for all events on the calendar. Individual events can override this with their own color.
- Default: #3b82f6 (blue)
Event Text Color (Color Picker)
The default text color for event labels on the calendar.
- Default: #ffffff (white)
Today Background (Color Picker)
The background color applied to today’s date cell to highlight it.
- Default: #eff6ff (light blue)
Header Background (Color Picker)
Background color for the calendar toolbar and header area.
Border Color (Color Picker)
The color of the grid lines separating calendar cells.
- Default: #e5e7eb (light gray)
Calendar Size
Height (Slider)
Set the height of the calendar container.
- Range: 300 to 1200 pixels
- Default: 600px
Category Filter
Show Filter (Toggle)
Display a category filter panel above the calendar so visitors can toggle event categories on and off.
- Default: On
Background
Standard Divi background options for the module wrapper, including solid color, gradient, image, and video backgrounds.
Calendar Event — Child Settings
When Data Source is set to Manual Events, each event on the calendar is added as a Calendar Event child item. Click ‘Add New Event’ to add events and configure each one using the settings below.
Event Details
Title (Text Field)
The event title displayed on the calendar grid.
- Default: New Event
Category (Dropdown)
Assign this event to a category. Categories appear as filter buttons above the calendar when Show Filter is enabled.
- Available options: Business, Personal, Holiday, Family, Meeting, Other, Custom
- Default: Business
Custom Category Name (Text Field)
Enter the name for your custom category (e.g. Education, Sports, Travel).
- Only appears when Category is Custom
Custom Category Color (Color Picker)
The color used to represent this custom category in the filter bar and on event badges.
- Default: #6366f1 (indigo)
- Only appears when Category is Custom
Start Date (Date/Time Picker)
The start date (and time, if not an all-day event) for this event.
End Date (Date/Time Picker)
The end date (and time) for this event. Leave empty for single-day events.
All Day (Toggle)
Mark this as an all-day event, which will be displayed in the all-day row at the top of the calendar rather than at a specific time.
- Default: On
URL (Text Field)
An optional link URL. When set, clicking this event will open this URL instead of showing the detail popup.
Description (Text Field)
A description or details for this event, displayed in the popup modal when a visitor clicks on the event.
Event Appearance
Background Color (Color Picker)
Override the default event background color for just this event. Leave empty to use the parent calendar’s Event Background color.
Text Color (Color Picker)
Override the default event text color for just this event. Leave empty to use the parent calendar’s Event Text Color.
Design Settings
Header Title
Typography settings for the calendar toolbar title (the month/year or date range shown at the top of the calendar), including font family, size, weight, color, and letter spacing.
Day Numbers
Typography settings for the day numbers in each calendar cell and the day-of-week column headers, including font family, size, weight, and color.
Event Text
Typography settings for the event title and time text displayed on events within the calendar grid, including font family, size, weight, and color.
Event Modal
Modal Background (Color Picker)
Background color of the event detail popup that appears when a visitor clicks an event.
- Default: #ffffff (white)
Modal Title Color (Color Picker)
Color of the event title inside the detail popup.
- Default: #1e293b (dark)
Modal Text Color (Color Picker)
Color of the body text (dates, description) inside the detail popup.
- Default: #334155
Modal Label Color (Color Picker)
Color of the field labels (Start, End, Category, Details) inside the detail popup.
- Default: #64748b (gray)
Overlay Color (Color Picker)
The semi-transparent background overlay that darkens the page behind the event detail popup.
- Default: rgba(0,0,0,0.5)
Modal Border Radius (Slider)
How rounded the corners of the event detail popup are.
- Range: 0 to 50 pixels
- Default: 12px
Calendar Container
Background styling (solid color, gradient, image) for the calendar grid container.
Module Styling
Standard Divi design options for the overall module: Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation entrance effects.
Advanced Settings
- Custom CSS — Write custom CSS targeting specific parts of the calendar: the calendar container, header toolbar, event items, individual day cells, and today’s cell.
- Attributes — Add custom HTML attributes to the module element.
- Visibility — Show or hide this module on desktop, tablet, or phone.
- Transition — Customize hover transition duration and style.
- Position — Control the module’s positioning (static, relative, absolute, or fixed).
- Scroll Effects — Add Divi’s built-in scroll-triggered motion effects.
- Conditions — Set conditions for when this module should display.
Tips & Best Practices
- Use the Category filter alongside the ‘Custom’ category option to create color-coded event types tailored to your business — for example, ‘Training’, ‘Client Call’, and ‘Deadline’ — so visitors can immediately filter to what’s relevant to them.
- For a public-facing events calendar, use the JSON Import data source. Prepare your events as a JSON array and paste it in — this makes it easy to update events by editing a single field rather than managing many child items.
- Set the Default View to ‘List’ for a compact, agenda-style display on pages where you want a clean list of upcoming events rather than a full month grid. This works well in sidebars or narrow column layouts.
- Enable the Now Indicator in Week or Day view so visitors attending live or real-time events can immediately see where they are in the schedule at a glance.