elementUI日历组件标注周六周日

在Element UI的<el-calendar>组件中，要标注周六和周日，可以使用date-class-name属性来为特定的日期添加自定义的类名。然后通过CSS样式来突出显示这些日期。

以下是一个简单的例子：

<template>
  <el-calendar :date-class-name="getDateClass"></el-calendar>
</template>
 
<script>
export default {
  methods: {
    getDateClass(date) {
      let dayOfWeek = date.getDay(); // 获取星期几，0 表示周日
      if (dayOfWeek === 6 || dayOfWeek === 0) { // 周六和周日
        return 'weekend';
      } else {
        return '';
      }
    }
  }
}
</script>
 
<style>
.weekend .el-calendar__date {
  background-color: #f56c6c; /* 可以根据需要自定义颜色 */
  color: white;
}
</style>

在这个例子中，getDateClass方法根据传入的日期判断是否为周六或周日，如果是则返回'weekend'，否则返回空字符串。然后在CSS中定义了.weekend类，为.el-calendar__date添加背景颜色以区分周末。