Preview

Installation

npx sigma-ui@latest add range-calendar

Usage

<script setup lang="ts">
import { type Ref, ref } from 'vue';
import type { DateRange } from 'reka-ui';
import { getLocalTimeZone, today } from '@internationalized/date';
import { RangeCalendar } from '@/components/ui/range-calendar';

const start = today(getLocalTimeZone());

const value = ref({
  start,
  end: start.add({ days: 7 }),
}) as Ref<DateRange>;
</script>

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

About

The <RangeCalendar /> component is built on top of the Reka UI Range Calendar component, which uses the @internationalized/date package to handle dates.

• v-model is a DateRange with start and end date values.
• minValue, maxValue, and isDateUnavailable restrict the dates that can be selected.

Examples

Two Months

Set number-of-months to display several months side by side.

<template>
  <RangeCalendar
    v-model="value"
    :number-of-months="2"
    class="rounded-md border"
  />
</template>

API Reference

RangeCalendar

Props

Prop	Type	Default
defaultPlaceholder The default placeholder date	DateValue	-
defaultValue The default value for the calendar	DateRange	-
modelValue The controlled selected date range of the calendar. Can be bound as v-model.	DateRange | null	-
placeholder The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view	DateValue	-
allowNonContiguousRanges When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.	boolean	-
pagedNavigation This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month	boolean	-
preventDeselect Whether or not to prevent the user from deselecting a date without selecting another date first	boolean	-
maximumDays The maximum number of days that can be selected in a range	number	-
weekStartsOn The day of the week to start the calendar on	WeekStartsOn	-
weekdayFormat The format to use for the weekday strings provided via the weekdays slot prop	WeekDayFormat	-
calendarLabel The accessible label for the calendar	string	-
fixedWeeks Whether or not to always display 6 weeks in the calendar	boolean	-
maxValue The maximum date that can be selected	DateValue	-
minValue The minimum date that can be selected	DateValue	-
locale The locale to use for formatting dates	string	-
numberOfMonths The number of months to display at once	number	-
disabled Whether or not the calendar is disabled	boolean	-
readonly Whether or not the calendar is readonly	boolean	-
initialFocus If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted	boolean	-
isDateDisabled A function that returns whether or not a date is disabled	Matcher	-
isDateUnavailable A function that returns whether or not a date is unavailable	Matcher	-
isDateHighlightable A function that returns whether or not a date is hightable	Matcher	-
dir The reading direction of the calendar when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
nextPage A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.	((placeholder: DateValue) => DateValue)	-
prevPage A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.	((placeholder: DateValue) => DateValue)	-
disableDaysOutsideCurrentView Whether or not to disable days outside the current view.	boolean	-
fixedDate Which part of the range should be fixed	"start" | "end"	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called whenever the model value changes	[date: DateRange]
update:placeholder Event handler called whenever the placeholder value changes	[date: DateValue]
update:validModelValue Event handler called whenever there is a new validModel	[date: DateRange]
update:startValue Event handler called whenever the start value changes	[date: DateValue]

RangeCalendarCell

Props

Prop	Type	Default
daterequired	DateValue	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarCellTrigger

Props

Prop	Type	Default
dayrequired	DateValue	-
monthrequired	DateValue	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarGrid

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarGridBody

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarGridHead

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarGridRow

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarHeadCell

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarHeader

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarHeading

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	{ headingValue: string; }

RangeCalendarNextButton

Props

Prop	Type	Default
nextPage The function to be used for the next page. Overwrites the nextPage function set on the RangeCalendarRoot.	((placeholder: DateValue) => DateValue)	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

RangeCalendarPrevButton

Props

Prop	Type	Default
prevPage The function to be used for the prev page. Overwrites the prevPage function set on the RangeCalendarRoot.	((placeholder: DateValue) => DateValue)	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders the days as a grid of buttons with accessible date labels. Reka UI handles focus management and keyboard navigation.

Key	Description
Tab	Moves focus to the navigation buttons, then to the focused day of the grid.
Space	When focus is on a navigation button, changes the month. When focus is on a day, selects it as the start or the end of the range.
Enter	When focus is on a navigation button, changes the month. When focus is on a day, selects it as the start or the end of the range.
ArrowRight	Moves focus to the next day.
ArrowLeft	Moves focus to the previous day.
ArrowDown	Moves focus to the same day of the next week.
ArrowUp	Moves focus to the same day of the previous week.
Esc	While a range is being selected, cancels the selection and restores the previous range.