如何根据MySQL中事件标题动态修改FullCalendar事件颜色？

你当前代码的核心问题是在eventRender回调里，直接写backgroundColor: '#cecece'完全没有生效逻辑——这只是个孤立的键值对，没有绑定到任何元素或事件对象上。下面给你两种可行的修复方案：

方案1：直接修改事件DOM元素样式（适配你现有代码） #

在eventRender里，通过info.el获取事件对应的DOM元素，直接设置它的背景色样式：

eventRender: function(info) {
  if(info.event.title == "TitleToCompare") {
    // 直接修改DOM元素的背景色
    info.el.style.backgroundColor = '#cecece';
    // 如需修改文字颜色，可添加此行
    // info.el.style.color = '#fff';
    console.log(info.event.title);
  }
  var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body',
  });
}

这个方法直接操作渲染后的DOM，简单直接，适配你现在已经能识别目标事件的场景。

方案2：从事件源返回时携带颜色属性（更高效） #

如果你的privateEvents.php是从MySQL取数据后返回事件数组，建议直接在后端给匹配标题的事件加上backgroundColor属性，这样FullCalendar会自动应用颜色，不用前端额外处理：
PHP端示例代码：

// 从MySQL查询事件后循环处理
$events = [];
while ($row = $result->fetch_assoc()) {
  $event = [
    'id' => $row['id'],
    'title' => $row['title'],
    'start' => $row['start'],
    // 其他事件属性...
  ];
  // 匹配标题时添加颜色属性
  if ($row['title'] == "TitleToCompare") {
    $event['backgroundColor'] = '#cecece';
    $event['borderColor'] = '#cecece'; // 可选，统一事件边框色
  }
  $events[] = $event;
}
echo json_encode($events);

这种方法更高效，前端不用在渲染时逐个判断，直接由FullCalendar自动渲染颜色。

关于之前CSS方案报错的说明 #

如果之前尝试给事件加自定义类再写CSS，要注意FullCalendar的事件元素有固定类名结构，比如.fc-event。正确的做法是先给匹配事件加自定义类，再写CSS覆盖：
在eventRender里添加类：

if(info.event.title == "TitleToCompare") {
  info.el.classList.add('custom-gray-event');
}

对应的CSS：

.custom-gray-event {
  background-color: #cecece !important;
  border-color: #cecece !important;
}

加!important是因为FullCalendar自带样式优先级较高，需要强制覆盖。之前报错大概率是类名错误或CSS语法问题。

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