The Events Calendar

Divi Events Calendar

While on the Calendar page, enable the Visual Builder
Click on the + to add a module
Select the ‘Events Calendar’ module

Styling the Divi Calendar in the ‘Events Calendar’ module

The ‘Content’ tab: The default settings typically do not need to be changed
The ‘Design’ tab: All, or at least the bulk of the styling happens here
The ‘Advanced’ tab: The default settings typically do not need to be changed

Styles in the ‘Design’ tab

Toggle Group	Infrequent Style Items	Frequent Style Items	Comments
Heading Text	Font Style Font Style Text Alignment Letter Spacing Line Height Text Shadow	Font Font Weight Text Color Text Size
Days of the Week	Name Padding Border Width Font Sytle Text Alignment Text Size Letter Spacing	Background color Border Color Font Font Weight Text Color
Calendar Days	Past Calendar Days Padding Border-width Border Color Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow	Background Current Calendar Day Font Text Color*	* Dates only Default for Other Months is reduced opacity
Events	Margin Padding Font Style Text Alignment Letter Spacing Text Shadow Rounded Borders Border Styles Border Width Border Color	Background Color Font Font Weight Text Color Text Size Line Height
Thumbnails in Calendar Days	All
Navigation Buttons	Margin Margin Font Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow Border Styles Border Style Text Shadow	Background Color* Text Color* Rounded Corners Border Width Border Color	* edit hover
View Buttons	Margin Padding Font Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow Border Styles Border Style Text Shadow	Background Color* Text Color* Current Background Color Current Text Color Rounded Corners Border Width Border Color	* edit hover
Tooltip	Rounded Corners Border Style	Background Color Border Width* Border Color*	* Border around Event Details Can’t view in Visual Builder
Details Image	All		Can’t view in Visual Builder
Details Labels Text	All		Can’t view in Visual Builder
Details Title Text	Font Style Text Alignment Letter Spacing Text Shadow	Font Font Weight Text Color Text Size Line Height	Can’t view in Visual Builder
Details Text	Font Style Text Alignment Letter Spacing Text Shadow	Link Color Icon Color* Font Font Weight Text Color* Text Size Line Height	Can’t view in Visual Builder ——————– * Detail Text/Icon
Details Excerpt Text	All others	Text Color*	Can’t view in Visual Builder
Sizing	All		Defaults are set to ‘auto’
Spacing		Margin Padding
Border	All		Border around all components
Box Shadow	All
Filters	All
Transform	All
Animation	All

Divi Events Calendar | ADA Checklist

While on the Calendar page, enable the Visual Builder
Click on the + to add a module
Select the ‘Events Calendar’ module

Styling the Divi Calendar in the ‘Events Calendar’ module

The ‘Content’ tab: The default settings typically do not need to be changed
The ‘Design’ tab: All, or at least the bulk of the styling happens here
The ‘Advanced’ tab: The default settings typically do not need to be changed

Styles in the ‘Design’ tab

Toggle Group	Infrequent Style Items	Frequent Style Items	Comments
Heading Text	Font Style Font Style Text Alignment Letter Spacing Line Height Text Shadow	Font Font Weight Text Color Text Size
Days of the Week	Name Padding Border Width Font Sytle Text Alignment Text Size Letter Spacing	Background color Border Color Font Font Weight Text Color
Calendar Days	Past Calendar Days Padding Border-width Border Color Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow	Background Current Calendar Day Font Text Color*	* Dates only Default for Other Months is reduced opacity
Events	Margin Padding Font Style Text Alignment Letter Spacing Text Shadow Rounded Borders Border Styles Border Width Border Color	Background Color Font Font Weight Text Color Text Size Line Height
Thumbnails in Calendar Days	All
Navigation Buttons	Margin Margin Font Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow Border Styles Border Style Text Shadow	Background Color* Text Color* Rounded Corners Border Width Border Color	* edit hover
View Buttons	Margin Padding Font Font Style Text Alignment Text Size Letter Spacing Line Height Text Shadow Border Styles Border Style Text Shadow	Background Color* Text Color* Current Background Color Current Text Color Rounded Corners Border Width Border Color	* edit hover
Tooltip	Rounded Corners Border Style	Background Color Border Width* Border Color*	* Border around Event Details Can’t view in Visual Builder
Details Image	All		Can’t view in Visual Builder
Details Labels Text	All		Can’t view in Visual Builder
Details Title Text	Font Style Text Alignment Letter Spacing Text Shadow	Font Font Weight Text Color Text Size Line Height	Can’t view in Visual Builder
Details Text	Font Style Text Alignment Letter Spacing Text Shadow	Link Color Icon Color* Font Font Weight Text Color* Text Size Line Height	Can’t view in Visual Builder ——————– * Detail Text/Icon
Details Excerpt Text	All others	Text Color*	Can’t view in Visual Builder
Sizing	All		Defaults are set to ‘auto’
Spacing		Margin Padding
Border	All		Border around all components
Box Shadow	All
Filters	All
Transform	All
Animation	All

