el-calendar自定义日期高亮

需要实现根据数据来展示日历，有数据则高亮，没有数据，则字体颜色灰色，不同状态展示不同颜色，以下是完整代码

<template>
  <div>
    <el-calendar v-model="starttime">
      <template slot="dateCell" slot-scope="{date,data}">
        <div :class="btn(data) && arr[btn(data).allocationSum] || 'on'">
          <div>{{data.day.slice(5).replace('-', '月')}}日</div>
          <div v-if="btn(data) && btn(data).allocationSum === 1">有号</div>
          <div v-if="btn(data) && btn(data).allocationSum === 0">无号</div>
          <div v-if="btn(data) && btn(data).allocationSum === 2">约满</div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      starttime: '2023-03-06',
      list: [
        {
          "orgId": 0,
          "screenType": "1",
          "day": "2023-03-06",
          "allocationSum": 0,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": "1",
          "day": "2023-03-07",
          "allocationSum": 0,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": "1",
          "day": "2023-03-08",
          "allocationSum": 0,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-09",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-10",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-11",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-12",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-13",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-14",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-15",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-16",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-17",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-18",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-19",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-20",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-21",
          "allocationSum": 1,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-22",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-23",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-24",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-25",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-26",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-27",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-28",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-29",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-30",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-03-31",
          "allocationSum": 2,
          "bookedSum": 0
        },
        {
          "orgId": 0,
          "screenType": null,
          "day": "2023-04-01",
          "allocationSum": 2,
          "bookedSum": 0
        }
      ],
      arr: { 0: 'black', 1: 'green', 2: 'red' }
    }
  },
  methods: {
    btn (data) {
      return this.list.find(item => item.day === data.day)
    }
  }
}
</script>

<style lang="less" scoped>
.on {
  color: #ccc;
}
.black {
  color: black;
}
.green {
  color: green;
}
.red {
  color: red;
}
</style>