vue日历组件 添加指定日期标记

先看一下效果哦
开播 代表我数组中指定的日期

代码如下：

<el-calendar>
  <template #dateCell="{data}">
    <div style="margin:0px" @click="calendarOnClick(data)">
      {{ data.day.split('-').slice(2).join() }}
      <div v-for="(i, index) in dayTime" :key="index">
        <div v-if="data.day==i" class="budge">开播</div>
      </div>
    </div>
  </template>
</el-calendar>

data中 定义指定日期数组

dayTime: ["2022-03-28", "2022-03-25", "2022-10-22", "2022-10-17", "2022-10-16","2022-11-01"],

在方法中 查看日期是否正确

// 获取点击日期
calendarOnClick(data){
  console.log(data.day)
},

自定义样式

.budge {
  color: orange;
  background-color: #fff8e6;
  margin: 0 auto;
  margin-top: 10px;
  padding:5px 0 0 20px;
}