FullCalendar v3 如何禁用reserved状态指定事件的拖拽功能

FullCalendar v3 中事件的editable属性会在事件初始化、渲染前就完成拖拽、调整大小相关交互的绑定，eventRender回调触发时交互逻辑已经挂载完毕，此时直接修改event对象的editable属性不会生效。

有两种可行实现方式：

1. 提前处理事件数据（最优方案） #

在事件数据加载完成后、传入FullCalendar配置前，遍历所有事件，给status为reserved的事件手动设置editable: false，从根源上禁用对应交互，性能更高也更稳定。
示例逻辑：

// 假设你从接口拿到的原始事件数组为rawEvents
const processedEvents = rawEvents.map(event => {
  if(event.status === 'reserved') {
    event.editable = false
  }
  return event
})
// 把processedEvents传入FullCalendar的events配置项即可

2. 在eventRender中直接禁用元素交互（适配你现有代码的修改方案） #

因为FullCalendar v3依赖jQuery UI的draggable实现拖拽，你可以直接在eventRender中对目标元素调用拖拽禁用方法，修改后的eventRender代码如下：

// Event render
eventRender: function(event, element) {
    if (event.status == 'reserved') {
        // 禁用元素拖拽
        element.draggable('disable');
        // 如果同时需要禁止调整事件时长，也可以加上这句
        element.resizable('disable');
        element.css({
            'background': 'lemonchiffon',
        });
    }else if(event.status == 'available'){
        element.css({
            'background': 'lightgreen',
        });
    }

    if(event.gap_beetween_slot === '0'){
        $(element).find('.fc-resizer').remove();
    }
    $(element).find('.fc-title').html(event.title);
}

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