Calendar

A calendar component that allows users to select a date.

Examples

Default

January 2026

S	M	T	W	T	F	S

Event Date, January 2026

<script setup>
import { ref } from 'vue'
import { Calendar } from '@empathyds/vue'

const date = ref(new Date())
</script>

<template>
  <Calendar v-model="date" 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

Calendar

Prop	Type	Default	Description
model-value	DateValue	-	The focused date
default-value	DateValue	-	The default focused date
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

Calendar

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