FullCalendar V4升级：事件标题HTML渲染失效求助

我之前升级FullCalendar时也踩过这个坑，V3到V4的API变化确实挺多，尤其是事件渲染这块的逻辑改得比较彻底。你原来依赖的eventRender方法在V4里已经被移除了，这就是为什么添加旧代码后会触发加载错误；而移除后HTML显示成纯文本，是因为V4默认会自动转义事件内容。

下面是适配V4的完整代码，直接替换你原来的配置即可：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendars');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: '/activities/calendar.json',
    contentHeight: 750,
    displayEventTime: false,
    headerToolbar: { // V3的header配置在V4中更名为headerToolbar
      left: '',
      center: 'title',
      right: 'today prev,next'
    },
    businessHours: {
      daysOfWeek: [1, 2, 3, 4, 5] // V3的dow配置在V4中更名为daysOfWeek
    },
    windowResizeHandling: true, // V3的handleWindowResize更名为windowResizeHandling
    eventLimit: 2,
    eventLimitClick: 'popover',
    eventContent: function(info) { // 替代V3的eventRender方法
      // 直接返回包含HTML内容的配置对象，FullCalendar会直接渲染不转义
      return {
        html: info.event.title
      };
    }
  });

  calendar.render();
});

关键变化说明： #

• 配置项更名：V4对不少配置项的名称做了规范，比如header→headerToolbar、dow→daysOfWeek、handleWindowResize→windowResizeHandling，沿用旧名称会导致配置解析失败。
• 事件渲染逻辑替换：eventRender被eventContent替代，不再需要手动查找DOM元素修改内容，直接返回包含html属性的对象即可让FullCalendar渲染原始HTML。

你之前遇到的JSON解析错误，本质是V4无法识别eventRender这个废弃配置项，导致整个日历配置解析失败；移除后配置正常加载，但默认的内容转义机制把HTML当成了纯文本。

最后提醒下：如果事件标题中的HTML包含用户输入内容，一定要做好XSS防护，避免安全风险。

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