Calendar 日历
日历组件，支持日期选择、范围选择、事件标记、自定义内容等多种用法。
基础用法
通过 v-model 绑定选中日期，支持月份和年份切换。
2026年6月
日一二三四五六
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
选中日期：2026-06-18
不同尺寸
提供 sm / md / lg 三种尺寸。
sm
2026年6月
日一二三四五六
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
md（默认）
2026年6月
日一二三四五六
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
lg
2026年6月
日一二三四五六
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
周起始日
通过 week-start 设置每周的第一天，0=周日（默认），1=周一，6=周六。
周日开始
2026年6月
日一二三四五六
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
周一开始
2026年6月
一二三四五六日
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
禁用日期
通过 disabled-date 函数禁用特定日期，禁用的日期不可选中且样式变灰。
2026年6月
日一二三四五六
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
周末（周六、周日）不可选
事件标记
通过 events 属性在日期下方显示彩色圆点标记，每个事件可设置不同颜色。
2026年6月
日一二三四五六
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
带有彩色圆点的日期表示有事件
范围选择
设置 mode 为 range 开启日期范围选择，点击两次分别选择起始和结束日期。
2026年6月
日一二三四五六
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
范围：未选择 ~ 未选择
自定义日期内容
使用 #cell 插槽自定义日期单元格内容，如显示日程信息。
2026年6月
日一二三四五六
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
年份快速选择
点击标题栏的年月文字可以打开年份选择面板，快速跳转到指定年份。
2026年6月
日一二三四五六
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
点击标题「2026年6月」可打开年份面板
在卡片中使用
搭配 Card 组件将日历嵌入卡片，实现更丰富的布局效果。
日程安排
2026年6月
日一二三四五六
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
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | Date | new Date() | 当前选中日期 |
mode | 'date' | 'range' | 'date' | 选择模式，date 为单日期，range 为范围选择 |
size | 'sm' | 'md' | 'lg' | 'md' | 日历尺寸 |
weekStart | 0 | 1 | 6 | 0 | 每周起始日，0=周日，1=周一，6=周六 |
disabledDate | (date: Date) => boolean | — | 禁用日期判断函数，返回 true 则该日期不可选 |
events | CalendarEvent[] | [] | 事件标记列表，每项包含 date（YYYY-MM-DD）、color、content |
rangeStart | Date | — | 范围选择起始日期（range 模式） |
rangeEnd | Date | — | 范围选择结束日期（range 模式） |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
update:modelValue | (val: Date) | 日期变化时触发 |
change | (val: Date) | 点击选中日期时触发 |
update:rangeStart | (val: Date) | 范围起始日期变化时触发 |
update:rangeEnd | (val: Date) | 范围结束日期变化时触发 |
rangeChange | (start: Date | null, end: Date | null) | 范围选择变化时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
cell | 自定义日期单元格内容，参数 { date: Date, current: boolean } |
Methods
| 方法名 | 参数 | 说明 |
|---|---|---|
prevMonth | — | 切换到上个月 |
nextMonth | — | 切换到下个月 |
prevYear | — | 切换到上一年 |
nextYear | — | 切换到下一年 |