Range Calendar

Use range calendar when a user needs to pick a start and end date together, such as a booking or report date range. For a single date, use Calendar instead.

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";
</script>

<template>
  <RangeCalendar class="rounded-md border" />
</template>

RangeCalendar renders its own grid, header, and navigation internally from the grid/weekDays slot data reka-ui provides, so most usages only need the root component. Built on reka-ui's Range Calendar; pass v-model:model-value with a { start, end } DateRange to control the selection, and number-of-months to show multiple months side by side.