Skip to main content

​
Usage

The Calendar component allows users to select dates. It supports single date selection, multiple dates, and date ranges. 
<template>
  <UCalendar v-model="date" />
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Date Range Selection

Enable range selection by setting the range prop: 
<template>
  <UCalendar v-model="dateRange" range />
</template>

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

const dateRange = ref({
  start: today(getLocalTimeZone()),
  end: today(getLocalTimeZone()).add({ days: 7 })
})
</script>

​
Multiple Date Selection

Allow selecting multiple individual dates: 
<template>
  <UCalendar v-model="dates" multiple />
</template>

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

const dates = ref([
  today(getLocalTimeZone()),
  today(getLocalTimeZone()).add({ days: 3 })
])
</script>

​
Sizes

<template>
  <div class="space-y-8">
    <UCalendar v-model="date" size="sm" />
    <UCalendar v-model="date" size="md" />
    <UCalendar v-model="date" size="lg" />
  </div>
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Colors

<template>
  <div class="space-y-8">
    <UCalendar v-model="date" color="primary" />
    <UCalendar v-model="date" color="success" />
    <UCalendar v-model="date" color="warning" />
  </div>
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Variants

<template>
  <div class="space-y-8">
    <UCalendar v-model="date" variant="solid" />
    <UCalendar v-model="date" variant="outline" />
  </div>
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Disabled Dates

<template>
  <UCalendar
    v-model="date"
    :is-date-disabled="isDateDisabled"
  />
</template>

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

const date = ref(today(getLocalTimeZone()))

const isDateDisabled = (date) => {
  // Disable weekends
  const dayOfWeek = date.toDate(getLocalTimeZone()).getDay()
  return dayOfWeek === 0 || dayOfWeek === 6
}
</script>

​
Min and Max Dates

<template>
  <UCalendar
    v-model="date"
    :min-value="minDate"
    :max-value="maxDate"
  />
</template>

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

const date = ref(today(getLocalTimeZone()))
const minDate = today(getLocalTimeZone())
const maxDate = today(getLocalTimeZone()).add({ months: 3 })
</script>

​
Week Numbers

Display week numbers in the calendar: 
<template>
  <UCalendar v-model="date" week-numbers />
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Control Visibility

Customize which navigation controls are shown: 
<template>
  <UCalendar
    v-model="date"
    :month-controls="true"
    :year-controls="false"
  />
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Custom Icons

<template>
  <UCalendar
    v-model="date"
    next-month-icon="i-heroicons-arrow-right"
    prev-month-icon="i-heroicons-arrow-left"
    next-year-icon="i-heroicons-chevron-double-right"
    prev-year-icon="i-heroicons-chevron-double-left"
  />
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Slots

Customize the calendar display with slots: 
<template>
  <UCalendar v-model="date">
    <template #heading="{ value }">
      <span class="font-bold text-xl">{{ value }}</span>
    </template>
    <template #day="{ day }">
      <span>{{ day.day }}</span>
    </template>
    <template #week-day="{ day }">
      <span class="text-xs uppercase">{{ day }}</span>
    </template>
  </UCalendar>
</template>

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

const date = ref(today(getLocalTimeZone()))
</script>

​
Props

​
modelValue
DateValue | DateRange | DateValue[]
The controlled value of the calendar. Can be bound with v-model.
​
defaultValue
DateValue | DateRange | DateValue[]
The value of the calendar when initially rendered.
​
range
boolean
default:"false"
Whether or not a range of dates can be selected.
​
multiple
boolean
default:"false"
Whether or not multiple dates can be selected.
​
color
string
default:"primary"
The color theme of the calendar.
​
variant
string
default:"solid"
The visual variant of the calendar.
​
size
string
default:"md"
The size of the calendar. Options: sm, md, lg.
​
monthControls
boolean
default:"true"
Show month navigation controls.
​
yearControls
boolean
default:"true"
Show year navigation controls.
​
weekNumbers
boolean
default:"false"
Display week numbers in the calendar.
​
nextYearIcon
string
The icon to use for the next year control. Defaults to appConfig.ui.icons.chevronDoubleRight.
​
nextYear
object
Configure the next year button properties.
​
nextMonthIcon
string
The icon to use for the next month control. Defaults to appConfig.ui.icons.chevronRight.
​
nextMonth
object
Configure the next month button properties.
​
prevYearIcon
string
The icon to use for the previous year control. Defaults to appConfig.ui.icons.chevronDoubleLeft.
​
prevYear
object
Configure the prev year button properties.
​
prevMonthIcon
string
The icon to use for the previous month control. Defaults to appConfig.ui.icons.chevronLeft.
​
prevMonth
object
Configure the prev month button properties.
​
minValue
DateValue
The minimum date that can be selected.
​
maxValue
DateValue
The maximum date that can be selected.
​
isDateDisabled
(date: DateValue) => boolean
Function to determine if a date should be disabled.
​
isDateUnavailable
(date: DateValue) => boolean
Function to determine if a date should be marked as unavailable.
​
disabled
boolean
Whether the calendar is disabled.
​
readonly
boolean
Whether the calendar is readonly.
​
fixedWeeks
boolean
default:"true"
Whether to always display 6 weeks in the calendar.
​
numberOfMonths
number
default:"1"
The number of months to display.
​
pagedNavigation
boolean
Whether to navigate by page (numberOfMonths) or by single month.
​
weekdayFormat
string
default:"short"
The format for weekday labels. Options: narrow, short, long.
​
as
any
default:"div"
The element or component this component should render as.
​
class
any
Additional CSS classes to apply to the root element.
​
ui
object
UI customization object for styling different parts of the calendar.

​
Events

​
@update:modelValue
(date: DateValue | DateRange | DateValue[]) => void
Emitted when the selected date(s) change.
​
@update:startValue
(date: DateValue) => void
Emitted when the start date changes (range mode only).

​
Slots

​
heading
{ value: string }
Customize the calendar heading (month/year display).
​
day
{ day: DateValue }
Customize the day cell content.
​
week-day
{ day: string }
Customize the weekday header content.

Build docs developers (and LLMs) love

Get started for freeTalk to us