如何在FullCalendar事件调整大小后动态修改事件内容？

我明白你遇到的困扰了——调整事件大小后想动态修改事件显示内容，但不管是直接操作DOM还是修改event对象都没效果，甚至eventRender里拿到的还是旧值。这主要是因为FullCalendar内部维护着自己的事件数据副本，直接修改event对象不会触发它的更新机制，而且事件resize完成后，FullCalendar会自动重新渲染该事件，导致你手动修改的DOM被覆盖。

下面是具体的解决方法：

核心思路 #

1. 更新事件数据并通知FullCalendar：修改event的自定义属性后，必须调用FullCalendar的updateEvent方法，让它同步内部数据并重新渲染事件。
2. 在eventRender中基于最新数据渲染内容：把自定义内容的渲染逻辑放在eventRender里，这样每次事件渲染（包括resize后的重渲染）都会使用最新的事件数据。

修改后的代码示例 #

$('#calendar').fullCalendar({
  // 初始化事件时添加自定义content属性，用来存储显示内容
  events: [
    {
      title: '初始事件内容',
      start: '2024-05-20',
      end: '2024-05-21',
      content: 'event content'
    }
  ],
  eventRender: function (event, element) {
    // 替换默认的fc-title为自定义内容，把换行转成HTML换行标签实现多行显示
    element.find('.fc-title').html(event.content.replace(/\n/g, '<br>'));
    console.log(event.content); // 现在会输出更新后的值
  },
  eventResizeStop: function (event, jsEvent, ui, view) {
    // 更新事件的自定义内容
    event.content = 'event content\nis now not the\nsame anymore';
    // 通知FullCalendar更新该事件，触发重新渲染
    $(this).fullCalendar('updateEvent', event);
  }
});

关键细节解释 #

• 自定义属性content：我们没有直接修改默认的title属性，而是新增了一个content属性来存储自定义显示内容，这样可以避免和FullCalendar的默认逻辑冲突。
• updateEvent方法：这是关键！调用这个方法后，FullCalendar会将你修改后的event对象同步到它的内部数据中，然后触发该事件的重新渲染，此时eventRender就能拿到最新的content值。
• 多行内容处理：因为你期望的内容是多行的，所以在eventRender里用replace(/\n/g, '<br>')把换行符转换成HTML换行标签，实现多行显示效果。

针对FullCalendar v4+的注意事项 #

如果你使用的是FullCalendar v4及以上版本，API有一些变化，需要改用以下写法：

// 先获取日历实例
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  events: [/* 事件数据 */],
  eventRender: function(info) {
    info.el.querySelector('.fc-title').innerHTML = info.event.extendedProps.content.replace(/\n/g, '<br>');
  },
  eventResizeStop: function(info) {
    // 修改事件的扩展属性
    info.event.setExtendedProp('content', 'event content\nis now not the\nsame anymore');
    // v4+会自动检测事件属性变化并重新渲染，无需手动调用updateEvent
  }
});
calendar.render();

这样调整后，用户修改事件时长后，事件内容就会自动更新成你期望的多行内容啦。

内容的提问来源于stack exchange，提问作者David Dal Busco