Skip to content

Views & Display

The calendar renders in three views, switchable by visitors, with a separate default for mobile and full control over how each event line reads.

The three views

  • Month — the classic grid. Each day shows up to your "Events Per Day" count as pills, with a "+X more" button opening a popup listing that day's full schedule. Day cells grow to fit their events, and every cell in a week row stays equal height.
  • List — a chronological list of events for the current month, one row per event.
  • Agenda — upcoming events from today forward, capped by the Agenda View Event Limit.

Set the starting view with Default View Type (View Settings section). Visitors change views with the view switcher buttons in the calendar header — turn the switcher off with Show View Switcher if you want to lock a single view.

Mobile

Mobile View Type picks a different default view below 768px — List is the default there, since month grids are cramped on phones. The switcher still works on mobile unless you've hidden it.

Event display format

Event Display Format controls what each event line shows:

FormatExample
Title + TimesYoga Basics (10:00 am - 11:00 am)
Title OnlyYoga Basics
Times Only10:00 am - 11:00 am
CustomYour template using placeholders

The Custom format takes a template with {title}, {start_time} and {end_time} placeholders — e.g. {start_time} · {title}.

All-day events (stored by Voxel as 00:00–23:59) are detected automatically and shown without times.

Styling

Every part of the calendar — container, header, navigation buttons, day headers, day cells, event pills, the "+X more" indicator, and the view switcher — has its own style section in the Elementor Style tab, with the usual colors, typography, spacing and border controls, including Normal/Hover/Active states where they apply.

Built by Code Wattz.