在 FullCalendar 中,当日期发生变化(例如,用户点击了日历上的上一个月、下一个月按钮,或者切换到不同的日期范围时),可以通过监听特定的回调函数来触发事件。具体取决于你使用的 FullCalendar 版本,回调函数的名称可能会有所不同。
在较新版本的 FullCalendar(v4 和更高版本)中,你可以监听 datesSet 回调函数。这个函数会在 FullCalendar 的日期范围被设置或更改时触发。
以下是一个示例,展示了如何在 FullCalendar 的 datesSet 回调中触发事件:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// ... 其他 FullCalendar 配置 ...
datesSet: function(viewInfo) {
// viewInfo 包含有关当前视图的信息,如日期范围等
var start = viewInfo.start; // 当前视图开始的日期
var end = viewInfo.end; // 当前视图结束的日期
// 在这里触发你的事件处理逻辑 假设你使用了moment.js 插件
console.log('日期范围已更改:', start.format(), '-', end.format());
//可以在这里发送请求来更新界面或执行其他操作
}
});
calendar.render();
});
请注意,上面的示例假设你正在使用 FullCalendar 的较新版本,并且可能已经包含了 moment.js 作为日期库。如果你使用的是不同的日期库(如 Luxon),则获取和格式化日期的方法可能会有所不同。
如果你使用的是 FullCalendar 的旧版本(v3 或更早),那么回调函数的名字可能会有所不同。在 v3 中,你可能需要监听 viewRender 回调函数,并检查 view 对象的 start 和 end 属性来获取日期范围。但是请注意,viewRender 在每次视图渲染时都会触发,而不仅仅是日期范围更改时。因此,你可能需要添加一些额外的逻辑来确保你的事件处理逻辑只在日期范围实际更改时触发。