FullCalendar v5拖拽事件切换月份时可放置区域错位问题求解

问题根因 #

FullCalendar v5的事件拖拽模块在启动时，会预缓存当前视图所有可放置单元格的尺寸、坐标参数，切换月份后视图虽然重绘，但缓存的坐标数据没有同步更新，就会出现放置区域判定错位的问题。

修复方案 #

你可以通过切换月份后强制触发拖拽模块重新计算布局坐标的方式解决，修改后的代码如下：

修复后的JS代码 #

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    // 记录事件拖拽状态
    let isEventDragging = false;

    var calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone: 'UTC',
        editable: true,
        events: 'https://fullcalendar.io/demo-events.json?overload-day',
        // 新增拖拽状态监听
        eventDragStart: () => {
            isEventDragging = true;
        },
        eventDragStop: () => {
            isEventDragging = false;
        }
    });

    calendar.render();
    
    jQuery("body").keydown(function(e) {
        if(e.keyCode == 37) { // left
            calendar.prev();
        }
        else if(e.keyCode == 39) { // right
            calendar.next();
        }
        // 仅在拖拽状态下触发布局重计算
        if (isEventDragging) {
            // 手动触发resize事件，强制拖拽模块更新单元格坐标缓存
            window.dispatchEvent(new Event('resize'));
        }
    });
});

方案说明 #

• 手动触发window的resize事件是无侵入的兼容方案，FullCalendar的拖拽模块默认监听该事件更新布局坐标缓存，无需调用内部私有API，适配所有v5版本。
• 如果你的场景对性能要求较高，也可以通过调用FullCalendar内部hitDragging.updateHitBounds()私有方法更新缓存，缺点是版本迭代时私有API可能变动。

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