ui/docs/content/3.components/calendar.md

title, description, links, navigation.badge

title	description	links	navigation.badge
Calendar	A calendar component for selecting single dates, multiple dates or date ranges.	label icon to Calendar i-custom-radix-vue https://www.radix-vue.com/components/calendar.html label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue	New

::note This component relies on the @internationalized/date package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner. ::

Usage

Use the v-model directive to control the selected date.

::component-code

---

::

Multiple

Use the multiple prop to allow multiple selections.

::component-code

ignore:

• multiple props: multiple: true

---

::

Range

Use the range prop to select a range of dates.

::component-code

ignore:

• range props: range: true

---

::

Color

Use the color prop to change the color of the calendar.

::component-code

props: color: neutral

::

Size

Use the size prop to change the size of the calendar.

::component-code

props: size: xl

::

Disabled

Use the disabled prop to disable the calendar.

::component-code

props: disabled: true

::

Number Of Months

Use the numberOfMonths prop to change the number of months in the calendar.

::component-code

props: numberOfMonths: 3

::

Month Controls

Use the month-controls prop to show the month controls. Defaults to true.

::component-code

props: monthControls: false

::

Year Controls

Use the year-controls prop to show the year controls. Defaults to true.

::component-code

props: yearControls: false

::

Fixed Weeks

Use the fixed-weeks prop to display the calendar with fixed weeks.

::component-code

props: fixedWeeks: false

::

Examples

With chip events

Use the Chip component to add events to specific days.

::component-example

name: 'calendar-events-example'

::

With disabled dates

Use the is-date-disabled prop with a function to mark specific dates as disabled.

::component-example

name: 'calendar-disabled-dates-example'

::

With unavailable dates

Use the is-date-unavailable prop with a function to mark specific dates as unavailable.

::component-example

name: 'calendar-unavailable-dates-example'

::

With min/max dates

Use the min-value and max-value props to limit the dates.

::component-example

name: 'calendar-min-max-dates-example'

::

As a DatePicker

Use a Button and a Popover component to create a date picker.

::component-example

name: 'calendar-date-picker-example'

::

As a DateRangePicker

Use a Button and a Popover component to create a date range picker.

::component-example

name: 'calendar-date-range-picker-example'

::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme