基于hall_no值修改FullCalendar中.fc-event的CSS样式求助

你之前的思路走偏啦——直接用后端输出全局CSS的方式没法给单个事件区分颜色，而且代码里还有变量作用域和逻辑错误。其实FullCalendar本身就支持给单个事件设置样式属性，咱们换个正确的方式来实现：

方法一：直接给事件添加颜色属性（最简单） #

在后端构造事件JSON的时候，根据每个事件的hall_no值，直接给事件对象添加backgroundColor（和borderColor，如果需要边框同色的话）属性，FullCalendar会自动应用这些样式：

$data_events = array(); 
foreach($events->result() as $r) { 
    // 根据hall_no设置对应颜色
    $event_bg_color = '';
    switch($r->hall_no) {
        case 'Hall A':
            $event_bg_color = '#00cc00'; // 绿色
            break;
        case 'Hall B':
            $event_bg_color = '#ff1a8c'; // 粉色
            break;
        case 'Hall A+B':
            $event_bg_color = '#00ffff'; // 青色
            break;
        default:
            $event_bg_color = '#378006'; // 默认颜色，可选
    }

    $data_events[] = array( 
        "id" => $r->id, 
        "title" => $r->name . "\n\n" . $r->hall_no, 
        "end" => $r->end, 
        "start" => $r->start,
        "backgroundColor" => $event_bg_color,
        "borderColor" => $event_bg_color // 让边框和背景色一致，可选
    ); 
} 
echo json_encode(array("events" => $data_events)); 
exit(); 

这样每个事件都会根据自己的hall_no显示对应的背景色，不需要额外写CSS，直接交给FullCalendar处理就行。

方法二：用自定义类名（更灵活，适合需要额外样式的场景） #

如果之后需要给不同场馆的事件加更多样式（比如字体、边框样式），可以给事件添加自定义类名，再用CSS来控制：

后端代码： #

$data_events = array(); 
foreach($events->result() as $r) { 
    $event_class = '';
    switch($r->hall_no) {
        case 'Hall A':
            $event_class = 'hall-a-event';
            break;
        case 'Hall B':
            $event_class = 'hall-b-event';
            break;
        case 'Hall A+B':
            $event_class = 'hall-ab-event';
            break;
    }

    $data_events[] = array( 
        "id" => $r->id, 
        "title" => $r->name . "\n\n" . $r->hall_no, 
        "end" => $r->end, 
        "start" => $r->start,
        "className" => $event_class
    ); 
} 
echo json_encode(array("events" => $data_events)); 
exit(); 

前端CSS： #

.hall-a-event {
    background-color: #00cc00 !important;
    border-color: #00cc00 !important;
}
.hall-b-event {
    background-color: #ff1a8c !important;
    border-color: #ff1a8c !important;
}
.hall-ab-event {
    background-color: #00ffff !important;
    border-color: #00ffff !important;
}

这里加!important是因为FullCalendar的默认事件样式优先级比较高，需要强制覆盖。

为什么你之前的方法没用？ #

1. 全局CSS的问题：你之前尝试输出全局的.fc-event样式，这样会把所有事件都改成同一个颜色，没法区分单个事件的场馆信息。
2. 变量作用域错误：比如hallb()函数里的$query变量是在halla()里定义的，作用域不共享，根本取不到值。
3. in_array用法错误：$data_events是一个多维数组（数组里的每个元素都是事件数组），in_array("Hall A", $data_events)根本找不到对应的内容，因为它只会检查数组的顶层元素，不会深入到每个事件的title或hall_no里。

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