如何在FullCalendar的.fc-event-title后添加HTML扩展事件内容？

需求是在时间网格周视图的事件中，保留原有时间和标题的同时，展示extendedProps中的attendees、location等字段。之前尝试的两种方式都存在问题：

• 使用内容注入会完全替换事件原有内容，导致时间和标题丢失
• 直接给arg.el追加HTML，内容会被放到事件元素外部，不符合预期位置

解决方案 #

通过eventDidMount方法精准定位到.fc-event-title-container元素（标题的父容器），将扩展字段内容插入到该容器末尾，即可实现把额外内容放到.fc-event-title之后的效果：

eventDidMount: function(arg) {
  // 定位标题容器
  const titleContainer = arg.el.querySelector('.fc-event-title-container');
  if (!titleContainer) return;

  // 从事件的extendedProps中提取需要展示的字段
  const { location, attendees } = arg.event.extendedProps;
  
  // 构建扩展内容的HTML
  const extraContent = `
    <div class="fc-event-extended-details">
      ${location ? `<div><strong>地点:</strong> ${location}</div>` : ''}
      ${attendees?.length ? `<div><strong>参与人:</strong> ${attendees.join(', ')}</div>` : ''}
    </div>
  `;

  // 将内容插入到标题容器的末尾
  titleContainer.insertAdjacentHTML('beforeend', extraContent);
}

样式优化（可选） #

为了让扩展内容和原有标题区分开，可添加简单的CSS样式：

.fc-event-extended-details {
  margin-top: 3px;
  font-size: 0.8em;
  line-height: 1.2;
  color: #666;
}

效果说明 #

执行上述代码后，DOM结构会变成预期的样子：

<a tabindex="0" class="fc-event fc-event-start fc-event-end fc-event-future fc-timegrid-event fc-v-event">
  <div class="fc-event-main">
    <div class="fc-event-main-frame">
      <div class="fc-event-time">10:00 - 12:00</div>
      <div class="fc-event-title-container">
        <div class="fc-event-title fc-sticky">My title</div>
        <!-- 扩展内容会出现在这里 -->
        <div class="fc-event-extended-details">
          <div><strong>地点:</strong> 会议室A</div>
          <div><strong>参与人:</strong> 张三, 李四</div>
        </div>
      </div>
    </div>
  </div>
</a>

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