Preview

Installation

npx sigma-ui@latest add calendar

Usage

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

const value = ref(today(getLocalTimeZone())) as Ref<DateValue>;
</script>

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

• Dates are @internationalized/date objects, which solve problems with internationalization. See Dates & Times in Reka for more details.
• Use v-model to control the selected date. Set multiple to select several dates, then v-model is a DateValue[].
• Use minValue, maxValue, and isDateDisabled to limit which dates can be selected.

Related

• Range Calendar
• Date Picker, including the month and year pickers built from MonthPicker and YearPicker

Examples

Form

Month and year selects

Localization

The locale can be changed with the locale prop. You can also format the month selector using the useDateFormatter composable from Reka UI:

const formatter = useDateFormatter('en');
const locale = ref('fr');

formatter.setLocale(locale.value);

<template>
  <CalendarRoot :locale="locale">
    ...
  </CalendarRoot>
</template>

API Reference

Calendar

Props

Prop	Type	Default
defaultValue The default value for the calendar	DateValue	-
defaultPlaceholder The default placeholder date	DateValue	-
placeholder The placeholder date, which is used to determine what month to display when no date is selected	DateValue	-
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	-
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 the calendar is disabled	boolean	-
readonly Whether 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	-
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)	-
modelValue The controlled selected date value of the calendar. Can be bound as v-model.	DateValue | DateValue[] | null	-
multiple Whether multiple dates can be selected	boolean	-
disableDaysOutsideCurrentView Whether or not to disable days outside the current view.	boolean	-
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: DateValue]
update:placeholder Event handler called whenever the placeholder value changes	[date: DateValue]

CalendarCell

Props

Prop	Type	Default
daterequired The date value for the cell	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.	-

CalendarCellTrigger

Props

Prop	Type	Default
dayrequired The date value provided to the cell trigger	DateValue	-
monthrequired The month in which the cell is rendered	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.	-

CalendarGrid

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

CalendarGridBody

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

CalendarGridHead

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

CalendarGridRow

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

CalendarHeadCell

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

CalendarHeader

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

CalendarHeading

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

CalendarNextButton

Props

Prop	Type	Default
nextPage The function to be used for the next page. Overwrites the nextPage function set on the CalendarRoot.	((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.	-

CalendarPrevButton

Props

Prop	Type	Default
prevPage The function to be used for the prev page. Overwrites the prevPage function set on the CalendarRoot.	((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.	-

MonthPicker

Props

Prop	Type	Default
defaultValue The default value for the month picker	DateValue	-
defaultPlaceholder The default placeholder date	DateValue	-
placeholder The placeholder date, which is used to determine what year to display when no date is selected	DateValue	-
preventDeselect Whether or not to prevent the user from deselecting a date without selecting another date first	boolean	-
calendarLabel The accessible label for the month picker	string	-
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	-
disabled Whether the month picker is disabled	boolean	-
readonly Whether the month picker is readonly	boolean	-
initialFocus If true, the month picker will focus the selected month, today, or the first month of the year on mount	boolean	-
isMonthDisabled A function that returns whether or not a month is disabled	Matcher	-
isMonthUnavailable A function that returns whether or not a month is unavailable	Matcher	-
dir The reading direction of the calendar when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR.	Direction	-
nextPage A function that returns the next page of the month picker. Receives the current placeholder as an argument.	((placeholder: DateValue) => DateValue)	-
prevPage A function that returns the previous page of the month picker. Receives the current placeholder as an argument.	((placeholder: DateValue) => DateValue)	-
modelValue The controlled selected month value of the month picker. Can be bound as v-model.	DateValue | DateValue[] | null	-
multiple Whether multiple months can be selected	boolean	-
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: DateValue | DateValue[]]
update:placeholder Event handler called whenever the placeholder value changes	[date: DateValue]

MonthPickerCell

Props

Prop	Type	Default
daterequired The date value for the cell	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.	-

MonthPickerCellTrigger

Props

Prop	Type	Default
monthrequired The date value provided to the cell trigger	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.	-

MonthPickerGrid

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

MonthPickerGridBody

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

MonthPickerGridRow

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

MonthPickerHeader

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

MonthPickerHeading

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

MonthPickerNextButton

Props

Prop	Type	Default
nextPage The function to be used for the next page. Overwrites the nextPage function set on the MonthPickerRoot.	((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.	-

MonthPickerPrevButton

Props

Prop	Type	Default
prevPage The function to be used for the prev page. Overwrites the prevPage function set on the MonthPickerRoot.	((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.	-

YearPicker

Props

Prop	Type	Default
defaultValue The default value for the year picker	DateValue	-
defaultPlaceholder The default placeholder date	DateValue	-
placeholder The placeholder date, which is used to determine what year range to display when no date is selected	DateValue	-
preventDeselect Whether or not to prevent the user from deselecting a date without selecting another date first	boolean	-
calendarLabel The accessible label for the year picker	string	-
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	-
disabled Whether the year picker is disabled	boolean	-
readonly Whether the year picker is readonly	boolean	-
initialFocus If true, the year picker will focus the selected year, today, or the first year of the range on mount	boolean	-
isYearDisabled A function that returns whether or not a year is disabled	Matcher	-
isYearUnavailable A function that returns whether or not a year is unavailable	Matcher	-
dir The reading direction of the calendar when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR.	Direction	-
nextPage A function that returns the next page of the year picker. Receives the current placeholder as an argument.	((placeholder: DateValue) => DateValue)	-
prevPage A function that returns the previous page of the year picker. Receives the current placeholder as an argument.	((placeholder: DateValue) => DateValue)	-
modelValue The controlled selected year value of the year picker. Can be bound as v-model.	DateValue | DateValue[] | null	-
multiple Whether multiple years can be selected	boolean	-
yearsPerPage Number of years to display per page	number	-
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: DateValue | DateValue[]]
update:placeholder Event handler called whenever the placeholder value changes	[date: DateValue]

YearPickerCell

Props

Prop	Type	Default
daterequired The date value for the cell	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.	-

YearPickerCellTrigger

Props

Prop	Type	Default
yearrequired The date value provided to the cell trigger	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.	-

YearPickerGrid

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

YearPickerGridBody

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

YearPickerGridRow

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

YearPickerHeader

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

YearPickerHeading

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

YearPickerNextButton

Props

Prop	Type	Default
nextPage The function to be used for the next page. Overwrites the nextPage function set on the YearPickerRoot.	((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.	-

YearPickerPrevButton

Props

Prop	Type	Default
prevPage The function to be used for the prev page. Overwrites the prevPage function set on the YearPickerRoot.	((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

Adheres to the Date Picker Dialog WAI-ARIA design pattern for its date grid. Reka UI handles the grid roles, labels, and focus management.

Key	Description
Tab	When focus moves onto the calendar, focuses the first navigation button.
Space	When focus is on the previous or next button, navigates the calendar. Otherwise, selects the date.
Enter	When focus is on the previous or next button, navigates the calendar. Otherwise, selects the date.
ArrowDown	When focus is on a date, moves focus to the same day of the next week, changing the month if necessary.
ArrowUp	When focus is on a date, moves focus to the same day of the previous week, changing the month if necessary.
ArrowRight	When focus is on a date, moves focus to the next day, changing the month if necessary.
ArrowLeft	When focus is on a date, moves focus to the previous day, changing the month if necessary.