Event Calendar - Preferences

Customize calendar preferences including time format, weekend visibility, and side panel state.

Initialize the preferences

Use the defaultPreferences prop to initialize the preferences:

const defaultPreferences = {
  ampm: false,
  showWeekends: false,
  isSidePanelOpen: false,
}

<EventCalendar defaultPreferences={defaultPreferences} />;

Available properties:

• ampm: Whether the component displays time in 12-hour format with AM/PM.
• showWeekends: Whether the calendar shows weekends.
• showWeekNumber: Whether the calendar shows the week number.
• isSidePanelOpen: Whether the side panel is open.
• showEmptyDaysInAgenda: Whether the agenda view shows days with no events.

Preferences menu

The preferences menu lets users customize the component to their needs.

You can customize which preferences are available in the preferences menu using the preferencesMenuConfig prop:

Available properties:

• toggleAmpm: Show/hide the menu item that toggles 12/24‑hour time format.
• toggleWeekStartsOn: Show/hide the menu item that changes the first day of the week.
• toggleWeekendVisibility: Show/hide the menu item that toggles weekend visibility.
• toggleWeekNumberVisibility: Show/hide the menu item that toggles week number visibility.
• toggleEmptyDaysInAgenda: Show/hide the menu item that toggles the visibility of days with no event in the agenda view.

// hides the menu
preferencesMenuConfig={false}

// hides the menu item responsible for toggling the weekend visibility
// the other preferences remain visible
preferencesMenuConfig={{ toggleWeekendVisibility: false }}

// hides the menu items for toggling weekend and week number visibility
preferencesMenuConfig={{ toggleWeekendVisibility: false, toggleWeekNumberVisibility: false }}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <EventCalendar />
• <EventCalendarPremium />