Calendar

Default

Single date selection.

Usage

Import the parts you need from the component's folder.

import { Calendar } from "@/components/ui/calendar";

Range

Set mode to range to pick a start and end date. The model becomes a { start, end } object.

Multiple

Set mode to multiple to select arbitrary dates one by one. The model is an array.

Layouts

layout swaps the heading between month and year selects, one of the two, or a plain label when set to null.

Number of months

Render several months side by side. They stack vertically below the md breakpoint.

Min and max

Bound the selectable window with minValue and maxValue. The month and year dropdowns follow the bounds: out-of-range months are disabled, the year list is trimmed, and a year switch clamps the visible month into range.

Disabled dates

isDateDisabled takes a matcher and blocks the dates it returns true for.

Booked dates

Pair isDateUnavailable with isDateDisabled to strike through dates that are taken rather than merely dimming them.

Presets

Control the visible month with v-model:placeholder so a preset can set the value and jump the calendar to it. For a preset panel inside a popover, use DatePicker's presets prop instead.

Custom cell size

The day slot replaces the contents of every day button — prices, dots, badges. A bare text node is the day itself; any <span> beside it is rendered small and dimmed. Give the cells room with the --cell-size variable, which also accepts breakpoint variants.

Basic

The minimal setup: mode defaults to single, so a v-model ref and a border are all a date picker needs.

Dropdown caption

layout="month-and-year" — the default — turns the heading into month and year selects so you can jump across the calendar without clicking through every month.

Date and time

Compose a date + time picker by pairing the calendar with a native <Input type="time"> below it in a card.

Custom days

The day slot receives { day, month }, so individual dates can carry their own content — an event dot, a nightly price — while the day number stays put.

Week numbers

showWeekNumber prefixes each row with its ISO-8601 week number in a leading column.

Hijri calendar

reka-ui takes the calendar system from the placeholder's DateValue, so a placeholder converted with toCalendar(..., new IslamicUmalquraCalendar()) renders an Umm al-Qura (Hijri) grid. Set a matching -u-ca-islamic-umalqura locale so the heading labels line up.

Anatomy

Import all parts and piece them together.

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

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.