Range Calendar

A calendar component that allows users to select a range of dates.

Examples

Default

Event Date, January 2026

January 2026

S	M	T	W	T	F	S

<script setup>
import { ref } from 'vue'
import { RangeCalendar } from '@empathyds/vue'
import { getLocalTimeZone, today } from '@internationalized/date'

const start = today(getLocalTimeZone())
const end = start.add({ days: 7 })

const value = ref({
  start,
  end,
})
</script>

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

Installation

pnpm

pnpm add @internationalized/date

npm

npm install @internationalized/date

yarn

yarn add @internationalized/date

bun

bun add @internationalized/date

Props

RangeCalendar

Prop	Type	Default	Description
model-value	DateRange	-	The verified date range
default-value	DateRange	-	The default date range
placeholder	DateValue	-	The placeholder date
default-placeholder	DateValue	-	The default placeholder date
paged-navigation	boolean	false	Whether to use paged navigation
prevent-deselect	boolean	false	Whether to prevent deselecting the date
week-starts-on	0 | 1 | 2 | 3 | 4 | 5 | 6	0	The day the week starts on
weekday-format	'narrow' | 'short' | 'long'	'narrow'	The format of the weekday
calendar-label	string	-	The label for the calendar
fixed-weeks	boolean	false	Whether to show fixed weeks
max-value	DateValue	-	The maximum date value
min-value	DateValue	-	The minimum date value
locale	string	-	The locale to use
number-of-months	number	1	The number of months to display
disabled	boolean	false	Whether the calendar is disabled
readonly	boolean	false	Whether the calendar is readonly
initial-focus	boolean	false	Whether to focus the calendar initially

Slots

RangeCalendar

Slot	Description
default	The calendar content
header	The calendar header
grid	The calendar grid