Laravel FullCalendar 非全天事件文本颜色设置不生效问题求助

核心原因 #

你遇到的非全天事件（含月视图下折叠的带圆点条目）文本色配置失效，是三个叠加问题导致的：

• 全局开启themeSystem => 'bootstrap'后，FullCalendar会自动为非全天视图（timeGrid 类视图、月视图折叠事件块）注入Bootstrap体系下的默认文本样式，优先级高于单个事件自定义的textColor配置
• 事件配置中同时叠加了backgroundColor、eventColor两个作用完全重叠的属性，两个取值不对齐时会干扰文本色的生效逻辑
• 自定义类名配置错误：把FullCalendar内置的fc-event-title当作自定义类绑定到事件上，还额外加了Bootstrap的text-success工具类，直接覆盖了你设置的黑色文本色值

具体调整步骤 #

1. 修正单事件的配置代码 #

删掉冗余、冲突的配置项，调整为：

$eventsData = Event::all();
$events = [];
foreach($eventsData as $row) {
    $events[] = \Calendar::event(
        $row->name,
        (bool)$row->allDay, // 强制转布尔值，避免类型判断错误
        new Carbon($row->start_date),
        new Carbon($row->end_date),
        $row->id,
        [
            // 只保留一个背景色配置，避免重复属性冲突
            'backgroundColor' => $color,
            // 明确声明文本色，和背景色做对比度匹配
            'textColor' => '#000000',
            // 自定义独立类名，不要塞入fc开头的内置类名
            'eventClassNames' => 'custom-calendar-event',
            'description' => 'hello',
            'display' => 'auto'
        ]
    );
}

这里需要删掉原配置里的三个冗余项：

• 删掉eventColor，它的作用和backgroundColor完全重叠，同时配置时主题系统会优先取Bootstrap的默认色值
• 删掉eventClassNames里的fc-event-title、fc-sticky、text-success，这些内置类和工具类会直接覆盖自定义样式

2. 补充自定义样式覆盖主题默认值 #

因为保留Bootstrap主题系统的话，默认样式优先级更高，需要在页面样式文件中补充以下CSS，专门覆盖非全天事件和折叠圆点条目的文本色：

/* 覆盖普通非全天事件的文本样式 */
.fc-theme-bootstrap .fc-event.custom-calendar-event .fc-event-main,
.fc-theme-bootstrap .fc-event.custom-calendar-event .fc-event-title {
    color: #000000 !important;
    font-weight: 500;
}

/* 专门覆盖月视图下折叠的带圆点条目的文本样式（就是你截图中标注的无效条目） */
.fc-theme-bootstrap .fc-daygrid-event-harness .fc-event-title {
    color: #000000 !important;
}

如果不需要Bootstrap主题的默认UI风格，可以直接把全局配置里的themeSystem改成'standard'，所有事件的textColor配置会直接生效，不需要额外写覆盖CSS。

3. 全局配置校验 #

检查现有日历配置项：

• 保留dayMaxEvents => true时，月视图会自动折叠超出显示数量的事件为带圆点的条目，这类条目默认走主题系统的文本色规则，必须通过上面的CSS覆盖才能自定义文本色
• 不需要拖拽、调整大小功能的话，可以去掉对应配置项，减少不必要的样式注入

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