:cell-class-name is not effective in el-calender

I want to use cell-class-name to set color for calender cell, but it's not effective. Is this usage not supported in Element anymore? I couldn't find related usage in the official documentation, but ChatGPT told me it can be used.

    "core-js": "^3.8.3",
    "element-plus": "^2.2.32",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"

<template>
    <el-calendar v-model="currentDate" :range="range" :formatter="formatter" :cell-class-name="cellClass" />
</template>
  
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { ElCalendar } from 'element-plus';

export default defineComponent({
    components: {
        ElCalendar,
    },
    setup() {
        const currentDate = ref(new Date());
        const range = ref<[Date, Date]>([new Date("2023-02-26"), new Date("2023-03-25")]);
        const checkedDates = ref<Date[]>([]);

        const formatter = (date: Date) => {
            const day = date.getDate();
            return day.toString();
        };

        const cellClass = (date: Date) => {
            console.log('cellClass called');
            if (checkedDates.value.includes(date)) {
                console.log('date is checked');
                return 'blue';
            }
            return '';
        };

        console.log('data init');

        const fetchData = async () => {
            // const response = await fetch('/api/getCheckedDates');
            // const data = await response.json();
            // checkedDates.value = data.checkedDates.map((d: string) => new Date(d));
            checkedDates.value = [new Date("2023-03-01"), new Date("2023-03-02")];
            console.log('fetch data');
        };

        onMounted(() => {
            fetchData();
        });

        return {
            currentDate,
            range,
            formatter,
            cellClass,
        };
    },

});

</script>
  
<style>
.blue {
    color: rgb(212, 66, 66);
}

</style>

I added some console logs to prove that cellClass was not called.

data init
fetch data

There is no such prop cell-class-name in the current version of Element+. I haven't found it also in the previous version of ElementUI.

According to the documentation you should use the date-cell slot to render a Custom Content.

Like this:

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
</template>

<style>
.is-selected {
  color: #1989fa;
}
</style>