Overview

A view decides which dates are visible and how to draw them. A calendar can have several views, for example a week view and a month view. The view state names the active one, and <Calendar.ActiveView /> renders it.

Built-in viewsCopy Anchor Link

The built-in views are source files in the repository's registry folder. You copy them into your app and can change anything in them; see UI source.

Registering viewsCopy Anchor Link

Pass views to createCalendar. The first one is active by default unless you set defaultView or view on Root. TypeScript learns the view names from this list, so setView and defaultView only accept names you registered.

const Calendar = createCalendar<Meeting>()({
  eventAdapter,
  views: [createWeekView<Meeting>(), createMonthView<Meeting>()],
});

Each name must be unique. createCalendar throws calendar-duplicate-view-name if two views share one.

View optionsCopy Anchor Link

A view can declare defaultOptions. Override them per calendar with viewOptions on Root, keyed by view name. Each entry is typed from that view's defaultOptions, and you only pass the fields you want to change. For example, viewOptions={{ agenda: { weeks: 2 } }} makes the agenda view show two weeks instead of four.

Switching viewsCopy Anchor Link

Calendar.ViewSwitcher renders a plain <select> with one option per registered view:

const labels = { week: "Week", month: "Month" };

<Calendar.ViewSwitcher getViewLabel={(name) => labels[name]} />;

For a styled control, registry/calendar has a ViewSwitcher built on shadcn's Select. The Quick start shows how to connect it. To build your own, call setView from useCalendarActions(). Inside a view's Renderer, use the actions prop instead.

The active view also drives Title, PreviousTrigger, and NextTrigger. The title comes from the view's getTitle, and the buttons move by the view's own step: a week in the week view, a month in the month view.

If the active name doesn't match a registered view, ActiveView renders its fallback prop, the previous and next buttons are disabled, and meta.diagnostics includes an unregistered-active-view error.