FullCalendar6复选框控制事件显隐：异用户事件颜色异常求助

我的FullCalendar6事件通过extendedProps的nomeUtente属性标记创建者，页面设置两个复选框：

• 勾选第一个仅显示当前会话用户（如domizianaD）的事件，取消则隐藏当前用户事件；
• 勾选第二个显示所有用户事件，取消则隐藏非当前用户事件。

事件需按类型（Normali、Malattia、Ferie等）显示对应颜色，我通过eventDidMount钩子实现颜色设置与显隐逻辑，但两个复选框都勾选时，非当前用户的事件显示为默认蓝色，未按类型渲染对应颜色。

实现代码（eventDidMount钩子） #

eventDidMount: function(info) {
    const title = info.event.title;
    const nomeUtente = info.event.extendedProps.nomeUtente;
    const sessionUser = $("#nomeUtente").data('value');
    if (nomeUtente){
        if (title == "Normali") {
            info.event.setProp("backgroundColor", "#FB6B4C");
        } else if (title == "Straordinarie") {
           info.event.setProp("backgroundColor", "#C8FC0C");
        } else if (title == "Ferie") {
            info.event.setProp("backgroundColor", "#EC1C28");
        } else if (title == "Malattia") {
            info.event.setProp("backgroundColor", "#FFB404");;
        } else if (title == "Permesso") {
            info.event.setProp("backgroundColor", "#A0ACDC");
        } else if (title == "Smart Working") {
            info.event.setProp("backgroundColor", "#08ACC4");
        } else if (title == "Trasferta") {
            info.event.setProp("backgroundColor", "#00897B");
        } else if (title == "Assenza non retribuita") {
            info.event.setProp("backgroundColor", "#F8D2D7");
        } else if (title == "Altro") {
            info.event.setProp("backgroundColor", "#5E35B1");
        };
        cs.forEach(function(v) {
            if(v.defaultValue == "Ore Personali"){
                if(v.checked){  
                    if(nomeUtente != sessionUser) 
                        info.event.setProp("display", "none");                 
                } else{                            
                    if(nomeUtente == sessionUser) 
                        info.event.setProp("display", "none"); 
                }
            } else if(v.defaultValue == "Assenze"){
                if(v.checked){  
                    if(nomeUtente != sessionUser) 
                        info.event.setProp("display", "block ruby");
                }else {
                    if(nomeUtente != sessionUser) 
                        info.event.setProp("display", "none");
                }
            }                
        })
    }
}

事件加载格式（PHP返回） #

events: [
{
    title: 'Normali',
    start:'2023-02-14T08:00',
    end: '2023-02-14T17:30',
    extendedProps: {
        nomeUtente: 'domizianaD',
    }
},
{
    title: 'Normali',
    start:'2023-02-05T08:00',
    end: '2023-02-05T17:30',
    extendedProps: {
        nomeUtente: 'raffaellaA',
    }
},
{
    title: 'Ferie',
    start:'2023-02-07T08:00',
    end: '2023-02-07T17:30',
    extendedProps: {
        nomeUtente: 'domizianaD',
    }
},
{
    title: 'Malattia',
    start:'2023-02-26T08:00',
    end: '2023-02-26T17:30',
    extendedProps: {
        nomeUtente: 'tizianaV',
    }
},
{
    title: 'Normali',
    start:'2023-02-01T08:00',
    end: '2023-02-01T17:30',
    extendedProps: {
        nomeUtente: 'domizianaD',
    }
},
{
    title: 'Normali',
    start:'2023-02-04T08:00',
    end: '2023-02-04T17:30',
    extendedProps: {
        nomeUtente: 'raffaellaA',
    }
}
]

1. 重绘触发导致颜色重置：
   你先给事件设置了对应类型的背景色，但后续遍历复选框时，当两个复选框都勾选，非当前用户事件会被先设为display:none，再设为display:block ruby。每次调用setProp都会触发FullCalendar重新渲染事件，而重绘不会再次执行eventDidMount钩子，之前设置的背景色会被重置为默认值。

2. 无效的display属性值：
   FullCalendar的事件display属性仅支持block、none、background等有效值，你使用的block ruby是非法值，会导致渲染逻辑异常，进一步触发默认样式恢复。

3. 复选框逻辑冲突未处理：
   双复选框勾选时，两个复选框的显隐逻辑会对同一事件进行两次相反的display设置，双重触发的重绘直接覆盖了之前的颜色配置，且没有保留颜色属性的持久化设置。

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