Calendar

Provides navigation, date viewing, and schedule recording functionality. Supports holiday display, date range selection, multi-select, week number display, and more.

Basic Usage

Set v-model to specify the currently selected date, defaults to today. The calendar features modern design with beautiful animations and interactions.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Basic Usage

Holiday Display

Set show-holiday to enable Chinese statutory holiday display. Holidays show a "Rest" tag, and make-up workdays show a "Work" tag.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4 Holiday
5 Holiday	6 Holiday	7	8	9	10	11

Holiday Display

Custom Content

Use the named slot date-cell to customize calendar cell content. The scoped parameter data contains rich date information.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8 Women's Day	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

Custom Content

Date Range Restriction

Use min-date and max-date to restrict selectable date range. Dates outside the range will be disabled.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Date Range Restriction

Readonly Mode

Set the readonly prop to make the calendar read-only. Users cannot select dates.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Readonly Mode

Range Selection

Set selection-mode="range" to enable date range selection, used with v-model:range-value.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Selected: Please select a date range

Range Selection

Week Number Display

Set show-week-number to display ISO week numbers on the left side.

March 2026

Week	Sun	Mon	Tue	Wed	Thu	Fri	Sat
9	1	2	3	4	5	6	7
10	8	9	10	11	12	13	14
11	15	16	17	18	19	20	21
12	22	23	24	25	26	27	28
13	29	30	31	1	2	3	4
14	5	6	7	8	9	10	11

Week Number

Disable Specific Dates

Use the disabled-date function for custom disable logic. The example below disables all weekends.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Disable Specific Dates

Fullscreen Mode

Set fullscreen to make the calendar fill the parent container height, suitable for schedule management pages.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4 Holiday
5 Holiday	6 Holiday	7	8	9	10	11

Fullscreen Mode

Sizes

Provides small, default, and large sizes.

Small Size

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Default Size

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Large Size

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Sizes

Use in Nuxt

The Calendar component fully supports SSR rendering in Nuxt 3/4. Components are auto-imported in Nuxt projects.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4 Holiday
5 Holiday	6 Holiday	7	8	9	10	11

Use in Nuxt

SSR Notes:

• ✅ Basic rendering and matrix calculations fully support SSR
• ✅ Holiday data is computed on the server
• ✅ Slot content is generated on the server with excellent Hydration performance
• ⚠️ Range selection hover effects are client-side behavior

SSR Performance

Calendar uses static date caching internally, maintaining extremely low memory usage even with frequent SSR refreshes.

API

Props

Prop	Description	Type	Default
v-model	Binding value (single select mode)	Date	—
default-value	Default selected date	Date	—
mode	View mode	'month' | 'year'	'month'
first-day-of-week	First day of week (1-7, 1=Monday)	number	7 (Sunday)
min-date	Minimum selectable date	Date	—
max-date	Maximum selectable date	Date	—
readonly	Whether readonly	boolean	false
disabled	Whether disabled	boolean	false
disabled-date	Custom disabled date function	(date: Date) => boolean	—
show-holiday	Whether to show holiday markers	boolean	false
holidays	Custom holiday data	HolidayMap	{}
show-week-number	Whether to show week numbers	boolean	false
fullscreen	Whether fullscreen (fill container)	boolean	false
selection-mode	Selection mode	'single' | 'range' | 'multiple'	'single'
range-value	Range selection value	[Date?, Date?]	—
multiple-value	Multi-select value	Date[]	[]
show-other-months	Whether to show non-current month dates	boolean	true
highlight-weekends	Whether to highlight weekends	boolean	true
size	Calendar size	'small' | 'default' | 'large'	'default'
cell-class-name	Cell custom class function	(date: Date) => string | string[] | object	—
month-header-format	Header format	string	'YYYY MM'

Events

Event Name	Description	Parameters
change	Triggered when selected date changes	(date: Date) => void
select	Triggered when a date cell is clicked	(date: Date, cell: CalendarDateCell) => void
panel-change	Triggered when displayed year/month or mode changes	`(date: Date, mode: 'month'
range-change	Triggered when range selection completes	(range: [Date, Date]) => void

Slots

Slot Name	Description	Parameters
header	Custom calendar header	{ date: string }
date-cell	Custom date cell content	{ data: CalendarDateCell }
footer	Custom calendar footer	—

Expose

Access internal methods and properties via ref:

Name	Description	Type
displayDate	Current viewport date (Dayjs)	Ref<Dayjs>
selectedDate	Currently selected date (single, Dayjs)	Ref<Dayjs | undefined>
moveMonth	Switch month (delta: 1 or -1)	(delta: number) => void
goToday	Jump to today	() => void
selectDate	Manually select a date cell	(cell: CalendarDateCell) => void

CalendarDateCell Type

Property	Description	Type
day	Formatted date string (YYYY-MM-DD)	string
date	Raw Date object	Date
type	Date type	'prev-month' | 'current-month' | 'next-month'
isSelected	Whether selected	boolean
isToday	Whether today	boolean
isDisabled	Whether disabled	boolean
isWeekend	Whether weekend	boolean
isHoliday	Whether holiday	boolean
holidayName	Holiday name	string | undefined
isWorkday	Whether make-up workday	boolean
isInRange	Whether in range	boolean
isRangeStart	Whether range start	boolean
isRangeEnd	Whether range end	boolean

HolidayMap Type

type HolidayMap = Record<string, {
  name: string      // Holiday name
  isOffDay: boolean // true=day off, false=make-up workday
}>

Theme Variables

The Calendar component supports customizing styles by overriding the following CSS variables. All color variables are integrated with the global theme system, automatically supporting dark mode:

Variable	Description	Default
--yh-calendar-bg	Calendar background	var(--yh-bg-color)
--yh-calendar-text	Default text color	var(--yh-text-color-primary)
--yh-calendar-primary	Selected/today theme color	var(--yh-color-primary)
--yh-calendar-primary-light	Range/hover background	var(--yh-color-primary-light-9)
--yh-calendar-primary-dark	Selected hover darkened	var(--yh-color-primary-dark-2)
--yh-calendar-cell-height	Cell height	100px
--yh-calendar-cell-radius	Cell border 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 header color	var(--yh-text-color-secondary)
--yh-calendar-holiday-color	Holiday marker color	var(--yh-color-danger)
--yh-calendar-week-number-color	Week number text	var(--yh-text-color-placeholder)

Style Compatibility Notes

Since Calendar uses standard table layout internally, if used in VitePress, Markdown, or backend systems with aggressive global table styles, zebra-stripe or border injection may cause display issues.

Core Style Isolation

YH-UI follows the source purity principle — component SCSS contains no !important patches for specific doc environments. If you find background disappearing or extra margins in your Markdown environment, try adding the following global styles:

/* Clean doc environment table interference */
.your-container-class .yh-calendar__table,
.your-container-class .yh-calendar__table tr,
.your-container-class .yh-calendar__table td {
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

Why use !important?

This overrides high-specificity global selectors injected by some Markdown renderers (e.g., .markdown-body table tr:nth-child(2n)). In normal Vue/Nuxt business projects, you don't need these patches.

Advanced Usage Examples

Schedule Management

Demonstrates how to customize content within calendar cells to simulate real schedule arrangements.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4 Holiday
5 Holiday	6 Holiday	7	8	9	10	11

Schedule Management

Meeting Room Booking System

Demonstrates using selection-mode="range" to implement room booking logic with disabled date restrictions.

March 2026

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	31	1	2	3	4
5	6	7	8	9	10	11

Meeting Room Booking