Element Plus日历组件怎么自定义日期样式？

端木诗诗提问于 2026-03-25 10:08:21 阅读 5

组件

我在用 Element Plus 的 Calendar 组件，想把某些特殊日期（比如节假日）标红，但文档里没找到怎么改单个日期的样式。

试过用 :date-class 属性返回类名，但好像没生效。是不是我写法不对？

<el-calendar :date-class="getDayClass" />

getDayClass(date) {
  if (date.getDate() === 15) return 'special-day'
  return ''
}

CSS 里也加了 .special-day { color: red; }，但页面上完全没变化，求解！

我来解答赞 0 收藏

反馈

1 条解答

端木建杰 Lv1

Element Plus 的 Calendar 组件确实可以通过 :date-class 属性来自定义日期样式，但需要注意的是，这个属性返回的类名需要在 CSS 中正确应用，并且确保组件能正确渲染这些类。

你提到的方法看起来基本是对的，但可能有几个地方需要注意：

1. 确保你的 getDayClass 方法返回的类名是正确的，并且在 CSS 中定义了相应的样式。
2. 检查一下是否正确引入了你的 CSS 文件，有时候样式不生效是因为文件路径或者加载顺序的问题。
3. Element Plus 的 Calendar 组件可能对日期对象做了处理，确保你的方法能够正确解析日期。

你可以试试这个例子：

<el-calendar :date-class="getDayClass" />



methods: {

  getDayClass({ time, isSelected }) {

    const date = new Date(time)

    if (date.getDate() === 15) return 'special-day'

    return ''

  }

}

然后在你的 CSS 文件中添加样式：

.special-day {

  color: red;

}

如果还是没有效果，可以尝试在控制台查看一下元素的 class 是否正确应用了，有时候浏览器缓存也会导致样式不生效，清理下缓存再试试。希望这能帮到你，有时候这些问题就是个小坑，调了半天才发现是这么简单的问题。

2026-03-25 10:15