如何在FullCalendar v6的事件时间列添加Font Awesome图标？

方法一：使用eventContent钩子（官方推荐，避免DOM操作冲突） #

直接通过FullCalendar提供的eventContent钩子自定义事件内容，这是官方推荐的自定义事件渲染方式，能从根源避免视图切换时的DOM重复修改问题。

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // 你的日历基础配置（示例）
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: '/your-events-api', // 替换为你的事件数据源

    eventContent: function(info) {
      // 仅非全天事件显示带图标的时间
      let timeHtml = '';
      if (info.timeText) {
        timeHtml = `<span class="fc-event-time"><i class="fa fa-clock-o"></i> ${info.timeText}</span>`;
      }
      // 构建事件标题
      const titleHtml = `<span class="fc-event-title">${info.event.title}</span>`;
      
      // 保留官方默认类名，确保原有样式正常生效
      return {
        html: `<div class="fc-event-main-frame">${timeHtml}${titleHtml}</div>`
      };
    }
  });

  calendar.render();
});

核心优势 #

eventContent会在每次事件渲染（包括视图切换、事件更新）时被调用，生成的HTML会被FullCalendar正确整合到DOM中，不会出现重复添加元素或布局错乱的问题，同时保留官方CSS类名维持原有样式。

方法二：使用eventDidMount结合jQuery（兼容原有操作习惯） #

如果坚持使用eventDidMount，必须添加重复检查逻辑，避免视图切换时重复插入图标导致布局异常。

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // 你的日历基础配置（示例）
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: '/your-events-api',

    eventDidMount: function(info) {
      const $timeElement = $(info.el).find('.fc-event-time');
      // 仅当元素内无Font Awesome图标时插入，避免重复添加
      if (!$timeElement.find('.fa').length) {
        $timeElement.prepend('<i class="fa fa-clock-o"></i> ');
      }
    }
  });

  calendar.render();
});

关键注意点 #

• 必须添加!$timeElement.find('.fa').length判断：FullCalendar切换日/周视图时会重新渲染事件，eventDidMount会多次触发，重复插入图标会导致时间元素宽度溢出、内容挤压等问题。
• 确保Font Awesome CSS已正确引入：页面头部需添加Font Awesome的CDN链接或本地CSS文件。

额外优化：全天事件图标适配 #

如果需要给全天事件也添加专属图标，可修改eventContent逻辑：

eventContent: function(info) {
  const iconClass = info.event.allDay ? 'fa-calendar' : 'fa-clock-o';
  let timeHtml = '';
  // 全天事件显示自定义文本+图标，非全天显示时间+图标
  if (info.timeText || info.event.allDay) {
    timeHtml = `<span class="fc-event-time"><i class="fa ${iconClass}"></i> ${info.timeText || '全天'}</span>`;
  }
  const titleHtml = `<span class="fc-event-title">${info.event.title}</span>`;
  
  return {
    html: `<div class="fc-event-main-frame">${timeHtml}${titleHtml}</div>`
  };
}

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