Skip to main content

views

Lists the views the calendar instantiates and shows in the toolbar mode switcher. Each entry is either a registered view id or a ViewConfig object that relabels the view or deep-merges section overrides.

Usage

views?: (string | ViewConfig)[];

type ViewConfig =
| string
| {
id: string;
label?: string;
sections?: Record<string, any>;
};
FieldTypeDescription
idstringView id; must match a registered view (day, week, month, agenda, year, resources, timeline, or a custom id from registerCalendarView)
labelstringDisplay label in the mode switcher; falls back to the localized view id
sectionsRecord<string, any>Per-section overrides keyed by section name (e.g. timeGrid, multiday); deep-merged into the defaults

Default: ["day", "week", "month"].

Example

String entries:

<Calendar
events={data}
view="week"
views={["day", "week", "month", "agenda", "year"]}
/>

ViewConfig with section overrides:

<Calendar
events={data}
view="week"
views={[
{
id: "week",
label: "Week",
sections: {
timeGrid: {
yScale: { startHour: 6, endHour: 22, snapStep: 15 },
},
},
},
"month",
]}
/>
  • view — pick the active view from this list.
  • registerCalendarView — add a custom view class to the registry.
  • Custom views — section overrides and ViewModel subclasses.
  • Scales — tuning hours, slot size, and snap on the time axis.