Element UI 自定义日历

Element UI 自定义日历

代码示例

HTML部分

<template>
	<el-calendar ref="calendar">
            <template #header="{ date }">
              <div style="background: #0c2035; width: 100%">
                <el-button-group>
                  <el-button size="small" @click="selectDate('prev-month')">
                    Previous Month
                  </el-button>
                  <el-button size="small" @click="selectDate('next-month')">
                    Next Month
                  </el-button>
                </el-button-group>
                <p>{{ date }}</p>
              </div>
            </template>
            <template #dateCell="{ data }">
              <div style="width: 100%; height: 100%">
                <div style="text-align: center">
                  {{ data.day.split("-").slice(2).join("") }}
                </div>
                <div style="text-align: center">
                  <span
                    class="remark-text calendar-time"
                    v-for="(item, index) in dealMyDate(data.day)"
                    :key="index"
                  >
                    {{ item }}
                  </span>
                </div>
              </div>
            </template>
          </el-calendar>
</template>

js部分

代码如下（示例）：

<script>
import { ref, reactive } from "vue";
export default {
  setup(props) {
    const calendar = ref();
    const selectDate = (val) => {
      calendar.value.selectDate(val);
    };
    const resDate = reactive([
      { date: "2022-05-30", content: "10" },
      { date: "2022-05-01", content: "20" },
      { date: "2022-05-02", content: "划水" },
      { date: "2022-05-24", content: "摸鱼" },
      { date: "2022-05-25", content: "学习" },
      { date: "2022-05-26", content: "学习" },
      { date: "2022-05-27", content: "学习" },
      { date: "2022-05-28", content: "摸鱼" },
    ]);

    const dealMyDate = (v) => {
      let res = "";
      for (let index = 0; index < resDate.length; index++) {
        if (resDate[index].date == v) {
          res = resDate[index].content;
          break;
        }
      }
      return res;
    };
    return {
      dealMyDate,
      selectDate,
      calendar,
    };
};
</script>
## 效果图
效果图(https://img-blog.csdnimg.cn/e82764eb34f64f90864dcf14da52fe25.png#pic_center)