Anatomy

A calendar is made of the parts your createCalendar factory returns, such as Calendar.Toolbar, and a few components from the registry. The diagram labels each part with its name in code, and the code below it puts the same parts together.

<Calendar.Root
  events={meetings}
  defaultAnchorDate={today}
  defaultTimeZone="Europe/Berlin"
  locale="en-US"
  weekRules={weekRules}
>
  <Calendar.Frame>
    <Calendar.Toolbar>
      <Calendar.TodayTrigger>Today</Calendar.TodayTrigger>
      <Calendar.PreviousTrigger aria-label="Previous period" />
      <Calendar.NextTrigger aria-label="Next period" />
      <Calendar.Title />
      <ViewSwitcher value={view} onValueChange={setView} options={viewOptions} />
    </Calendar.Toolbar>
    <aside>
      <MiniMonth
        locale="en-US"
        selectedDate={anchorDate}
        onSelectDate={setAnchorDate}
        today={today}
        weekStartsOn={1}
      />
    </aside>
    <Calendar.Viewport>
      <Calendar.ActiveView />
    </Calendar.Viewport>
  </Calendar.Frame>
</Calendar.Root>

• Root holds the calendar's state and renders no element of its own. Every part and hook works anywhere inside it.
• Frame, Toolbar, Title, Viewport, and the three triggers each render one element with a data-calendar-part attribute, such as data-calendar-part="today-trigger", for styling. The component reference lists them.
• ActiveView renders the active view's Renderer inside the viewport.
• ViewSwitcher and MiniMonth come from registry/calendar. They're plain components: you connect them to the calendar with setView, setAnchorDate, and the view and anchorDate state. Calendar.ViewSwitcher is an unstyled <select> you can use instead.

The registry's CalendarToolbar renders the toolbar parts above, styled, and puts its children at the end. The Quick start uses it:

<CalendarToolbar calendar={Calendar}>
  <ViewSwitcher value={view} onValueChange={setView} options={viewOptions} />
</CalendarToolbar>

ViewsCopy Anchor Link

ActiveView draws the rest. Each built-in view has its own anatomy: