Calendar

Start with the basic example, then compare related settings before moving to controlled, asynchronous or combined use cases.

Basic examples

Basic usage

Views and date presentation

Modes

Configuration reference for this comparison

Configuration	Purpose	Related examples
mode	Mode	Modes
modes	Displayed mode	Modes
day-start-of-week	First day of the week	Week Options
is-week	Whether to show week numbers	Week Options

• mode: Mode
• modes: Displayed mode

Week Options

Preview configuration: :day-start-of-week="mondayFirst ? 1 : 0", :is-week="showWeek".

Interaction and customization

Controlled

Custom Cell

Custom Header

API

<calendar> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	date	-
default-value	Default value (uncontrolled state)	date	-
mode	Mode	'month' | 'year'	-
default-mode	Default Mode	'month' | 'year'	'month'
modes	Displayed mode	('month' | 'year')[]	['month', 'year']
day-start-of-week	First day of the week	0 | 1	0
is-week	Whether to show week numbers	boolean	false

<calendar> Events

Event	Description	Arguments
change	Emitted when the selected date changes	date: Date
panel-change	Emitted when the displayed date panel changes	date: Date

<calendar> Slots

Slot	Description	Arguments	Version
header	Custom header content	year: number month: number	2.53.0
default	Custom cell content	year: number month: number date: number	2.53.0

Type definitions

The component exports the following types

import type { CalendarInstance } from "@cedar-design/ui";