FullCalendar非全天事件无法调整大小问题求助

嘿，我之前也踩过FullCalendar这个坑，给你几个实用的排查点和解决方案，应该能帮你搞定：

• 检查事件的时间格式是否规范
  非全天事件（allDay: false）必须包含精确的时分秒信息，比如start: '2024-05-20T10:00:00'和end: '2024-05-20T12:00:00'。如果只传YYYY-MM-DD的纯日期格式，FullCalendar会默认把它当成全天事件处理，自然就没法显示调整图标了。

• 确认全局与事件级别的编辑权限
  首先要确保FullCalendar的全局配置里开了editable: true，这是所有编辑操作（拖拽、调整大小）的基础。另外，每个非全天事件最好单独设置durationEditable: true，避免全局配置被局部规则覆盖。

• 切换到时间视图测试
  月视图（month）默认不会显示非全天事件的调整图标，你得切换到时间网格视图（比如timeGridWeek、timeGridDay）才能看到调整手柄。可以把defaultView设为timeGridWeek试试效果。

• 排查CSS样式冲突
  有时候自定义CSS会把FullCalendar的调整图标（类名fc-event-resizer）给隐藏或者覆盖了。打开浏览器开发者工具，检查事件元素的样式，看看这个类是不是被display: none或者其他样式影响了。

给你一个修正后的代码示例参考：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    editable: true, // 全局开启编辑功能
    defaultView: 'timeGridWeek', // 默认用时间网格周视图
    events: [
      {
        title: '可调整的非全天事件',
        start: '2024-05-20T10:00:00',
        end: '2024-05-20T12:00:00',
        allDay: false,
        durationEditable: true // 允许该事件调整时长
      },
      {
        title: '全天事件',
        start: '2024-05-21',
        end: '2024-05-22',
        allDay: true
      }
    ]
  });
});

另外，你提到设为allDay: true调整后会保持全天状态，这是正常的——全天事件的时间范围是按日期计算的，调整后还是会维持全天属性。如果需要调整后变成非全天，得在eventResize回调里手动修改事件的allDay属性和时间格式，比如用Moment.js处理成带时分秒的时间。

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