vue3+elementPlus el-calendar如何标出多个时间

先上效果图

 上代码

<template>
	<div  style="text-align: center;">
          <el-calendar style="width:600px;" v-model="nowdate">
            <template #date-cell="{data}">
                <div>
                  <p :class="[findDate(data) > -1?'activeItem':'']">{{ data.day.split('-').slice(2).join('-') }}</p>
                </div>
              </template>
          </el-calendar>
	</div>
</template>
<script setup>
  import {ref, onMounted } from "vue";
  let nowdate = ref(new Date())
  let activeday = ref([
    {dat:'2024-03-25'},
    {dat:'2024-03-26'},
    {dat:'2024-03-28'},
    {dat:'2024-03-29'}
  ])
  const findDate = (date) =>{
    let index = activeday.value.findIndex(item =>{
        return item.dat == date.day
    })
    return index
  }
</script>
<style>
  .activeItem{
    color:red;
  }
  .el-calendar-table td.is-today{
    color:#000 !important;
    background: transparent !important;
  }

</style>

注意

dateCell scoped slot 参数 ： data { type, isSelected, day}

• type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；
• isSelected 标明该日期是否被选中；
• day 是格式化的日期，格式为 yyyy-MM-dd

显示在日历上日期方法：

  data.day.split('-').slice(2).join('-')