element-ui 自定义日历组件calendar怎么实现？

<template>
  <div>
    <el-col class="dayEL" :span="12">
      <el-calendar style="height: 530px;" v-model="nowdate">
        <template #dateCell="{data}">
          <!--此为作用域插槽，不理解请自行百度
            #dateCell是v-slot:dateCell的缩写
          2.5 slot 语法这样写：slot="dateCell" slot-scope="{date, data}"
          2.6 slot 语法这样写：v-slot:dateCell="{data}"
           -->

          <div style="width:100%;height: 100%;">
            <div v-for="item in arr" :key="item.day">
              <div v-if="data.day.slice(-2) == item.day">
                <img :src="item.icon" alt="" style="width:40px;height:40px">
              </div>
            </div>
            <div class="spandate">{
          
   {
          
    data.day.slice(-2)}}</div>
          </div>
        </template>
      </el-calendar>
    </el-col>
  </div>
</template>
<script>
export default {
          
   
  name: "calendar",
  data() {
          
   
    return {
          
   
      arr: [],
      nowdate: new Date(), //指定当前显示的月份。如果 value 未指定，则显示当月
    };
  },
  mounted() {
          
   
    this.arr = [
      {
          
   
        day: "05",
        icon: "//img.alicdn.com/bao/uploaded/i1/2207316713768/O1CN010W540H1dhn2tB7PRc_!!0-item_pic.jpg_200x200q90.jpg_.webp",
      },
      {
          
   
        day: "10",
        icon: "//img.alicdn.com/bao/uploaded/i1/2260399281/TB2xa8ldeSSBuNjy0FlXXbBpVXa_!!2260399281.jpg_200x200q90.jpg_.webp",
      },
    ];
  },
  methods: {
          
   },
};
</script>
<style lang="">
</style>