Calendar Component

Calendar component is used to display and select dates, supporting multiple view modes, date formatting, and custom styles.

Basic Usage

The simplest usage is to provide a two-way bound date value. The component will display the current month's calendar and allow date selection.

Currently selected date: 2025/11/10 16:31:35

Show Code

Different View Modes

Calendar component supports three view modes: date (date), month (month), year (year), which can be specified through the mode attribute.

Date Mode

Month Mode

Year Mode

Date Mode: 2025/11/10 16:31:35

Month Mode: 2025/11/10 16:31:35

Year Mode: 2025/11/10 16:31:35

Show Code

Format Output

Calendar component supports specifying the output format of dates through the value-format attribute. The component will return a string in the specified format instead of a Date object.

Date Format (YYYY-MM-DD)

DateTime Format (YYYY-MM-DD HH:mm:ss)

Custom Format (DD/MM/YYYY)

Date Format: 2023-07-15 (Type: string)

DateTime Format: 2023-07-15 12:30:00 (Type: string)

Custom Format: 15/07/2023 (Type: string)

Show Code

Custom Date Cells

Customize the content and style of date cells through the date slot, allowing you to add holiday markers, event markers, etc.

Currently selected date: 2025/11/10 16:31:35

Weekend/Holiday

Currently Selected

Show Code

Disabled Dates

Through the disabled-date attribute, you can specify which dates are not selectable. This attribute accepts a function that returns true to disable.

Disable dates before today

Disable weekends

Disabled before today: 2025/11/10 16:31:35

Disabled weekends: 2025/11/10 16:31:35

Disabled rules description:

- First calendar: dates before today are disabled

- Second calendar: weekends (Saturday and Sunday) are disabled

Show Code

Time Picker

By setting the show-time attribute, you can enable time selection functionality to select both date and time simultaneously.

With Time Picker

Disabled Time View (Auto sync current time)

Enabled Time View (Manual time selection)

With Time Picker: 2025-11-10 16:31:35

Disabled Time View: 2025-11-10 16:31:35

Enabled Time View: 2025-11-10 16:31:35

Description:

- Disabled Time View: No time selection panel after clicking date, uses current system time

- Enabled Time View: Shows time selection panel after clicking date, allows manual time selection

Show Code

Custom Footer

Through the footer slot, you can customize the calendar footer content, such as adding shortcut buttons.

Currently selected date: 2025/11/10 16:31:35

Current panel mode: date

Event Log:

Show Code

Calendar API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	Date / string / number	—	—
mode	Calendar mode	string	date / month / year	date
disabled	Whether disabled	boolean	—	false
disabled-date	Unselectable dates	function(date: Date)	—	—
show-time	Whether to show time picker	boolean	—	false
disabled-time-view	Whether to disable time selection view	boolean	—	true
value-format	Value format, e.g., YYYY-MM-DD	string	—	—
is-select	Whether dates can be selected	boolean	—	true

Events

Event Name	Description	Callback Parameters
change	Date change	(value: Date / string / number)
panel-change	Panel mode change	(mode: 'date' / 'month' / 'year')
jump-to-date	Jump to specified date	(date: Date)
time-change	Time change	(date: Date)
time-dialog-open	Time dialog open	—
time-dialog-close	Time dialog close	—

Slots

Slot Name	Description	Scope Parameters
date	Custom date cell content	{ date: Date }
month	Custom month cell content	{ month: number, index: number }
year	Custom year cell content	{ year: number }
footer	Custom calendar footer content	—
time-picker	Custom time picker	—

Methods

The component exposes the following methods, which can be called through ref:

Method Name	Description	Parameters
jumpToDate	Jump to specified date	(date: Date)
switchPanelMode	Switch panel mode	(mode: 'date' / 'month' / 'year')
currentYear	Get current year (computed property)	-
currentMonth	Get current month (computed property)	-
tempMode	Get current temporary mode	-

Style Variables

Calendar component uses the following style variables, which can be customized through CSS variables:

Variable Name	Description	Default Value
--t-calendar-bg-color	Calendar background color	#fff
--t-calendar-border-color	Calendar border color	#e4e7ed
--t-calendar-text-color	Calendar text color	#303133
--t-calendar-date-hover-bg	Date hover background color	#f2f6fc
--t-calendar-date-active-bg	Date active background color	#409eff
--t-calendar-date-active-color	Date active text color	#fff
--t-calendar-disabled-bg	Disabled date background color	#f5f7fa
--t-calendar-disabled-color	Disabled date text color	#c0c4cc