如何修改FullCalendar的线条颜色？解决CSS样式异常问题

最优全局修改方案（保留原有边框样式） #

FullCalendar默认通过CSS变量--fc-border-color统一控制所有边框颜色，直接覆盖这个变量就能一次性修改所有线条颜色，还不会破坏原有边框的实线、虚线等样式：

/* 全局生效 */
:root {
  --fc-border-color: #333; /* 替换成你需要的颜色，比如深灰色 */
}

/* 或者仅针对FullCalendar容器生效，避免影响全局 */
.full-calendar-wrapper {
  --fc-border-color: #333;
}

解决你之前遇到的样式丢失问题 #

你之前用.fc-theme-standard td, .fc-theme-standard th加!important覆盖border属性，会把原有边框的dotted（虚线）等样式直接替换成solid（实线），所以才会丢失特性。正确的做法是只修改边框颜色，而非整个border属性：

/* 针对表格单元格边框，仅修改颜色 */
.fc-theme-standard td, .fc-theme-standard th {
  border-color: #333 !important;
}

单独调整特定线条（比如次要时间槽） #

如果需要给某类线条单独设置颜色，同样只修改border-color或者单独给该选择器设置变量，不要覆盖整个border：

/* 方法1：用变量单独控制 */
.fc-timegrid-slot-minor {
  --fc-border-color: #666;
}

/* 方法2：直接修改border-color */
.fc-timegrid-slot-minor {
  border-color: #666 !important;
}

这样既能修改颜色，又能保留原有边框的虚线/实线样式。

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