本文详解如何在 FullCalendar v6 的 timegrid 视图中，不替换原有结构，而是在 .fc-event-title 元素之后精准注入额外 HTML（如参会人、地点等 extendedProps），利用 eventDidMount 配合原生 DOM 方法实现灵活定制。
本文详解如何在 fullcalendar v6 的 timegrid 视图中，**不替换原有结构**，而是在 `.fc-event-title` 元素之后精准注入额外 html（如参会人、地点等 extendedprops），利用 `eventdidmount` 配合原生 dom 方法实现灵活定制。
在 FullCalendar v6 中，若需增强事件显示信息（例如在默认的「时间 + 标题」基础上补充 extendedProps.attendees 或 extendedProps.location），直接使用 eventContent: { html: '...' } 会完全覆盖内置渲染逻辑，丢失时间、样式类及可访问性支持。而 eventDidMount 回调提供了对已挂载 DOM 节点的安全操作入口——关键在于精准定位并插入，而非粗暴拼接 innerHTML。
正确做法是：在 eventDidMount 中通过 args.el.querySelector('.fc-event-title') 获取标题容器元素，再调用 insertAdjacentHTML('afterend', htmlString) 将自定义内容插入其后。该方法严格遵循 DOM 标准，不破坏原有结构，且能保留 FullCalendar 的事件交互（如点击、拖拽）和 CSS 样式继承。
以下为完整示例代码：
const calendar = new FullCalendar.Calendar(calendarEl, {
// ... 其他配置
eventDidMount: function(args) {
const titleEl = args.el.querySelector('.fc-event-title');
if (titleEl && args.event.extendedProps) {
const { attendees, location } = args.event.extendedProps;
let extraHtml = '';
if (attendees) {
extraHtml += `<div class="fc-event-attendees">? ${Array.isArray(attendees) ? attendees.join(', ') : attendees}</div>`;
}
if (location) {
extraHtml += `<div class="fc-event-location">? ${location}</div>`;
}
if (extraHtml) {
titleEl.insertAdjacentHTML('afterend', extraHtml);
}
}
}
});
⚠️ 注意事项：
- 务必检查元素存在性：querySelector 可能返回 null（如某些视图未渲染标题），需加空值判断；
- 避免重复注入：eventDidMount 在事件重渲染时可能被多次触发，建议结合 data-* 属性做防重处理（如 if (!titleEl.hasAttribute('data-injected')) { ... titleEl.setAttribute('data-injected', 'true'); }）；
- 样式兼容性：注入的 HTML 默认无样式，建议添加自定义 class（如示例中的 fc-event-attendees），并在 CSS 中统一控制字体大小、行高与间距，确保与 .fc-event-title 视觉协调；
- 无障碍考量：若内容具语义重要性（如地点为关键信息），可添加 aria-label 或 role="note" 提升可访问性。
此方案兼顾灵活性与稳定性，既复用 FullCalendar 原有渲染逻辑，又满足业务层个性化扩展需求，是生产环境推荐的标准实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
