• 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

• 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

• 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.