如何在FullCalendar v5事件渲染时修改每个事件的CSS样式？

FullCalendar v5 已废弃 v4 版本中的 eventRender 回调，你可以使用 eventDidMount 钩子实现事件渲染阶段的元素操作，使用方式如下：

基础用法示例 #

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其余日历配置项保持不变
  eventDidMount: function(info) {
    // info.el 为当前已渲染完成的事件DOM元素
    // info.event 为当前事件的完整数据对象

    // 示例1：为事件添加自定义样式类
    info.el.classList.add('my-custom-event');

    // 示例2：根据事件属性修改样式
    if (info.event.extendedProps.urgent) {
      info.el.style.borderColor = '#ff4d4f';
      info.el.style.color = '#ff4d4f';
    }

    // 示例3：插入自定义DOM内容
    const tag = document.createElement('span');
    tag.innerText = '待办';
    tag.style.marginLeft = '4px';
    info.el.querySelector('.fc-event-title').appendChild(tag);
  }
});

补充说明 #

• 如果需要在事件元素被销毁前执行清理逻辑，可以使用配套的 eventWillUnmount 钩子，参数结构和 eventDidMount 完全一致。
• info 对象还包含 info.view（当前日历视图实例）、info.arg（渲染参数）等属性，可覆盖原 eventRender 的所有使用场景。

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