Calendar 日历 
概述
Calendar 日历，用于选择日期区间。支持单选、多选、区间选择。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
如果需要从底部弹出选择，请结合 fui-bottom-popup（底部弹出层）组件实现，可参考示例使用。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiCalendar from "@/components/firstui/fui-calendar/fui-calendar.vue"
export default {
components:{
fuiCalendar
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
单个日期选择
通过 @change 事件接收选择数据。
<fui-calendar @change="change"></fui-calendar>
1
//通过value属性设置默认值
//单个日期选择默认值设置格式如：'2021-12-01' 或 ['2021-12-01']
export default
data() {
return {}
},
methods: {
change(e) {
console.log(e)
this.fui.toast(e.value)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
多个日期选择/显示农历
通过 type 属性设置选择类型，showLunar 属性设置是否显示农历。
<fui-calendar type="2" showLunar @change="change"></fui-calendar>
1
//通过value属性设置默认值
//多个日期选择默认值设置格式如：['2021-12-01','2021-12-02','2021-12-03']
export default
data() {
return {}
},
methods: {
change(e) {
console.log(e)
this.fui.toast(e.value.join(','))
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
区间选择
通过 type 属性设置选择类型，showLunar 属性设置是否显示农历。
<fui-calendar type="3" showLunar @change="change"></fui-calendar>
1
//通过value属性设置默认值
//区间选择默认值设置格式如：['2021-12-01','2021-12-31']
export default
data() {
return {}
},
methods: {
change(e) {
console.log(e)
this.fui.toast(e.value.join(','))
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
设置自定义描述 V1.9.9+
通过 isMultiple 属性设置是否一次加载一年的日历数据，@dateChange 为日历数据切换时触发事件。
<fui-calendar :isMultiple="false" @dateChange="dateChange" ref="calendarRef"></fui-calendar>
1
<script>
export default {
data() {
return {
descrDate: ''
}
},
onReady() {
//设置自定义描述数据
//页面过于复杂时，dateChange事件执行时可能还未获取到组件实例，可在onReady中初始执行一次
this.$refs.calendarRef.setDescr(this.getDescr)
},
methods: {
//传入一个返回Promise的获取描述数据函数
getDescr(year, month, days) {
//year, month, days 为 组件返回数据
console.log(year, month, days)
this.descrDate = `${year}-${month}`
return new Promise((resolve, reject) => {
//模拟获取到数据且处理后返回
setTimeout(() => {
//返回数据需要处理成和 days格式一致,没有描述则使用空字符串（描述文本不可过长）
if (true) {
//成功后处理描述数据，数据顺序需要与days中日期保持一致
const descrArr = []
days.forEach((item, index) => {
//此处仅为模拟判断，具体逻辑需自行结合数据判断
let descr = ''
if (month % 2 === 0) {
descr = (index + 1) % 2 === 0 ? '有号' : ''
} else {
descr = index % 2 === 0 ? '有号' : ''
}
descrArr.push(descr)
})
resolve(descrArr)
} else {
//失败
reject(false)
}
}, 200)
})
},
dateChange(e) {
console.log(e)
//设置自定义描述数据。页面过于复杂时，可能还未获取到组件实例，可在onReady中初始执行一次
const date = `${e.year}-${e.month}`
if (this.descrDate === date) return;
this.$refs.calendarRef && this.$refs.calendarRef.setDescr(this.getDescr)
}
}
}
</script>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| type | Number, String | 日期选择类型，可选值：1-单个日期选择，2-多个日期选择 3-日期区间选择 | 1 | - |
| value | Array, String | 默认值，根据类型不同传对应格式数据，具体见下方说明 | [ ] | - |
| maxDays V2.0.0+ | Number, String | 最多可选天数，type=2 或 type=3 且 值>=0时有效，负数则不限制，不支持小数 | -1 | - |
| minDate | String | 最小可选日期 | 2010-01-01 | - |
| maxDate | String | 最大可选日期 | 2030-12-31 | - |
| showLunar | Boolean | 是否显示农历，当language为en时无效 | false | - |
| language | String | 语言：可选值：cn/en，可配置的内容需要自行处理 | cn | - |
| isMultiple V1.8.0+ | Boolean | 是否一次加载一年的日历数据，为true时需要上下或左右滑动切换月份 | true | - |
| vertical | Boolean | 是否垂直方向切换月份，为false则水平切换 | true | - |
| width | Number, String | 日历宽度，单位rpx，低于600时无效（默认使用屏幕宽度） | 0 | - |
| background | String | 日历背景色 | #FFFFFF | - |
| name | String | 切换年份箭头icon的name值，可选值：roundright-fill、roundright、arrowright等，具体可参考icon组件 | roundright-fill | - |
| arrowSize | Number, String | icon箭头的字体大小，单位rpx | 40 | - |
| arrowColor | String | icon箭头的字体颜色 | #7F7F7F | - |
| yearsWidth | Number, String | 年月标题的宽度，单位rpx | 200 | - |
| yearsSize | Number, String | 年月标题的字体大小，单位rpx | 32 | - |
| yearsColor | String | 年月标题的字体颜色 | #181818 | - |
| titleColor | String | 星期标题的字体颜色 | #181818 | - |
| lineColor | String | 星期标题底部线条颜色 | #EEEEEE | - |
| color | String | 默认日期字体颜色 | #181818 | - |
| activeColor | String | 选中日期字体颜色 | #FFFFFF | - |
| activeBackground | String | 选中日期背景色 | #465CFF | - |
| rangeColor | String | 区间内日期字体颜色，仅type=3有效 | #465CFF | - |
| rangeBackground | String | 区间内日期背景颜色，仅type=3有效 | #F1F4FA | - |
| start | String | 区间选择时，起始日期显示文本 | 开始 | - |
| end | String | 区间选择时，结束日期显示文本 | 结束 | - |
| isToday | Boolean | 是否显示今天文本 | true | - |
| disabled | Boolean | 是否仅展示，禁用选择 | false | - |
| showBtn | Boolean | 是否显示底部按钮。显示时，点按钮才可触发@change事件 | false | - |
| btnText | String | 按钮文本 | 确定 | - |
| btnBackground | String | 按钮背景色 | #465CFF | - |
| btnColor | String | 按钮字体颜色 | #FFFFFF | - |
| badgeColor V2.2.0+ | String | 角标背景色 | #FF2B2B | - |
| badgeTop V2.2.0+ | Number, String | 角标 top 值，单位rpx | 16 | - |
| badgeRight V2.2.0+ | Number, String | 角标 right 值，单位rpx | 16 | - |
//属性value（默认值）数据格式说明：
当type=1时，单个日期选择，默认值格式为：'2022-01-01' 或者 ['2022-01-01']
当type=2时，多个日期选择，默认值格式为：['2022-01-01','2022-01-02','2022-01-03']（字符串数组）
当type=3时，日期区间选择，默认值格式为：['2022-01-01','2022-01-20'] （起始日期,结束日期）
1
2
3
4
5
6
7
2
3
4
5
6
7
# Events
农历数据仅当 showLunar 为 true 且 language 不为 en 时返回
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击按钮或当不显示按钮时点击日期时触发 | { value : 选中的日期值 week : 选中日期星期 today : 今天日期 lunar : 农历数据 } |
| @dateChange V1.9.9+ | 组件切换日历数据时触发 | { year : 当前年份 month : 当前月份 } |
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| setDescr V1.9.9+ | 设置当前月份日历数据自定义描述，且传入返回Promise的获取描述数据的函数 | (callback) (获取描述数据函数) |
| setBadge V2.2.0+ | 设置当前月份日历数据角标，且传入返回Promise的获取否显示角标数据的函数 | (callback) (获取是否显示角标数据函数) |
特别说明
自定义描述显示优先级高于
农历/today等描述。setDescr(callback)：方法必须传入一个返回Promise的获取描述数据的函数，且函数接收三个参数（组件内回调） 。
setBadge(callback)：方法传入一个返回Promise的函数，设置当前日历数据角标，且函数接收三个参数（组件内回调）【数组中的值判断为true则显示角标，为false则不显示角标】 。
//callback 参数参考示例
//返回Promise的获取描述数据的函数【描述数据格式需处理成和days数据【格式 && 长度】一至，没有则使用空字符串代替】
getDescr(year, month, days) {
//year【当前年份】, month【当前月份】, days【当前月份日历数据】 为 组件返回数据
//days 数据格式如当前月份共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]
console.log(year, month, days)
this.descrDate = `${year}-${month}`
return new Promise((resolve, reject) => {
//模拟获取到数据且处理后返回
setTimeout(() => {
//返回数据需要处理成和 days格式一致,没有描述则使用空字符串（描述文本不可过长）
if (true) {
//成功后处理描述数据，数据顺序需要与days中日期保持一致
const descrArr = []
days.forEach((item, index) => {
//此处仅为模拟判断，具体逻辑需自行结合数据判断
let descr = ''
if (month % 2 === 0) {
descr = (index + 1) % 2 === 0 ? '有号' : ''
} else {
descr = index % 2 === 0 ? '有号' : ''
}
descrArr.push(descr)
})
resolve(descrArr)
} else {
//失败
reject(false)
}
}, 200)
})
}
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
32
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
32
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。