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>;
    };

Field	Type	Description
id	string	View id; must match a registered view (day, week, month, agenda, year, resources, timeline, or a custom id from registerCalendarView)
label	string	Display label in the mode switcher; falls back to the localized view id
sections	Record<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',
  ]"
/>

Expand month rows instead of showing +N more buttons, via the eventOverflow section ui option:

<Calendar
  :events="data"
  view="month"
  :views="[
    'day',
    'week',
    {
      id: 'month',
      sections: {
        month: {
          ui: { eventOverflow: 'expand' },
        },
      },
    },
  ]"
/>

eventOverflow controls month/grid overflow. It defaults to "more", which keeps rows at their normal height until the user expands an overflowing row; "expand" grows the week row to fit every event.

A combined scale on the primary axis groups a boxes or bars section by two axes at once — here date, then resource:

sections: {
  timeGrid: {
    xScale: {
      type: "combined",
      outer: { type: "date", length: 5 },
      inner: {
        type: "unit",
        items: [
          { id: "room-a", label: "Room A" },
          { id: "room-b", label: "Room B" },
        ],
        accessor: "roomId",
      },
    },
  },
}

This produces Date → Resource headers with one layout group per leaf; swap outer and inner for Resource → Date ordering. A combined scale is only accepted on the primary axis of boxes and bars sections.

A unit scale also accepts multiple: true. With it, an accessor that returns an array (string | number | (string | number)[]) renders the event once per unique unit id, and a drag replaces only the assignment on the moved unit - see multi-unit events.

Related articles

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