FullCalendar事件保存后重新加载颜色丢失问题排查求助

看起来你遇到的核心问题是：保存到数据库的事件包含color字段，但重新加载时FullCalendar没有自动将这个字段应用为事件的背景/边框颜色。让我们一步步排查并修复：

问题根源 #

当你拖拽创建事件时，你同时设置了backgroundColor、borderColor（这是FullCalendar识别的颜色属性）和extendedProps.color；但保存时，你把extendedProps.color存到了事件的color字段（看你存储的JSON示例）。而FullCalendar默认不会把返回的color字段自动映射到backgroundColor和borderColor，所以重新加载后事件丢失了颜色。

另外注意你的保存代码里有个小bug：evento["start"] = start;和evento["end"] = end;里的start和end变量没有定义，应该替换为事件的实际时间，不然保存的时间会有问题。

修复方案 #

方案1：前端加载时转换颜色属性 #

在FullCalendar的配置里，给eventSources添加eventTransform函数，把返回的color字段转换成FullCalendar需要的backgroundColor和borderColor：

修改你的日历初始化代码：

var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'local',
    plugins: ['interaction', 'dayGrid', 'timeGrid'],
    eventSources: [ // your event source
        { 
            url: 'ajax/turnos2.ajax.php',
            eventTransform: function(eventData) {
                // 如果返回的事件有color字段，映射到背景和边框颜色
                if (eventData.color) {
                    eventData.backgroundColor = eventData.color;
                    eventData.borderColor = eventData.color;
                }
                return eventData;
            }
        }
    ],
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(info) {
        info.draggedEl.parentNode.removeChild(info.draggedEl);
    }
});

方案2：后端返回时直接返回正确的颜色属性 #

修改turnos2.ajax.php，在转换数据时把color字段转换成backgroundColor和borderColor：

// turnos2.ajax.php
<?php 
require_once "../modelos/turnos.modelo.php"; 
require_once "../controladores/turnos.controlador.php"; 

$data = ControladorTurnos::ctrMostrarTurnos(); 
$data2 = []; 
foreach($data as $key=>$value){
    $event = json_decode($value["datos"]);
    // 把color映射到FullCalendar需要的属性
    if (isset($event->color)) {
        $event->backgroundColor = $event->color;
        $event->borderColor = $event->color;
    }
    $data2[] = $event; 
} 
//returns data as JSON format 
echo (json_encode($data2)); 

同时修复保存时的时间字段bug #

修改你保存事件的JS代码，把未定义的start和end替换为事件的实际时间：

eventos.forEach(e => {
    // Nombre del turno 
    title = (e._def["title"]); 
    barbero2 = (e._def.extendedProps["barbero"]); 
    servicio = (e._def.extendedProps["servicio"]); 
    color = (e._def.extendedProps["color"]); 
    id = num; 
    num = num + 1; 
    var evento = new Object(); 
    evento["id"] = id; 
    evento["title"] = title; 
    evento["barbero"] = barbero2; 
    evento["servicio"] = servicio; 
    // 修复：获取事件的开始和结束时间并转为ISO字符串
    evento["start"] = e.start.toISOString(); 
    evento["end"] = e.end.toISOString(); 
    evento["color"] = (e._def.extendedProps["color"]); 
    arrayEventos.push(evento); 
})

验证效果 #

完成以上修改后，重新创建事件保存，再刷新页面，原有事件的颜色应该就能正常显示了。

内容的提问来源于stack exchange，提问作者Agustin G.