[Vuejs]-:cell-class-name is not effective in el-calender

by

0đź‘Ť

âś…

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>

Leave a comment