日历组件 (Calendar)

Element-UI 的 Calendar 组件用于显示日期，并且可以根据需要选择特定的日期范围、设置周起始日等。这个组件常用于需要展示或选择日期的场景，提供了一种直观的日期选择和展示方式。

提示

Calendar 日历组件官方文档：https://element.eleme.cn/#/zh-CN/component/calendar (opens new window)

1. 基本用法

基本语法：使用 <el-calendar> 标签来显示一个日历，通过属性可以控制日历的日期、范围和周起始日等。

<template>
  <el-calendar v-model="selectedDate"></el-calendar>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date() // 绑定的日期值
    };
  }
};
</script>

• v-model 绑定：通过 v-model 绑定当前选中的日期，绑定值可以是 Date、string 或 number 类型。
• 

Calendar 属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值，显示的当前日期	Date/string/number	—	—
range	时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。	Array	—	—
first-day-of-week	周起始日	Number	1 到 7	1

dateCell 作用域插槽参数

参数	说明	类型	可选值	默认值
date	单元格代表的日期	Date	—	—
data	{ type, isSelected, day }，其中 type 表示该日期的所属月份（prev-month，current-month，next-month），isSelected 表示是否被选中，day 是格式化的日期，格式为 yyyy-MM-dd。	Object	—	—

2. 日历常用示例

设置时间范围

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

<template>
  <el-calendar :range="[new Date(2024, 7, 1), new Date(2024, 7, 31)]"></el-calendar>
</template>

• 时间范围：range 属性设置日历的时间范围。需要注意，范围内的日期跨度不能超过两个月，且开始时间必须是周一，结束时间必须是周日。

设置周起始日

通过 first-day-of-week 属性可以设置日历的周起始日，例如将周一设置为一周的第一天。

<template>
  <el-calendar :first-day-of-week="1"></el-calendar>
</template>

• 周起始日：通过设置 first-day-of-week 属性，可以定义一周的起始日，值为 1 到 7，默认值为 1（即周一）。

自定义日期单元格内容

可以通过 dateCell 插槽自定义每个日期单元格的内容。例如，可以在日期单元格中显示图标或标记特殊的日期。

<template>
  <el-calendar>
    <template v-slot:dateCell="{ date, data }">
      <div>
        <span>{{ data.day }}</span>
        <i v-if="data.isSelected" class="el-icon-star-on"></i>
      </div>
    </template>
  </el-calendar>
</template>

• 自定义单元格内容：通过 dateCell 插槽，可以在日期单元格中插入自定义的内容，如图标、标记等。

3. 总结

• 日期选择：Calendar 组件可以通过 v-model 绑定当前选中的日期，提供直观的日期选择功能。
• 时间范围：通过 range 属性，可以限制日历显示的时间范围，适用于需要限定日期范围的场景。
• 自定义周起始日：可以通过 first-day-of-week 属性设置周起始日，灵活适应不同的日历习惯。
• 自定义日期单元格：通过 dateCell 插槽，可以自定义每个日期单元格的内容，增强组件的灵活性和适应性。

Calendar 组件在日期展示和选择方面提供了很大的便利，适用于各种需要日期管理的场景。通过自定义日期单元格内容，可以进一步增强用户体验和组件的功能性。