七、将数据推入 FullCalendar 日历
在实际应用中，通常需要动态地将后端数据加载到日历中。以下列出几种推荐的方式：
7.1 通过 events 的 URL 或函数直接加载
这是最直接且最常用的方式。
URL 方式：直接将 events 设置为后端接口地址，FullCalendar 会自动根据当前视图的日期范围，在 URL 后附加 start 和 end 参数。
events: '/api/events'
函数方式：通过自定义函数获取数据，灵活性更高，可在数据返回前进行预处理。
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/api/events', {
params: {
start: fetchInfo.start.toISOString(),
end: fetchInfo.end.toISOString()
}
}).then(response => {
successCallback(response.data);
}).catch(error => {
failureCallback(error);
});
}
7.2 通过前端操作后实时更新页面
当用户创建、编辑或删除事件后，可调用 refetchEvents 刷新日历数据。
calendar.refetchEvents();
7.3 通过资源视图加载资源
如果使用资源视图（Scheduler），可以通过 resources 的 URL 或函数动态加载资源列表。
resources: '/api/resources'
八、事件拖动与缩放
FullCalendar 支持对已存在的事件进行拖拽移动和缩放调整时长。使用方式如下：
8.1 启用拖拽与缩放
var calendar = new Calendar(calendarEl, {
editable: true, // 开启全局可编辑
eventStartEditable: true, // 允许拖拽移动
eventDurationEditable: true // 允许缩放调整时长
});
8.2 动态禁用/启用交互
可通过 setOption 方法动态修改设置。
calendar.setOption('editable', false); // 禁用拖拽和缩放
8.3 拖拽/缩放逻辑与数据更新
前端拖拽调整日程时间后，通常需要将变更内容同步到后端数据库。
eventDrop: function(info) {
// 获取更新后的时间信息
var event = info.event;
var delta = info.delta; // 时间偏移量
var revertFunc = info.revert; // 回滚函数
// 发送更新请求到后端
axios.put('/api/event/' + event.id, {
start: event.start,
end: event.end
}).catch(function() {
revertFunc(); // 若失败，撤销拖拽
alert('更新失败');
});
}