Divi Shortcodes | Mini Calendar | Events List | Countdown | This Week

Example

Shortcode

There are no upcoming events.

M	T	W	T	F	S	S
0 events 1 0 events, 1	0 events 2 0 events, 2	0 events 3 0 events, 3	0 events 4 0 events, 4	0 events 5 0 events, 5	0 events 6 0 events, 6	0 events 7 0 events, 7
0 events 8 0 events, 8	0 events 9 0 events, 9	0 events 10 0 events, 10	0 events 11 0 events, 11	0 events 12 0 events, 12	0 events 13 0 events, 13	0 events 14 0 events, 14
0 events 15 0 events, 15	0 events 16 0 events, 16	0 events 17 0 events, 17	0 events 18 0 events, 18	0 events 19 0 events, 19	0 events 20 0 events, 20	0 events 21 0 events, 21
0 events 22 0 events, 22	0 events 23 0 events, 23	0 events 24 0 events, 24	0 events 25 0 events, 25	0 events 26 0 events, 26	0 events 27 0 events, 27	0 events 28 0 events, 28
0 events 29 0 events, 29	0 events 30 0 events, 30	0 events 31 0 events, 31

There are no upcoming events.

There are no events on this day.

[tribe_mini_calendar]

[tribe_events_list]

[tribe_event_countdown]

There are no upcoming events.

No events scheduled for December 10, 2025.

[tribe_this_week]

Google Calendar

While on the Calendar page, enable the Visual Builder
Click on the + to add a module
Select the ‘Code’ module
When the ‘Code’ module opens, under the ‘Content’ tab and the ‘Text’ item there is a gray box for ‘Code’. Paste the Google <iframe></iframe> into the code box.
Since Google iframes do not include a title, one needs to be added to pass ADA requirements. The HTML title needs to include the school name and the word ‘Calendar’, i.e. title=’ABC School Calendar’
Most of the styles of Google Calendars cannot be edited. If the calendar has a border, then the border thickness and color can be changed in the iframe.
In the ‘Code’ module, under the ‘Design’ tab, the margin and padding around the calendar can be edited in the ‘spacing’ toggle group.

The Events Calendar

Divi Events Calendar

Styling the Divi Calendar in the ‘Events Calendar’ module

Styles in the ‘Design’ tab

Divi Events Calendar | ADA Checklist

Styling the Divi Calendar in the ‘Events Calendar’ module

Styles in the ‘Design’ tab

Divi Shortcodes | Mini Calendar | Events List | Countdown | This Week

Google Calendar

Google Calendar | ADA Checklist

Helpful Links

The Events Calendar

Divi Events Calendar

Styling the Divi Calendar in the ‘Events Calendar’ module

Styles in the ‘Design’ tab

Divi Events Calendar | ADA Checklist

Styling the Divi Calendar in the ‘Events Calendar’ module

Styles in the ‘Design’ tab

Divi Shortcodes | Mini Calendar | Events List | Countdown | This Week

Calendar of Events

Week of Events

Google Calendar

Google Calendar | ADA Checklist

Helpful Links