FullCalendar 6技术问题：连续事件未完全占满日期列宽度

问题详情 #

仅当事件的起止日期与时段时长不匹配时（如示例中的Team2周度事件），会出现事件宽度偏移、无法占满列宽的问题。

相关JS代码 #

document.addEventListener("DOMContentLoaded", function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, { 
    nowIndicator: true,
    eventOverlap:false,
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    initialDate: new Date(y, m, 2),
    initialView: "timeGridWeek",
    events: [
      {
        title: "Daily Team 1",
        start: new Date(y, m, 2, 7, 00),
        end: new Date(y, m, 2, 7, 20),
        allDay: false
      },
      {
        title: "Weekly Team 2",
        start: new Date(y, m, 2, 7, 20),
        end: new Date(y, m, 2, 8, 20),
        allDay: false
      },
      {
        title: "Sprint review Team 3",
        start: new Date(y, m, 2, 8, 20),
        end: new Date(y, m, 2, 9, 40),
        allDay: false
      },
      {
        title: "Daily Team 2",
        start: new Date(y, m, 3, 7, 00),
        end: new Date(y, m, 3, 7, 30),
        allDay: false
      },
      {
        title: "Daily Team 3",
        start: new Date(y, m, 3, 7, 30),
        end: new Date(y, m, 3, 8, 0),
        allDay: false
      },
      {
        title: "Weekly Team 1",
        start: new Date(y, m, 3, 8, 0),
        end: new Date(y, m, 3, 9, 30),
        allDay: false
      },
    ]
  });

  calendar.render();
});

解决办法 #

问题根源在于FullCalendar默认的时间槽间隔为30分钟，当事件的时长或起止时间无法匹配该间隔时，网格布局的宽度计算会出现偏差。提供两种可行方案：

方案1：调整事件时间对齐默认槽间隔 #

将所有事件的起止时间修改为30分钟的整数倍，确保时长是30分钟的倍数。比如把Daily Team 1的结束时间改为7:30，Weekly Team 2的开始时间改为7:30、结束时间改为8:30，以此类推。

方案2：修改日历时间槽间隔适配事件时长 #

在日历配置中添加slotDuration参数，将时间槽间隔设置为能整除所有事件时长的数值（比如20分钟），这样所有事件都会完美适配网格宽度：

var calendar = new FullCalendar.Calendar(calendarEl, { 
  nowIndicator: true,
  eventOverlap:false,
  slotDuration: '00:20:00', // 新增配置，设置20分钟为一个时间槽
  headerToolbar: {
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
  },
  // 其余配置保持不变
});

内容的提问来源于stack exchange，提问作者K.cyrine