🌏 Translated with the assistance of DeepSeek and ChatGPT
Calendar
A calendar component.
Pass modelValue for controlled mode. Not passing it or passing undefined puts it in uncontrolled mode, where you can pass the defaultValue property as the default value.
Basic Usage
modelValue controls the value of the calendar component. When modelValue is not passed or is undefined, the component operates in uncontrolled mode, in which case defaultValue can be used to set the default value
2026-09
Today
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
Hide source code
Custom Header
Use the header slot to customize the calendar header content. It receives year and monthIndex parameters.
2026 / 9
Today
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
Hide source code
Custom Cell
Use the cell slot to customize the rendering of each date cell. It receives an item parameter of type CalendarItem.
2026-09
Today
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
Hide source code
Cell Props
Use the cellProps property to add extra attributes (such as styles, classes, or native HTML attributes) to specific date cells.
2026-09
Today
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
Hide source code
API
CalendarProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| modelValue | Date | null | True | | The bound value of the Calendar component (controlled mode). | 0.2.0 |
| defaultValue | Date | null | True | | The default value of the Calendar component (uncontrolled mode). | 0.2.0 |
| cellProps | RestAttrs | ((item: CalendarItem) => RestAttrs) | True | | A handler function for customizing date cell attributes. | 0.2.0 |
CalendarEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| update:modelValue | value: Date | null | Callback for updating modelValue. | 0.2.0 |
| select | value: Date, event: MouseEvent | Callback when a date is selected. | 0.2.0 |
CalendarSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| header | year: number, monthIndex: number | Custom header content. | 0.2.0 |
| cell | item: CalendarItem | Custom date cell content. | 0.2.0 |