FullCalendar v6.0.2：拖拽事件时如何保留.fc-event-title中的图标？

数据老陈

2026-8-6

解决拖拽事件后未出席图标丢失的问题

核心原因

拖拽移动事件时，FullCalendar会销毁原事件DOM元素，重新生成新的元素展示更新后的事件。如果图标添加逻辑没在重新渲染时触发，或者事件对象的isMissed属性丢失，就会导致图标消失。

具体解决方案

1. 保留拖拽后的`isMissed`属性

在eventDrop回调里手动同步属性，确保拖拽后事件对象依然保留标记状态：

eventDrop: function(info) {
  // 强制保留isMissed属性，避免更新时丢失
  info.event.setExtendedProp('isMissed', info.event.extendedProps.isMissed || false);
  // 若需同步到后端，这里加上AJAX请求，把isMissed参数一起提交
}

同时确保eventRender逻辑在重新渲染时正常执行：

eventRender: function(info) {
  if (info.event.extendedProps.isMissed === true) {
    const icon = "<i class='fas fa-calendar-times pull-right' title='Rendez-vous non honoré'></i>";
    info.el.querySelector('.fc-event-title').insertAdjacentHTML('afterbegin', icon);
  }
}

2. 用`eventContent`替代直接DOM操作（FullCalendar v5+推荐）

如果使用的是FullCalendar v5及以上版本，官方推荐通过eventContent自定义事件内容，让日历自身管理HTML结构，从根源避免DOM丢失问题：

eventContent: function(info) {
  let content = info.event.title;
  if (info.event.extendedProps.isMissed) {
    content = `<i class='fas fa-calendar-times pull-right' title='Rendez-vous non honoré'></i>${content}`;
  }
  return { html: content };
}