Vue中修改FullCalendar的dayHeaders文字颜色无效，求解决方法

问题原因 #

你的代码没生效，核心原因有两个：

• FullCalendar的Day Header文字实际嵌套在fc-day-header元素的子标签（比如.fc-day-header-text）里，直接给父元素设置颜色会被子元素的内置样式覆盖
• 样式选择器不够精确，无法覆盖FullCalendar默认样式的优先级

修正方案 #

方案1：通过dayHeaderDidMount钩子精准修改子元素样式 #

修改你的handleDayHeader函数，定位到实际承载文字的子元素再设置颜色：

const handleDayHeader = (arg) => {
  // 定位到Day Header的文字元素
  const headerTextEl = arg.el.querySelector('.fc-day-header-text');
  if (headerTextEl) {
    headerTextEl.style.color = 'red';
  }
}

方案2：通过类名+精确样式选择器修改 #

如果想用dayHeaderClassNames的方式，调整样式部分，针对文字子元素设置颜色：

.week-header .fc-day-header-text {
  color: red !important;
}

额外提示 #

按F12打开浏览器开发者工具，选中Day Header文字元素查看DOM结构和当前生效的样式，能更快定位问题——不同视图（月/周/日）下的元素类名可能略有差异，需要对应调整选择器。

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