如何在FullCalendar JS中更简洁高效地展示事件的更多信息？

直接拼接title字段不是最佳实践，FullCalendar提供了专门的自定义事件内容的能力，既能保持字段语义清晰，又能灵活控制样式和排版，以下是两种推荐方案：

方法1：使用eventContent自定义渲染（推荐） #

通过eventContent选项可以完全自定义事件的HTML结构，把标题、参与者、地址等信息分开排版，后期维护和样式调整更方便。

// 初始化日历时配置自定义内容渲染
const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他基础配置（比如header、views等）
  eventContent: function(info) {
    return {
      html: `
        <div class="fc-event-main-title">${info.event.title}</div>
        <div class="fc-event-detail">参与者：${info.event.extendedProps.participant}</div>
        <div class="fc-event-detail">
          ${info.event.extendedProps.street}<br>
          ${info.event.extendedProps.zip_city}
        </div>
      `
    };
  }
});

// 添加事件时，将额外信息存入extendedProps（FullCalendar专门用于扩展字段的属性）
calendar.addEvent({
  id: event["id"],
  title: event["title"],
  start: event["startTime"],
  end: event["endTime"],
  color: event["color"],
  extendedProps: {
    participant: event["participant"],
    street: event["street"],
    zip_city: event["zip_city"]
  }
});

你还可以给不同类别的信息添加CSS类，比如给.fc-event-detail设置更小的字体、浅灰色文本，优化视觉层次。

方法2：使用eventDidMount追加内容 #

如果不想完全重写事件结构，也可以在事件挂载到DOM后，动态追加额外信息：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他基础配置
  eventDidMount: function(info) {
    const extraContent = document.createElement('div');
    extraContent.className = 'fc-event-extra';
    extraContent.innerHTML = `
      <div>${info.event.extendedProps.participant}</div>
      <div>${info.event.extendedProps.street}</div>
      <div>${info.event.extendedProps.zip_city}</div>
    `;
    info.el.appendChild(extraContent);
  }
});

// 添加事件的方式和方法1一致，用extendedProps存额外字段
calendar.addEvent({
  id: event["id"],
  title: event["title"],
  start: event["startTime"],
  end: event["endTime"],
  color: event["color"],
  extendedProps: {
    participant: event["participant"],
    street: event["street"],
    zip_city: event["zip_city"]
  }
});

为什么不推荐拼接title？ #

• 换行符\n在HTML中默认不生效，需要额外设置white-space: pre-line才能显示换行，样式控制受限
• 破坏了title字段的语义（原本仅用于事件标题），后期如果需要单独使用标题会增加额外处理成本
• 无法给不同类型的信息单独设置样式，排版灵活性差

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