Calendar
Displays a month-view calendar with holiday markers, range selection, multiple selection, custom cell content, and component-level theme overrides.
Basic Usage
Bind the current selected date through v-model.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Basic Usage
Holiday Markers
Enable show-holiday to merge the built-in China 2026 holiday data with the custom holidays prop.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 Holiday |
5 Holiday | 6 Holiday | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 Work | 27 | 28 | 29 | 30 | 1 Holiday | 2 Holiday |
3 Holiday | 4 Holiday | 5 Holiday | 6 | 7 | 8 | 9 Work |
Holiday Markers
Custom Date Cell
Use the date-cell slot to render extra business information inside a day cell.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Custom Date Cell
Range Selection
Set selection-mode="range" and bind v-model:range-value to receive the start and end dates.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Please select a start date
Range Selection
Multiple Selection
Set selection-mode="multiple" and bind v-model:multiple-value to manage the selected dates array.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Multiple Selection
Date Constraints
You can combine min-date, max-date, and disabled-date to control the selectable range.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Date Constraints
Week Number and Sizes
The calendar supports week numbers and three size presets: small, default, and large.
April 2026
| Week | Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|---|
| 13 | 29 | 30 | 31 | 1 | 2 | 3 | 4 |
| 14 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 15 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 17 | 26 | 27 | 28 | 29 | 30 | 1 | 2 |
| 18 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
Week Number
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Sizes
Readonly
When readonly is enabled, the component keeps its display behavior but no longer reacts to date selection.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 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 |
Readonly
Use in Nuxt
After installing @yh-ui/nuxt, you can use YhCalendar directly. The static calendar grid, holiday markers, and slot content render correctly during SSR, while interactive states such as range hovering activate on the client.
April 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 Holiday |
5 Holiday | 6 Holiday | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 Work | 27 | 28 | 29 | 30 | 1 Holiday | 2 Holiday |
3 Holiday | 4 Holiday | 5 Holiday | 6 | 7 | 8 | 9 Work |
Use in Nuxt
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| v-model / model-value | Bound value in single mode | Date | undefined |
| default-value | Default selected date | Date | undefined |
| mode | Calendar mode | 'month' | 'year' | 'month' |
| first-day-of-week | First day of week, 1 for Monday and 7 for Sunday | number | 7 |
| min-date | Minimum selectable date | Date | undefined |
| max-date | Maximum selectable date | Date | undefined |
| readonly | Whether readonly | boolean | false |
| disabled | Whether disabled | boolean | false |
| month-header-format | Custom title format | string | undefined |
| show-holiday | Whether to show holiday and workday markers | boolean | false |
| holidays | Custom holiday map | HolidayMap | {} |
| show-week-number | Whether to show week numbers | boolean | false |
| fullscreen | Whether to fill the parent height | boolean | false |
| selection-mode | Selection mode | 'single' | 'range' | 'multiple' | 'single' |
| range-value | Range selection value | [Date | undefined, Date | undefined] | undefined |
| multiple-value | Multiple selection value | Date[] | [] |
| disabled-date | Custom disabled date predicate | (date: Date) => boolean | undefined |
| cell-class-name | Custom class name generator for date cells | (date: Date) => string | string[] | Record<string, boolean> | undefined |
| show-other-months | Whether to show dates outside the current month | boolean | true |
| highlight-weekends | Whether to highlight weekends | boolean | true |
| size | Calendar size | 'small' | 'default' | 'large' | 'default' |
| theme-overrides | Component theme override variables | CalendarThemeVars | undefined |
Events
| Event Name | Description | Parameters |
|---|---|---|
| update:modelValue | Triggered when the single value changes | (value: Date) => void |
| update:rangeValue | Triggered when range selection completes | (value: [Date | undefined, Date | undefined]) => void |
| update:multipleValue | Triggered when the multiple value changes | (value: Date[]) => void |
| change | Triggered when the single value changes | (value: Date) => void |
| panel-change | Triggered when the visible month changes | (date: Date, mode: 'month' | 'year') => void |
| select | Triggered when a date cell is selected | (date: Date, cell: CalendarDateCell) => void |
| range-change | Triggered when range selection completes | (value: [Date | undefined, Date | undefined]) => void |
Slots
| Slot Name | Description | Parameters |
|---|---|---|
| header | Custom header title | { date: string } |
| date-cell | Custom date cell content | { data: CalendarCellSlotData } |
| footer | Custom footer area | - |
CalendarCellSlotData is the runtime slot payload and contains:
| Field | Type | Description |
|---|---|---|
| day | string | Formatted date string such as 2026-02-14 |
| date | Date | Native date object |
| type | 'prev-month' | 'current-month' | 'next-month' | Month classification |
| isSelected | boolean | Whether selected |
| isToday | boolean | Whether today |
| isDisabled | boolean | Whether disabled |
| isWeekend | boolean | Whether weekend |
| isHoliday | boolean | Whether a holiday |
| holidayName | string | undefined | Holiday name |
| isWorkday | boolean | Whether a make-up workday |
| isInRange | boolean | undefined | Whether inside the current range |
| isRangeStart | boolean | undefined | Whether the range start |
| isRangeEnd | boolean | undefined | Whether the range end |
Expose
| Name | Description | Type |
|---|---|---|
| displayDate | Currently displayed panel date | Ref<Dayjs> |
| selectedDate | Currently selected date in single mode | Ref<Dayjs | undefined> |
| moveMonth | Change the current month | (delta: number) => void |
| goToday | Jump to today | () => void |
| selectDate | Select a specific date cell manually | (cell: CalendarDateCell) => void |
Type Exports
| Type | Description |
|---|---|
YhCalendarProps | Props type |
YhCalendarEmits | Emits type |
YhCalendarSlots | Slots type |
YhCalendarExpose | Expose type |
YhCalendarDateCell | Date cell type |
YhCalendarHolidayInfo | Holiday info type |
YhCalendarHolidayMap | Holiday map type |
YhCalendarRangeValue | Range value type |
YhCalendarMode | Mode type |
Theme Variables
The component supports themeOverrides and consumes the following CSS variables in styles:
| Variable | Description | Default |
|---|---|---|
--yh-calendar-primary | Primary color | var(--yh-color-primary) |
--yh-calendar-primary-light | Light primary background | var(--yh-color-primary-light-9) |
--yh-calendar-primary-dark | Dark primary state | var(--yh-color-primary-dark-2) |
--yh-calendar-bg | Calendar background | var(--yh-bg-color) |
--yh-calendar-text | Primary text color | var(--yh-text-color-primary) |
--yh-calendar-cell-height | Day cell height | 100px |
--yh-calendar-cell-radius | Day cell radius | var(--yh-radius-lg) |
--yh-calendar-head-height | Header height | 80px |
--yh-calendar-title-size | Title font size | 22px |
--yh-calendar-weekday-color | Weekday title color | var(--yh-text-color-secondary) |
--yh-calendar-week-number-color | Week number color | var(--yh-text-color-placeholder) |
--yh-calendar-holiday-color | Holiday badge color | var(--yh-color-danger) |
--yh-calendar-disabled-bg | Disabled background | var(--yh-fill-color-light) |
--yh-calendar-disabled-text | Disabled text color | var(--yh-text-color-placeholder) |
The exported CalendarThemeVars fields are: headerBgColor, headerTextColor, titleFontSize, dayFontSize, dayTextColor, dayHoverBgColor, daySelectedBgColor, daySelectedTextColor, todayTextColor, and weekendTextColor.