基于FC6的日历：如何将创建者nomeUtente添加到事件标题

问题分析 #

你遇到的核心问题：

1. 使用$(".fc-event-title").append()会选中页面所有事件标题元素，导致每次渲染事件时所有标题都重复追加用户名；
2. 使用info.event.setProp("title")修改事件标题，会因eventDidMount多次触发（视图切换、事件重渲染）导致标题重复拼接，且存在视图切换后才显示的延迟问题。

最优解决方案（数据源层面处理） #

直接在后端生成包含用户名的完整标题，前端通过回调设置颜色，逻辑最简洁且无重复问题：

1. 修改后端PHP代码（load.php） #

将标题直接拼接为事件类型 - 用户名，同时保留原始事件类型到扩展属性，用于前端设置颜色：

<?php
require_once "../../connection.php";

$data = array();
$query= sqlsrv_query($conn,"SELECT * FROM gestioneOre ORDER BY idAssenza"); 
while($result = sqlsrv_fetch_array($query)){
    $data[] = array(
        'idAssenza' => $result['idAssenza'],
        // 直接生成完整标题
        'title'     => $result['ename'] . ' - ' . $result['nomeUtente'],
        'start'     => $result['starts'],
        'end'       => $result['ends'],
        'extendedProps' => array(
            'nomeUtente' => $result['nomeUtente'],
            'originalTitle' => $result['ename'], // 保留原始事件类型
            'pausaPranzo' => $result['pausaPranzo']
        )
    );
}   
echo json_encode($data);
?>

2. 前端配置颜色回调 #

替换原eventDidMount，使用eventBackgroundColor回调统一设置事件背景色：

eventBackgroundColor: function(info) {
    // 定义事件类型与颜色的映射表
    const colorMap = {
        "Normali": "#FB6B4C",
        "Straordinarie": "#C8FC0C",
        "Ferie": "#EC1C28",
        "Malattia": "#FFB404",
        "Permesso": "#A0ACDC",
        "Smart Working": "#08ACC4",
        "Trasferta": "#00897B",
        "Assenza non retribuita": "#F8D2D7",
        "Altro": "#5E35B1"
    };
    // 返回对应颜色，无匹配则用默认色
    return colorMap[info.event.extendedProps.originalTitle] || '#378006';
}

备选方案（前端自定义事件内容） #

如果无法修改后端代码，可使用FullCalendar 6推荐的eventContent回调自定义事件渲染，精准控制当前事件的标题和样式：

eventContent: function(info) {
    const baseTitle = info.event.title;
    const nomeUtente = info.event.extendedProps.nomeUtente;
    const fullTitle = `${baseTitle} - ${nomeUtente}`;

    // 设置背景色
    const colorMap = {
        "Normali": "#FB6B4C",
        "Straordinarie": "#C8FC0C",
        "Ferie": "#EC1C28",
        "Malattia": "#FFB404",
        "Permesso": "#A0ACDC",
        "Smart Working": "#08ACC4",
        "Trasferta": "#00897B",
        "Assenza non retribuita": "#F8D2D7",
        "Altro": "#5E35B1"
    };
    info.el.style.backgroundColor = colorMap[baseTitle] || '#378006';

    // 返回自定义的事件内容
    return {
        html: `<div class="fc-event-title">${fullTitle}</div>`
    };
}

原代码问题根源 #

• 全局jQuery选择器问题：$(".fc-event-title")会选中页面所有事件标题，每次eventDidMount触发时，所有事件都会追加用户名，导致重复；
• 事件对象重复修改：setProp("title")会修改事件对象的原始属性，而eventDidMount在视图切换、事件重渲染时会多次触发，导致标题被反复拼接，同时修改事件属性可能触发异步渲染，出现视图切换后才显示的延迟。

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