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

Question

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

I would not rely on the ChatGPT answers for programming. Especially in fast such rapid changing areas, like frontend development. ChatGPT states that it has currently learned data only till year 2021. — Tolbxela, Mar 20 '23 at 14:50

score 0 · Accepted Answer · answered Mar 20 '23 at 14:48

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>

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

1 Answers1