FullCalendar时间网格拖拽优化：解决snapDuration与slotDuration不匹配时的跳跃问题

FullCalendar作为一款功能强大的日历组件库，其时间网格视图(timegrid)在日程管理系统中应用广泛。在实际开发中，当设置snapDuration(吸附间隔)与slotDuration(时间槽间隔)不同时，用户可能会遇到事件拖拽不流畅的问题。

问题现象

当配置snapDuration为15分钟而slotDuration为30分钟时，用户拖拽事件会出现明显的跳跃现象。具体表现为：

• 鼠标移动与事件位置不同步
• 事件位置以不规则间隔跳动（上移30分钟，下移15分钟等）
• 操作体验不流畅

技术分析

问题根源在于时间网格列(TimeGridCols)组件中的位置计算逻辑存在缺陷。在原始代码中，当计算吸附位置时，对于部分时间段的处理不正确，导致最终计算出的时间点不符合预期。

关键计算公式错误在于：

const snapIndex = slatIndex + localSnapIndex * snapsPerSlot

这会导致当用户在不同时间槽之间移动时，计算出的吸附点索引不正确。

解决方案

修正后的计算公式应为：

const snapIndex = slatIndex * snapsPerSlot + localSnapIndex

这一修改确保：

1. 正确计算每个时间槽内的吸附点数量
2. 保持鼠标位置与事件位置的同步
3. 实现平滑的拖拽体验

实现原理

1. slatIndex：当前所在时间槽的索引
2. snapsPerSlot：每个时间槽包含的吸附点数量（如30分钟槽包含2个15分钟吸附点）
3. localSnapIndex：当前时间槽内的局部吸附点索引

通过将时间槽索引乘以每槽吸附点数，再加上局部吸附点索引，可以准确计算出全局吸附点位置，从而得到正确的时间点。

实际效果

修复后：

• 事件移动与鼠标位置保持同步
• 15分钟间隔的吸附效果平滑准确
• 用户体验显著提升

总结

FullCalendar时间网格视图的这一修复解决了snapDuration与slotDuration不匹配时的拖拽问题，为开发者提供了更灵活的配置选项，同时保证了用户操作的流畅性。理解这一修复有助于开发者更好地定制日历组件的时间精度和交互体验。