五、交互与事件回调
FullCalendar 提供了丰富的回调函数，用于响应用户的各种操作。
5.1 日期/时间交互回调
日期点击示例：
dateClick: function(info) {
alert('点击了日期: ' + info.dateStr);
// 弹出新增日程对话框
showAddEventDialog(info.date);
}
5.2 事件交互回调
事件点击示例：
eventClick: function(info) {
alert('事件: ' + info.event.title);
// 显示事件详情弹窗
showEventDetail(info.event);
// 阻止默认行为（如跳转）
info.jsEvent.preventDefault();
}
5.3 拖拽缩放回调
事件拖拽后更新后端示例：
eventDrop: function(info) {
// 获取拖拽后的事件数据
var event = info.event;
var newStart = event.start;
var newEnd = event.end;
// 发送 AJAX 请求更新后端
$.ajax({
url: '/api/event/' + event.id,
method: 'PUT',
data: {
start: newStart.toISOString(),
end: newEnd ? newEnd.toISOString() : null
},
error: function() {
// 如果更新失败，撤销拖拽
info.revert();
alert('更新失败，请重试');
}
});
}
5.4 数据加载回调
用途示例：在数据加载时显示加载动画。
loading: function(isLoading) {
if (isLoading) {
$('#loading').show();
} else {
$('#loading').hide();
}
}
5.5 视图和资源回调
datesSet: function(info) {
console.log('日期范围变更:', info.start, '至', info.end);
// 根据日期范围加载数据
loadEvents(info.start, info.end);
}
六、时间轴视图与资源调度
6.1 资源视图概述
FullCalendar 的 Premium 扩展（Scheduler）提供了资源视图功能，适用于会议室预订、人员排班等场景。需要安装 Scheduler 插件并获得许可证。
基本配置示例：
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
let calendar = new Calendar(calendarEl, {
plugins: [resourceTimelinePlugin],
initialView: 'resourceTimelineWeek',
resources: [
{ id: 'a', title: '会议室 A' },
{ id: 'b', title: '会议室 B' },
{ id: 'c', title: '会议室 C' }
],
events: [
{ id: '1', resourceId: 'a', title: '团队会议', start: '2024-01-15T10:00:00', end: '2024-01-15T12:00:00' },
{ id: '2', resourceId: 'b', title: '客户交流', start: '2024-01-15T14:00:00', end: '2024-01-15T15:00:00' }
]
});
6.2 资源相关配置
6.3 资源相关回调
6.4 自定义资源视图时长
当需要自定义资源视图的时长时，可以通过 views 配置实现。
views: {
resourceTimelineCustomWeek: {
type: 'resourceTimeline',
duration: { days: 10 },
buttonText: '10天'
}
}
6.5 资源视图的 visibleRange 定制
对于非标准时长的资源视图，可以使用 visibleRange 配置自定义显示范围。
views: {
resourceTimelineCustomMonth: {
type: 'resourceTimeline',
visibleRange: {
start: '2025-05-01',
end: '2025-06-01'
}
}
}
