主题
Calendar 日历
展示日历并支持单日、多日或日期区间选择。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 单日选择 -->
<fui-calendar :type="1" @change="handleDateChange" />handleDateChange 可读取返回的 value、week、today 和 lunar。
属性
尺寸单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| type | Number / String | 1 单日、2 多日、3 日期区间 | 1 |
| value | Array / String | 默认选中日期，格式与选择类型对应 | [] |
| maxDays | Number / String | 多日或区间最多选择天数，负数不限制 | -1 |
| minDate | String | 最小日期 | 2010-01-01 |
| maxDate | String | 最大日期 | 2030-12-31 |
| showLunar | Boolean | 是否显示农历，英文模式无效 | false |
| language | String | 语言：cn、en | cn |
| isMultiple | Boolean | 是否加载整年并通过滑动切换月份 | true |
| vertical | Boolean | 是否垂直切换月份 | true |
| width | Number / String | 日历宽度，小于 600 时使用屏幕宽度 | 0 |
| background | String | 背景色 | #FFFFFF |
| name | String | 年份切换箭头图标名 | roundright-fill |
| arrowSize | Number / String | 箭头大小 | 40 |
| arrowColor | String | 箭头颜色 | #7F7F7F |
| yearsWidth | Number / String | 年月标题宽度 | 200 |
| yearsSize | Number / String | 年月标题字号 | 32 |
| yearsColor | String | 年月标题颜色 | #181818 |
| titleColor | String | 星期标题颜色 | #181818 |
| lineColor | String | 星期标题下边线颜色 | #EEEEEE |
| color | String | 默认日期文字颜色 | #181818 |
| activeColor | String | 选中日期文字颜色 | #FFFFFF |
| activeBackground | String | 选中日期背景色 | #465CFF |
| rangeColor | String | 区间内文字颜色 | #465CFF |
| rangeBackground | String | 区间内背景色 | #F1F4FA |
| start | String | 区间起点文字 | 开始 |
| end | String | 区间终点文字 | 结束 |
| isToday | Boolean | 是否显示今天文字 | true |
| disabled | Boolean | 是否禁用选择 | false |
| showBtn | Boolean | 是否显示底部确认按钮 | false |
| btnText | String | 确认按钮文字 | 确定 |
| btnBackground | String | 确认按钮背景色 | #465CFF |
| btnColor | String | 确认按钮文字颜色 | #FFFFFF |
| badgeColor | String | 角标颜色 | #FF2B2B |
| badgeTop | Number / String | 角标顶部偏移 | 16 |
| badgeRight | Number / String | 角标右侧偏移 | 16 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 选择日期或点击确认按钮 | { value, week, today, lunar } |
| dateChange | 切换日历数据 | { year, month } |
setDescr(callback) 和 setBadge(callback) 接收返回 Promise 的函数，用于设置当前月份的描述或角标。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |