Calendar 日历

显示日期，并支持在单元格中自定义日程内容。

import { createApp } from 'vue'
import { ElCalendar } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElCalendar)

基础用法

设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。 头部提供上一月 / 下一月、今天，以及月 / 年视图切换。

控制器类型

您可以设置日历头部的控制器类型。 设置 select 时，您可以使用 formatter 自定义年、月下拉的 label。

自定义内容

通过设置名为 date-cell 的 scoped slot 来自定义日期单元格中显示的内容。 在 scoped slot 可以获取到 date（当前单元格的日期）、data（包括 type，isSelected，day 属性）。 需要展示完整文案时，可在单元格上叠加 Popover。

范围

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

自定义日历头部

国际化

文档站点默认使用中文。如果业务项目需要切换其它语言，请参考国际化文档。

要注意的是：日期相关的文字（月份，每一周的第一天等等）也都是通过国际化来配置的。

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	Date	—
range	时间范围，包括开始时间与结束时间。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。	array	—
controller-type	日历头部的控制器类型	enum	button
formatter	当 controller-type 为“select”时的格式标签	Function	—
view / v-model:view	当前视图，可选 month 或 year	enum	month

Slots

插槽名	说明	类型
date-cell	type 表示该日期的所属月份，可选值有 prev-month、current-month 和 next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd；date 是单元格的日期	object
header	卡片标题内容。作用域参数包含 date 与 view	object

Exposes

名称	说明	类型
selectedDay	当前已选日期	object
pickDay	选择一个具体日期	Function
selectDate	选择日期	Function
calculateValidatedDateRange	根据开始与结束日期计算验证日期范围	Function