FullCalendar v6 默认对事件标题中的 HTML 实体进行转义显示，导致原本应渲染为符号（如 、©）的文本被原样输出；本文介绍通过 eventDidMount 钩子高效、轻量地解码并修正事件标题，避免手动重建 DOM 的脆弱方案。
fullcalendar v6 默认对事件标题中的 html 实体进行转义显示，导致原本应渲染为符号（如 ` `、`©`）的文本被原样输出；本文介绍通过 `eventdidmount` 钩子高效、轻量地解码并修正事件标题，避免手动重建 dom 的脆弱方案。
在 FullCalendar v3 中，事件标题内含的 HTML 实体（例如 ©、 、<）会由浏览器自动解析并渲染为对应字符；但升级到 v6 后，框架默认将 arg.event.title 视为纯文本，在 .fc-event-title 元素中直接 textContent 插入，导致实体未被解码——表现为源码可见的 © 而非 © 符号。
幸运的是，FullCalendar v6 提供了稳定可靠的生命周期钩子 eventDidMount，它在每个事件 DOM 元素完成渲染后立即触发，并传入已挂载的元素引用 arg.el。这正是我们所需的安全切入点：无需推翻默认结构，只需精准定位并修正标题内容。
以下是一个简洁、健壮的实现方案：
eventDidMount: function(arg) {
// 查找默认生成的标题容器（兼容所有视图）
const titleEl = arg.el.querySelector('.fc-event-title');
if (titleEl && titleEl.textContent) {
// 创建临时元素解码 HTML 实体
const decoder = document.createElement('div');
decoder.innerHTML = titleEl.textContent;
titleEl.textContent = decoder.textContent;
}
}
该方案优势显著：
- ✅ 零侵入：不干扰 FullCalendar 内部渲染逻辑，兼容 dayGrid, timeGrid, listWeek 等所有视图；
- ✅ 高稳定性：基于 querySelector 定位标准类名，比手动拼接 DOM 更可靠；
- ✅ 语义安全：仅解码文本内容，不执行任意 HTML（避免 XSS 风险），符合现代前端安全实践；
- ✅ 轻量高效：每个事件仅一次 DOM 查询与一次文本替换，无性能负担。
⚠️ 注意事项：
- 切勿在 eventContent 中重复使用 innerHTML 直接插入未解码字符串，否则会再次触发转义；
- 若需支持更复杂的富文本（如 标签），应改用 eventContent 并显式设置 innerHTML，但务必对来源做严格白名单过滤；
- eventDidMount 是只读钩子，不可用于修改 arg.event 对象本身（如 arg.event.title = ...），该操作不会触发重渲染。
综上，eventDidMount 是替代 eventContent 全量重建的首选方案——它以最小干预达成最大兼容性，完美复刻 v3 的实体渲染行为，同时保持代码清晰、可维护且面向未来。
