FullCalendar v6：如何修改事件输出而非重建，实现HTML实体正确渲染？

FullCalendar从v3升级到v6后，事件标题里的HTML实体（比如&、<）会被原样输出，而不是解析成对应字符。以下是几种比完全重建事件DOM更简洁可靠的解决方案：

方案1：利用eventDidMount钩子修改已渲染元素 #

这个方法不需要改动默认的事件渲染逻辑，只在事件挂载后找到标题元素并替换内容：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置...
    eventDidMount: function(info) {
      const titleEl = info.el.querySelector('.fc-event-title');
      if (titleEl && info.event.title) {
        // 用textarea解析HTML实体（避免XSS风险）
        const txt = document.createElement('textarea');
        txt.innerHTML = info.event.title;
        titleEl.textContent = txt.value;
      }
    },
    // 事件动态更新时补充处理
    eventDidUpdate: function(info) {
      const titleEl = info.el.querySelector('.fc-event-title');
      if (titleEl && info.event.title) {
        const txt = document.createElement('textarea');
        txt.innerHTML = info.event.title;
        titleEl.textContent = txt.value;
      }
    }
  });
  calendar.render();
});

优点：逻辑简单，适配所有视图，不用自己维护事件DOM结构；动态更新场景只需补充eventDidUpdate即可覆盖。

方案2：复用默认eventContent渲染结果再修改 #

v6的eventContent回调里可以调用arg.renderDefault()获取默认生成的DOM节点，再对标题元素做修改，既保留默认样式和结构，又实现实体解析：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置...
    eventContent: function(arg) {
      // 获取默认渲染的DOM节点数组
      const defaultDomNodes = arg.renderDefault();
      // 找到标题元素并修改
      const titleEl = defaultDomNodes[0].querySelector('.fc-event-title');
      if (titleEl && arg.event.title) {
        const txt = document.createElement('textarea');
        txt.innerHTML = arg.event.title;
        titleEl.textContent = txt.value;
      }
      return { domNodes: defaultDomNodes };
    }
  });
  calendar.render();
});

优点：适配所有视图，事件动态更新时自动生效，无需额外处理；完全复用官方的DOM结构，兼容性更强。

方案3：预处理事件数据，提前解析实体 #

在将事件数据传给FullCalendar之前，先把标题里的HTML实体解析成对应字符，后续直接渲染解析后的文本：

// 示例：预处理事件数组（接口返回数据也可按此逻辑处理）
const rawEvents = [
  { title: 'Meeting & Workshop', start: '2024-05-20' },
  // 其他事件...
];

// 批量解析HTML实体
const processedEvents = rawEvents.map(event => {
  if (event.title) {
    const txt = document.createElement('textarea');
    txt.innerHTML = event.title;
    return { ...event, title: txt.value };
  }
  return event;
});

// 初始化日历
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: processedEvents,
    // 其他配置...
  });
  calendar.render();
});

优点：完全不修改日历渲染逻辑，最省心；适合事件数据静态或可提前处理的场景。

注意事项 #

• 用textarea解析实体是为了避免XSS风险，不要直接用innerHTML赋值，防止恶意代码注入。
• 如果你的事件标题里包含可信的HTML标签（不是纯实体），可以把titleEl.textContent改成titleEl.innerHTML，但要确保内容来源安全。

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