Calendar calendar

显示日期

基本

2021 年 8 月

一	二	三	四	五	六	日
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

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

<template>
  <div>
    <el-calendar v-model="value">
    </el-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>

显示代码 复制代码 复制代码

自定义内容

2021 年 8 月

一	二	三	四	五	六	日
07-26	07-27	07-28	07-29	07-30	07-31	08-01
08-02	08-03	08-04	08-05	08-06	08-07	08-08
08-09	08-10	08-11	08-12	08-13	08-14	08-15
08-16	08-17	08-18	08-19	08-20	08-21	08-22
08-23	08-24	08-25	08-26	08-27	08-28	08-29
08-30	08-31	09-01	09-02	09-03	09-04	09-05

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

<template>
  <div>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<style>
  .is-selected {
    color: #1989FA;
  }
</style>

显示代码 复制代码 复制代码

自定义范围

2019 年 3 月

一	二	三	四	五	六	日
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24

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

<template>
  <div>
    <el-calendar :range="['2019-03-04', '2019-03-24']">
    </el-calendar>
  </div>
</template>

显示代码 复制代码 复制代码

Attributes

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

dateCell scoped slot 参数

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