当前位置：首页 > 前端教程

elementui calendar

2026-03-06 08:28:06前端教程

Element UI Calendar 组件

Element UI 提供了一套基于 Vue.js 的组件库，其中包含 el-calendar 组件，用于展示日历视图。该组件支持日期选择、自定义渲染、事件标记等功能，适用于日程管理、日期选择等场景。

基本用法

通过 v-model 绑定当前显示的月份，默认展示当前月份的日历：

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

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

自定义日期单元格内容

通过 date-cell 插槽可以自定义每个日期单元格的内容。例如，标记特定日期或添加事件：

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <div class="cell-content">
        {{ data.day.split('-').slice(2).join('-') }}
        <div v-if="isEventDate(data.day)" class="event-marker"></div>
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  methods: {
    isEventDate(date) {
      // 判断是否为事件日期
      return date === '2023-10-15'
    }
  }
}
</script>

<style>
.event-marker {
  width: 6px;
  height: 6px;
  background-color: #f56c6c;
  border-radius: 50%;
  margin: 2px auto;
}
</style>

日期范围选择

通过设置 range 属性可以实现日期范围选择。绑定 v-model 为一个数组，包含开始和结束日期：

<template>
  <el-calendar v-model="range" :range="['2023-10-01', '2023-10-31']"></el-calendar>
</template>

<script>
export default {
  data() {
    return {
      range: [new Date('2023-10-10'), new Date('2023-10-20')]
    }
  }
}
</script>

事件标记

结合插槽和自定义逻辑，可以在日历中标记特定事件。例如，高亮显示有会议的日期：

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <div :class="['cell', { 'has-meeting': hasMeeting(data.day) }]">
        {{ data.day.split('-').slice(2).join('-') }}
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  methods: {
    hasMeeting(date) {
      const meetings = ['2023-10-05', '2023-10-12', '2023-10-19']
      return meetings.includes(date)
    }
  }
}
</script>

<style>
.has-meeting {
  background-color: #e6f7ff;
  border-radius: 4px;
}
</style>

国际化配置

通过设置 locale 属性可以切换日历的语言。Element UI 默认支持中文和英文：

<template>
  <el-calendar :locale="locale"></el-calendar>
</template>

<script>
import { Lang } from 'element-ui'
export default {
  data() {
    return {
      locale: Lang.en // 切换为英文
    }
  }
}
</script>