FullCalendar 6.1.5如何实现每行仅显示一个事件（横向排列）？

问题说明 #

使用FullCalendar 6.1.5开发日历，要求每行仅显示一个事件（横向排列）：即使事件A始于26日、事件B始于27日，B事件也必须位于下一行，不受事件起止日期影响。此前尝试修改事件CSS边距、使用旧版钩子（如已废弃的eventRender）、创建隐形事件、修改事件宽度等方法均无效。

可行解决方案 #

结合FullCalendar 6.x支持的钩子与自定义CSS，强制每个事件独占一行：

1. 添加自定义CSS样式 #

覆盖FullCalendar默认的事件布局，让每个事件块独占单元格内的一行：

/* 强制日历单元格内的事件容器不浮动，独占一行 */
.fc-daygrid-event-harness {
  display: block !important;
  margin-bottom: 8px !important; /* 可选：添加行间距优化视觉 */
}

/* 让事件块占据单元格的可用宽度 */
.fc-daygrid-event {
  width: 100% !important;
  float: none !important;
}

2. 调整日历配置（添加eventDidMount钩子） #

在日历初始化配置中加入eventDidMount钩子，确保每个事件元素的布局符合要求，同时关闭事件重叠：

if ($("#calendariotarefas").length) {
  var tasks = retorno.tasks;
  var calendar_events = [];
  
  tasks.forEach(function (element) {
    var eventClass      = "";
    var eventColorClass = element.eventColorClass;
    var task = {
      id: element.idtarefa,
      title: element.title,
      start: new Date(element.start),
      end: new Date(element.end),
      classNames: [eventClass,eventColorClass]
    }
    calendar_events.push(task);
  });
  
  var calendarEl = document.getElementById('calendariotarefas');
  
  calendar = new FullCalendar.Calendar(calendarEl, {
    slotEventOverlap: false,
    eventOverlap: false, // dayGrid视图下关闭事件重叠
    initialView: 'dayGridWeek',
    headerToolbar: {
      left: 'prev,today,next',
      center: 'title',
      right: 'dayGridWeek,dayGridMonth'
    },
    buttonText: {
      today: 'Hoje',
      month: 'Mês',
      week: 'Semana'
    },
    views: {
      dayGridWeek: {
        titleFormat: { year: 'numeric', month: 'long' },
      }
    },
    eventClick: function(info) {
      modalTarefa( idprojeto, info.event.id, 1 );
    },
    stickyFooterScrollbar: true,
    locale: 'br',
    displayEventTime: false,
    // 添加6.x支持的eventDidMount钩子，确保事件布局正确
    eventDidMount: function(info) {
      info.el.style.display = 'block';
      info.el.style.width = '100%';
    },
    events: calendar_events
  });
  calendar.render();
}

3. 关键说明 #

• FullCalendar 6.x中eventRender已被废弃，替代的有效钩子是eventDidMount，之前的无效尝试大概率是误用了旧版钩子。
• 通过修改fc-daygrid-event-harness（事件外层容器）的display属性，可强制每个事件容器在单元格内换行，实现每行一个事件的核心需求。

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