VUE3 Element-Plus el-calenda工作日显示

在Vue 3和Element Plus中，如果你想要自定义日历的工作日样式，你可以使用dayclass属性来实现。dayclass是一个函数，它接收一个参数date，这是当前遍历的日期对象，并返回一个表示该日期类名的字符串。

以下是一个简单的例子，展示了如何使用dayclass来为工作日添加特定的样式：

<template>
  <el-calendar :dayclass="dayClass"></el-calendar>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dayClass = (date) => {
  // 假设周六周日为非工作日，添加custom-rest-day类
  if (date.day === 6 || date.day === 0) {
    return 'custom-rest-day';
  } else {
    return '';
  }
};
</script>
 
<style>
.custom-rest-day {
  background-color: #e9e9e9; /* 灰色背景表示非工作日 */
  color: #333; /* 非工作日的文字颜色 */
}
</style>

在这个例子中，dayClass函数检查当前遍历的日期是否是周六或周日（date.day的值为6表示周六，值为0表示周日）。如果是非工作日，则返回一个表示自定义样式类名的字符串custom-rest-day，否则返回空字符串。在<style>标签中定义了.custom-rest-day类，它设置了非工作日的特定样式。