如何修改FullCalendar中周数的背景颜色

排查与修复步骤 #

• 提升选择器精度
  FullCalendar默认样式优先级可能更高，尝试结合父容器类名增强选择器权重：

  .fc-view-harness .fc-week-number {
    background-color: red;
    color: #ee0726;
  }
  

  也可针对不同视图单独设置（适配不同版本视图类名）：

  /* 月视图周数 */
  .fc-month-view .fc-week-number {
    background-color: red;
    color: #ee0726;
  }
  /* 周视图周数 */
  .fc-timegrid-week-view .fc-week-number {
    background-color: red;
    color: #ee0726;
  }
  

• 确认样式加载顺序
  保证你的自定义CSS文件在FullCalendar官方CSS之后引入，确保自定义样式能覆盖默认样式。

• 核对DOM元素类名
  打开浏览器开发者工具（F12）定位周数元素，查看实际类名是否为fc-week-number，部分版本的FullCalendar可能会调整类名，需根据实际DOM结构修改选择器。

• 优化!important使用
  若!important未生效，可尝试移除它，通过叠加父类选择器提升权重：

  body .fc .fc-week-number {
    background-color: red;
    color: #ee0726;
  }
  

内容的提问来源于stack exchange，提问作者Susan