Skip to content

Calendar 日历

使用

显示日期

基础用法

设置 value 来指定当前显示的月份。 如果 value 未指定,则显示当月。 value 支持 v-model 双向绑定。

自定义内容

通过设置名为 date-cellscoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date(当前单元格的日期), data(包括 type,isSelected,day 属性)。 详情解释参考下方的 API 文档。

日历范围

设置 range 属性指定日历的显示范围。 开始时间必须是周起始日,结束时间必须是周结束日,且时间跨度不能超过两个月。

自定义日历头部

自定义农历

设置 show-lunar 属性指定是否显示农历日历。

自定义日程表

设置 schedule 属性指定日程表数据。

API

Calendar Props

参数名描述类型默认值
model-value / v-model选中日期Date-
range日期范围array-
showLunar是否显示农历booleanfalse
schedule日程列表array-
adaptive 是否自适应内容高度booleanfalse

Calendar Slots

插槽名描述参数
date-celltype表示该日期的所属月份,可选值有prev-month、current-month和next-month;isSelected标明该日期是否被选中;day是格式化的日期,格式为yyyy-MM-dd;date是单元格的日期object
header日历头部的内容object