Calendar

SCalendar is an interactive date grid with month navigation. It is fully keyboard accessible (arrows move between days, PageUp/PageDown between months), localized, and marks today, the selected date, and unavailable dates. The value is a DateValue from @internationalized/date; the navigation is built on SIcon. To pick a date in a form, use SDatePicker, which opens the calendar in a popover. Keep the value in a shallowRef, not a ref: a regular ref unwraps the date class, and type checking no longer recognizes it as a DateValue.

Basic usage

<script setup>
import { shallowRef } from 'vue'
import { parseDate } from '@internationalized/date'
const date = shallowRef(parseDate('2026-07-11'))
</script>

<template>
  <SCalendar v-model="date" />
</template>

Limiting the date range

The minValue/maxValue props (or the isDateDisabled predicate) disable unavailable days.

<script setup>
import { today, getLocalTimeZone } from '@internationalized/date'
const min = today(getLocalTimeZone())
</script>

<template>
  <!-- Past dates cannot be selected -->
  <SCalendar
    v-model="date"
    :min-value="min"
  />
</template>

Multiple dates

With the multiple prop the calendar lets you pick several dates; v-model is then an array of DateValue.

<script setup lang="ts">
import { shallowRef } from 'vue'
import { parseDate } from '@internationalized/date'
const dates = shallowRef([
  parseDate('2026-07-08'),
  parseDate('2026-07-15'),
  parseDate('2026-07-22'),
])
</script>

<template>
  <SCalendar
    v-model="dates"
    multiple
  />
</template>

Multiple months

numberOfMonths shows several months side by side, which is handy for picking a range.

<template>
  <SCalendar
    v-model="date"
    :number-of-months="2"
  />
</template>

Week settings

weekStartsOn sets the first day of the week (0 is Sunday, 1 is Monday). fixedWeeks (true by default) keeps the grid at 6 rows; with false the height follows the month.

<template>
  <!-- The week starts on Monday -->
  <SCalendar
    v-model="date"
    :week-starts-on="1"
  />
  <!-- The grid height follows the month -->
  <SCalendar
    v-model="date"
    :fixed-weeks="false"
  />
</template>

Unavailable dates

The isDateDisabled predicate disables arbitrary days. Here weekends are blocked.

<script setup lang="ts">
import { shallowRef } from 'vue'
import { isWeekend } from '@internationalized/date'
const workday = shallowRef()
const weekend = (date) => isWeekend(date, 'en-US')
</script>

<template>
  <!-- Weekends cannot be selected -->
  <SCalendar
    v-model="workday"
    :is-date-disabled="weekend"
  />
</template>

States and upper bound

disabled turns the grid off completely, readonly keeps it view-only (no selection), and max-value caps the selection: dates after the maximum are unavailable.

<script setup lang="ts">
import { shallowRef } from 'vue'
import { parseDate } from '@internationalized/date'
const date = shallowRef(parseDate('2026-07-11'))
const max = parseDate('2026-07-20')
</script>

<template>
  <SCalendar
    v-model="date"
    disabled
  />
  <SCalendar
    v-model="date"
    readonly
  />
  <!-- Dates after July 20 are unavailable -->
  <SCalendar
    v-model="date"
    :max-value="max"
  />
</template>

API

Props

Name	Type	Default	Description
locale	string	undefined	Formatting locale (e.g. en-GB). By default it is derived from the library locale (ConfigProvider/installLocale, the locale option in Nuxt): en → en-US.
min-value	| CalendarDate | CalendarDateTime | ZonedDateTime	undefined	Minimum allowed date.
max-value	| CalendarDate | CalendarDateTime | ZonedDateTime	undefined	Maximum allowed date.
week-starts-on	0 | 1 | 2 | 3 | 4 | 5 | 6	undefined	First day of the week: 0 is Sunday, 1 is Monday, and so on.
fixed-weeks	boolean	true	Always shows 6 weeks (stable grid height).
number-of-months	number	1	Number of months shown at once.
multiple	boolean	false	Allows selecting multiple dates.
disabled	boolean	false	Disables interaction with the calendar.
readonly	boolean	false	Read-only: dates cannot be selected.
is-date-disabled	((date: CalendarDate | CalendarDateTime | ZonedDateTime) => boolean)	undefined	Predicate: return true to disable a specific date.
prev-month-label	string	undefined	Accessible name of the "previous month" button (defaults to the locale dictionary).
next-month-label	string	undefined	Accessible name of the "next month" button (defaults to the locale dictionary).
model-value	| CalendarDate | CalendarDateTime | ZonedDateTime | (CalendarDate | CalendarDateTime | ZonedDateTime)[]	undefined	Selected date (or an array with multiple). Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	( value: | CalendarDate | CalendarDateTime | ZonedDateTime | (CalendarDate | CalendarDateTime | ZonedDateTime)[] | undefined ) => void	Emitted when modelValue changes. Used for two-way binding (v-model).