Calendar

Inline date picker built on reka-ui. Three layouts: month-and-year (default), month-only, year-only. Supports single, multiple, and range selection modes.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Calendar,
  CalendarCell,
  CalendarCellTrigger,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHead,
  CalendarGridRow,
  CalendarHeadCell,
  CalendarHeader,
  CalendarHeading,
  CalendarNextButton,
  CalendarPrevButton,
} from "@/components/ui/calendar";
</script>

<template>
  <Calendar>
    <CalendarHeader>
      <CalendarPrevButton />
      <CalendarHeading />
      <CalendarNextButton />
    </CalendarHeader>
    <CalendarGrid>
      <CalendarGridHead>
        <CalendarGridRow>
          <CalendarHeadCell />
        </CalendarGridRow>
      </CalendarGridHead>
      <CalendarGridBody>
        <CalendarGridRow>
          <CalendarCell>
            <CalendarCellTrigger />
          </CalendarCell>
        </CalendarGridRow>
      </CalendarGridBody>
    </CalendarGrid>
  </Calendar>
</template>

Default

Single date selection.

Event Date, June 2026

Range

Pick a start and end date.

Event Date, June 2026

June 2026

Multiple

Select arbitrary dates one by one.

Event Date, June 2026

API Reference

Props, events, and slots for each sub-component.

Calendar

Props

Prop	Type	Default	Description
modelValue	DateValue \| DateValue[]	—	Selected date(s). Supports v-model.
layout	"month-and-year" \| "month-only" \| "year-only"	"month-and-year"	Heading layout.
mode	"single" \| "multiple" \| "range"	"single"	Selection mode (reka-ui).
numberOfMonths	number	1	Render multiple months side by side.
minValue	DateValue	—	Earliest selectable date.
maxValue	DateValue	—	Latest selectable date.
locale	string	"en"	Locale for month/day names.
weekStartsOn	number	1	0 = Sunday, 1 = Monday.

Events

Event	Description
update:modelValue	Fires when the selection changes. Enables v-model.
update:placeholder	Fires when the focused month/year changes during navigation.

Slots

Slot	Description
calendar-heading	Scoped slot to override the month/year heading. Receives { headingValue }.
calendar-prev-icon	Override the previous-month navigation icon.
calendar-next-icon	Override the next-month navigation icon.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`←`	Moves to the previous day.
`→`	Moves to the next day.
`↑`	Moves to the same day in the previous week.
`↓`	Moves to the same day in the next week.
`Home`	Moves to the first day of the row.
`End`	Moves to the last day of the row.
`Page Up`	Moves to the previous month.
`Page Down`	Moves to the next month.
`Enter`	Selects the focused date.
`Space`	Selects the focused date.

Uses the grid pattern; the focused date is the only tabbable cell (roving tabindex).
Selected and disabled dates are conveyed via aria-selected and aria-disabled.

Button Group Card

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun