如何使用原生JavaScript实现FullCalendar创建删除事件后自动刷新

解决方案 #

你可以通过 FullCalendar 内置的事件操作 API 实现无刷新更新视图，不需要手动刷新页面，只需要调整前端 JS 中对应操作的回调逻辑即可：

1. 核心修改逻辑

• 创建事件成功后，调用 calendar.addEvent() 手动添加新事件到日历
• 删除事件成功后，调用 event.remove() 从日历中移除对应事件
• 修正原代码中 fetch 回调的遗漏返回、硬编码域名等小问题

2. 修改后的完整JS代码

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    let model = document.getElementById('my-modal');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone: 'UTC',
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        selectable: true,
        events: {!! $data !!},
        select: function(event) {
            let _token = "{{ csrf_token() }}";
            let data = {
                'title': 'Event 1',
                'start': event.startStr,
                'end': event.endStr,
            };
            fetch("{{ route('booking.calendar.create') }}", {
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': _token,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then(response => response.json())
            .then(data => {
                // 创建成功后添加事件到日历
                calendar.addEvent(data);
                // 清空选中的时间段
                calendar.unselect()
            });
        },
        eventChange: function(e) {
            let _token = "{{ csrf_token() }}";
            let data = {
                'title': 'Event 1',
                'start':e.event.start,
                'end': e.event.end,
            };
            fetch("{{ route('booking.calendar.update', ['id' => '']) }}/" + e.event.id, {
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': _token,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
                .then(response => response.json())
                .catch(function (error){
                    // 后端更新失败时回滚事件位置
                    e.revert();
                    console.log(error);
                })
        },
        eventClick: function(e) {
            e.preventDefault();
            var isDelete = confirm('Do you want to delete this event');

            if(isDelete) {
                let _token = "{{ csrf_token() }}";
                fetch("{{ route('booking.calendar.delete', ['id' => '']) }}/" + e.event.id, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': _token,
                        'Content-Type': 'application/json',
                    }
                })
                    .then(response => {
                        if(response.ok) {
                            // 删除成功后移除事件
                            e.event.remove();
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        }
    });

    calendar.render();
});

额外优化建议

如果需要支持多端同步、或者事件数据存在其他端更新的场景，可以把静态注入的事件改成动态接口拉取：

1. 新增一个获取所有事件的接口，返回 Booking 列表的 JSON 数据
2. 把日历配置里的 events: {!! $data !!} 改成你的接口地址
3. 所有操作成功后调用 calendar.refetchEvents() 即可全量刷新最新事件

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