Skip to content
On this page

Calendar 日历

每天都有好心情

基本使用

date 属性需要绑定一个日期对象

26
27
28
29
30
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
开启

显示农历

lunar 可以配置显示农历的日历

26十四
27下元节
28十六
29十七
30十八
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十五
开启

带有边框

border 可以配置带有边框的日历

26
27
28
29
30
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
开启

不显示页头

show-header 可以控制是否显示头部操作栏

26
27
28
29
30
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
开启

Attributes

参数说明类型可选值默认值
v-model:date绑定日期date——new Date
lunar是否显示农历或节日,仅支持 1900 ~ 2100boolean——false
show-header是否显示头部boolean——true
border是否显示边框boolean——false
border-color自定义边框颜色string————
day-cell-height日期单元格高度string / number————
week-cell-height星期单元格高度string / number————
on-change日期和月份任何变时触发的回调CalendarChange————
on-change-month月份改变时触发的回调CalendarChange————
on-change-date日期改变时触发的回调CalendarChange————

Slots

名称说明
last-change自定义上个月切换按钮
now-change自定义今天切换按钮
next-change自定义下个月切换按钮

Interface

组件导出以下类型定义:

ts
import type { CalendarInstance, CalendarProps, CalendarChange } from 'fighting-design'

CalendarChange

ts
type CalendarChange = (year: number, month: number, date: number) => void

Contributors