FullCalendar拖拽放置事件时如何设置并同步后端返回的事件ID

核心逻辑说明 #

• 拖拽外部事件进入日历后，会触发eventReceive钩子，该钩子参数info.event就是刚创建的日历事件实例
• 后端处理完事件数据生成唯一ID后，会在AJAX响应中返回这个ID
• 直接调用FullCalendar Event实例提供的setId()方法，即可完成事件ID的更新

现有代码的问题点 #

• 同时重复发起了jQuery AJAX和原生fetch两个请求，功能冗余
• fetch请求的body直接传入普通对象，未做格式转换，后端无法正确解析
• 拿到后端返回的ID后没有执行更新事件ID的操作
• 事件点击修改标题时硬编码了查询id:'a'的事件，和实际点击的事件不匹配

修正后的实现代码 #

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'zh-cn',
    events: [
        {
          id: 'a',
          title: 'testing',
          start: '2021-03-27'
        }
    ],
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    customButtons: {
        add_event: {
            text: 'Add',
            click: function() {
                alert();
            }
        }
    },
    editable: true,
    droppable: true, // 允许外部元素拖入日历
    drop: function(arg) {
        // 勾选移除拖入事件的选项时，从外部列表中删除对应元素
        if (document.getElementById('drop-remove').checked) {
            arg.draggedEl.parentNode.removeChild(arg.draggedEl);
        }
    },
    eventReceive: function(info) {
        // 整理要传给后端的事件数据，刚拖入的事件可不传临时ID，由后端生成正式ID
        var eventData = {
            title: info.event.title,
            start: info.event.start,
            end: info.event.end,
            description: info.event.description,
        };

        // 仅发起一次jQuery AJAX请求即可
        $.ajax({
            url: '/home/update_event/',
            method: 'POST',
            data: eventData,
            // 前后端约定响应格式为 { code: 200, eventId: "后端生成的唯一ID" }
            success: function(res) {
                // 后端返回成功后，更新当前事件的ID
                if (res.code === 200) {
                    info.event.setId(res.eventId);
                    console.log('事件ID更新成功', info.event.id);
                }
            },
            error: function(err) {
                console.error('请求后端生成事件ID失败', err);
            }
        });
    },
    datesRender: function(info) {
        console.log(info)
    },
    eventClick: function(calEvent) {
        console.log(calEvent)
        var title = prompt('name:', calEvent.event.title, { buttons: { Ok: true, Cancel: false} });
        if (title === 'x' || title === 'X') {
            var event = calendar.getEventById(calEvent.event.id);
            event.remove()
        } else {
            if (title) {
                // 直接更新当前点击的事件标题，无需硬编码查询固定ID的事件
                calEvent.event.setProp('title', title);
            }
        }
    }
});
calendar.render();
storeCalendar = calendar
$('#save').click(() => {
    console.log(calendar.getEvents())
})

额外注意事项 #

• 前后端需要提前约定好响应格式，确保前端能稳定拿到后端生成的事件ID
• 如果外部列表的事件自带临时ID，可先保留临时ID做操作关联，等后端返回正式ID后再替换，避免ID冲突
• 事件ID更新后，后续对该事件的拖拽、编辑、删除操作，通过getEventById()都能正常获取到对应实例

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