FullCalendar(v6)：eventContent与eventDidMount哪个更适合添加事件图标？

eventContent是FullCalendar官方专门用来自定义事件内容的API，比eventDidMount更适合你的需求——后者主要是给事件DOM挂载完成后做后续操作（比如加点击监听）的，不是用来构建初始内容的。

解决eventContent丢失时间/圆点的问题 #

你之前遇到时间、圆点消失，是因为自定义时完全替换了默认的内容结构。正确的做法是保留默认的时间、圆点部分，把图标插在标题左边，代码示例如下：

eventContent: function(info) {
  // 创建图标元素
  const iconEl = document.createElement('img');
  iconEl.src = '你的图标地址';
  iconEl.style.width = '16px';
  iconEl.style.height = '16px';
  iconEl.style.marginRight = '4px';
  
  // 获取FullCalendar默认生成的事件内容（包含时间、圆点、标题）
  const defaultContent = info.defaultContent;
  
  // 把图标和默认内容拼在一起
  const wrapper = document.createElement('div');
  wrapper.appendChild(iconEl);
  // 处理默认内容的两种情况：文本或DOM元素
  if (typeof defaultContent === 'string') {
    wrapper.innerHTML += defaultContent;
  } else {
    wrapper.appendChild(defaultContent);
  }
  
  return { domNodes: [wrapper] };
}

这样既保留了原本的时间、圆点样式，又能在标题左侧显示图标。

说说eventDidMount的用法（不推荐用来加图标） #

如果非要用eventDidMount，el参数就是当前事件对应的DOM容器，你可以直接往里面插图标：

eventDidMount: function(info) {
  const iconEl = document.createElement('img');
  iconEl.src = '你的图标地址';
  iconEl.style.width = '16px';
  iconEl.style.height = '16px';
  iconEl.style.marginRight = '4px';
  
  // 在事件内容最前面插入图标
  info.el.insertBefore(iconEl, info.el.firstChild);
}

但这种方式有两个问题：

• 事件重新渲染（比如切换视图、更新事件）时，图标可能需要重新添加，不如eventContent自动同步
• 直接操作DOM容易打乱FullCalendar的内部样式布局

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