Overview

The Calendar Style Settings section allows you to customize the appearance of the Full Calendar used throughout Event Builder. These settings help you match the calendar with your website’s branding by controlling the colors of buttons, headers, titles, and event blocks.

All changes made in this section are applied globally to every Full Calendar displayed using Event Builder shortcodes or Elementor widgets.

---

Full Calendar Style

Overview

The Full Calendar Style settings provide complete control over the visual appearance of your event calendar. You can customize navigation buttons, calendar headers, event colors, and text styling to create a professional and consistent calendar experience.

These settings apply to all Full Calendar layouts across your website.

---

Button Background

Customize the background color of the calendar navigation buttons.

Available States

• Normal
• Hover

This setting affects buttons such as:

• Previous
• Next
• Today
• Month
• Week
• Day
• List

Recommendations

• Use your website’s primary brand color.
• Apply a slightly darker hover color to improve user interaction.
• Ensure sufficient contrast with the button text.

---

Button Text Color

Customize the text color displayed inside the calendar buttons.

Available States

• Normal
• Hover

This setting controls the text displayed on all calendar navigation buttons.

Examples include:

• Today
• Month
• Week
• Day
• List

Choose a text color that remains readable against the selected button background.

---

Header Background

Customize the background color of the Full Calendar header.

The header contains:

• Calendar Navigation
• Current Month
• View Switcher Buttons

A subtle background color helps visually separate the calendar header from the event grid.

---

Title Color

Customize the color of the calendar title.

The title typically displays the current calendar period, such as:

• January 2026
• February 2026
• March 2026

Using a prominent title color improves readability and helps visitors quickly identify the current view.

---

Event Background

Customize the background color of event items displayed within the calendar.

Available States

• Normal
• Hover

This setting affects event blocks displayed in:

• Month View
• Week View
• Day View
• List View

Using a hover color provides visual feedback when visitors move their cursor over an event.

Recommendations

• Use colors that align with your website branding.
• Ensure event colors stand out against the calendar background.
• Keep hover colors visually distinct but consistent.

---

Event Text Color

Customize the text color displayed inside calendar events.

This setting affects information such as:

• Event Title
• Event Time
• Short Event Labels

Choose a color that provides strong contrast against the selected event background to ensure maximum readability.

---

Notes

• These settings apply globally to all Full Calendar instances in Event Builder.
• Button and event hover colors are displayed only when users interact with those elements.
• Individual Elementor Calendar widgets may override these global style settings through their Style controls.
• Changes take effect immediately after saving the settings.