主题
Calendar 日历
使用
显示日期
基础用法
设置 value
来指定当前显示的月份。 如果 value
未指定,则显示当月。 value
支持 v-model
双向绑定。
自定义内容
通过设置名为 date-cell
的 scoped-slot
来自定义日历单元格中显示的内容。 在 scoped-slot
可以获取到 date
(当前单元格的日期), data
(包括 type,isSelected,day
属性)。 详情解释参考下方的 API
文档。
日历范围
设置 range
属性指定日历的显示范围。 开始时间必须是周起始日,结束时间必须是周结束日,且时间跨度不能超过两个月。
自定义日历头部
自定义农历
设置 show-lunar
属性指定是否显示农历日历。
自定义日程表
设置 schedule
属性指定日程表数据。
API
Calendar Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 选中日期 | Date | - |
range | 日期范围 | array | - |
showLunar | 是否显示农历 | boolean | false |
schedule | 日程列表 | array | - |
adaptive | 是否自适应内容高度 | boolean | false |
Calendar Slots
插槽名 | 描述 | 参数 |
---|---|---|
date-cell | type表示该日期的所属月份,可选值有prev-month、current-month和next-month;isSelected标明该日期是否被选中;day是格式化的日期,格式为yyyy-MM-dd;date是单元格的日期 | object |
header | 日历头部的内容 | object |