Fighting Design

Appearance

On this page

Calendar 日历 ​

每天都有好心情

基本使用 ​

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

日
一
二
三
四
五
六
26
27
28
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
开启

显示农历 ​

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

日
一
二
三
四
五
六
26十九
27二十
28廿一
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初一
开启

带有边框 ​

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

日
一
二
三
四
五
六
26
27
28
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
开启

不显示页头 ​

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

日
一
二
三
四
五
六
26
27
28
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
开启

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 ​