Fullcalendar：如何在timeGrid视图中将事件按行展示？

需求说明 #

在后台系统用FullCalendar展示预订数据时，timeGridWeek周视图的默认显示与dayGridMonth月视图（每日事件按行展示）不协调。需要实现：同一时间段的多个预订显示为独立条目，每个事件占据单独行（小时单元格自动垂直扩展），忽略原结束时间，仅以开始时间为准。

解决方案（适配新版FullCalendar） #

通过配置项调整、事件数据处理+CSS优化实现目标效果：

1. 核心配置修改 #

开启垂直堆叠相关配置，强制同时间段事件不横向重叠，自动扩展行高：

document.addEventListener("DOMContentLoaded", function (event) {
  let calendarEl = document.getElementById('calendar');
  let now = new Date();

  if (calendarEl) {
    let calendar = new FullCalendar.Calendar(calendarEl, {
      views: {
        timeGrid: {
          type: 'timeGrid',
          expandRows: true,
          allDaySlot: false,
        }
      },
      timeZone: 'UTC',
      slotEventOverlap: false, // 禁止事件横向重叠，强制垂直排列
      eventMaxStack: 1, // 限制横向堆叠数，超过则垂直下移
      eventMinHeight: 60, // 设置事件最小高度，保证条目清晰
      expandRows: true, // 自动扩展行高容纳所有事件
      selectable: false,
      initialView: 'timeGridWeek',
      themeSystem: 'bootstrap',
      initialDate: now,
      eventDisplay: 'block',
      editable: false,
      // 统一处理事件结束时间，忽略原结束时间，仅保留开始时间维度
      eventDataTransform: function(eventData) {
        const start = new Date(eventData.start);
        // 将结束时间设为开始时间+1分钟，确保事件有效且仅显示为单行条目
        eventData.end = new Date(start.getTime() + 60000);
        return eventData;
      },
      events: [
        {
          title: 'Event 1',
          start: '2023-09-05T03:00:00',
          end: '2023-09-05T04:30:00',
          className: 'test'
        },
        {
          title: 'Event 2',
          start: '2023-09-05T03:00:00',
          end: '2023-09-05T04:30:00',
          className: 'test'
        },
        {
          title: 'Event 3',
          start: '2023-09-05T03:00:00',
          end: '2023-09-05T04:30:00',
          className: 'test'
        },
        {
          title: 'Event 4',
          start: '2023-09-05T03:00:00',
          end: '2023-09-05T04:30:00',
          className: 'test'
        },
      ],
      stickyFooterScrollbar: 'false',
      height: 'auto',
      buttonIcons: {
        prev: 'chevron-left',
        next: 'chevron-right',
      },
      headerToolbar: {
        left: 'title',
        right: 'dayGridMonth,timeGridWeek prev,today,next'
      },
      eventContent: function (info) {
        return {html: info.event.title};
      },
    });
    calendar.render();
  }
});

2. CSS样式优化 #

添加以下CSS，确保事件占满单元格宽度，上下间距均匀：

.fc-timegrid-event {
  width: 98% !important;
  margin: 3px auto !important;
  border-radius: 4px;
}

关键配置说明 #

• slotEventOverlap: false：禁止同时间段事件横向并排，强制垂直堆叠
• eventMaxStack: 1：限制同一时间段内事件的横向堆叠数量，确保超过1个时自动垂直排列
• eventMinHeight: 60：设置事件最小高度，避免条目过窄
• eventDataTransform：统一修改事件结束时间，忽略原结束时间，让事件仅以开始时间为基准显示为固定高度条目
• expandRows: true：让日历自动扩展对应小时行的高度，容纳所有垂直堆叠的事件

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