FullCalendar事件调整大小异常：非0时间的start/end无法调整

我之前也踩过FullCalendar调整大小的类似坑，咱们一步步拆解解决这个问题：

核心问题回顾 #

当给FullCalendar事件的start和end字段设置非00:00:00的具体时间时，事件无法调整大小；只有当时间部分为00:00:00（即全天事件）时，调整功能才正常可用。

可能的原因及解决方案 #

1. 最容易踩的坑：allDay字段设置错误 #

FullCalendar对全天/非全天事件的区分非常严格：

• 如果事件是非全天（带具体时间），必须明确设置allDay: false
• 如果误将allDay设为true，哪怕你给了具体时间，FullCalendar也会把它当作全天事件处理，此时调整大小的逻辑是按天维度，而非小时维度，就会出现你遇到的异常。

正确的非全天事件示例：

{
  title: '下午团队同步会',
  start: '2024-05-20T14:00:00',
  end: '2024-05-20T16:00:00',
  allDay: false, // 必须显式设置，不能省略！
  editable: true
}

2. 检查end时间的有效性 #

确保end时间严格晚于start时间，并且格式统一（推荐用ISO 8601格式：YYYY-MM-DDTHH:mm:ss）。如果end时间和start相同、格式不匹配，或者时间精度冲突，FullCalendar会无法识别事件时长，直接禁用调整大小功能。

3. 确认全局编辑配置 #

检查你的FullCalendar全局配置，确保开启了时长编辑权限：

$('#calendar').fullCalendar({
  // ...其他配置
  editable: true, // 全局允许事件编辑（包括拖动、调整大小）
  eventDurationEditable: true, // 显式允许调整事件时长（默认是true，但显式设置更保险）
  // ...其他配置
});

注意：单个事件如果设置了durationEditable: false，会覆盖全局配置，所以要排查所有事件对象里有没有这个字段。

4. 版本兼容性与时间精度匹配 #

如果你用的是FullCalendar v3或更早版本，非全天事件的调整大小需要注意时间槽精度：

• 确保slotDuration（日历时间槽的最小间隔）和事件的时间精度匹配。比如你的slotDuration是'00:30:00'，那事件的start和end最好按30分钟倍数设置，避免因无法对齐时间槽导致无法调整。

5. 排查自定义逻辑干扰 #

如果你有自定义的eventRender回调、事件修改逻辑，可能无意中修改了事件的可编辑属性。可以暂时注释掉这些自定义代码，测试问题是否消失，来确认是否是自定义逻辑导致的冲突。

完整可工作示例 #

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: "today add_event",
      center: "prev title next",
      right: "month,basicWeek,basicDay"
    },
    eventOrder: "start",
    editable: true,
    eventDurationEditable: true,
    eventLimit: true,
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
      // 给模态框赋值时确保格式正确
      $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DDTHH:mm:ss'));
      $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DDTHH:mm:ss'));
      $('#ModalAdd').modal('show');
    },
    // 示例事件
    events: [
      {
        title: '可调整的非全天会议',
        start: '2024-05-20T10:00:00',
        end: '2024-05-20T12:00:00',
        allDay: false,
        editable: true
      },
      {
        title: '全天培训',
        start: '2024-05-21',
        end: '2024-05-22',
        allDay: true,
        editable: true
      }
    ]
  });
});

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