117笔记问答FullCalendar 是一个流行的 JavaScript 事件日历库。要在 FullCalendar 中处理用户的交互操作，你需要监听和响应相关的事件。以下是一些常见的用户交互操作及其对应的事件：
- 日期选择：当用户选择一个日期或日期范围时触发。
calendar.on('select', function(info) {
// info.start 和 info.end 分别表示所选日期范围的开始和结束时间
});
- 日期点击：当用户点击一个日期时触发。
calendar.on('dateClick', function(info) {
// info.date 表示被点击的日期
});
- 事件点击：当用户点击一个事件时触发。
calendar.on('eventClick', function(info) {
// info.event 表示被点击的事件对象
});
- 事件拖动：当用户拖动一个事件时触发。
calendar.on('eventDragStart', function(info) {
// 拖动开始时触发
});
calendar.on('eventDragStop', function(info) {
// 拖动结束时触发
});
- 事件调整大小：当用户调整一个事件的大小时触发。
calendar.on('eventResizeStart', function(info) {
// 调整大小开始时触发
});
calendar.on('eventResizeStop', function(info) {
// 调整大小结束时触发
});
- 视图切换：当用户切换视图（例如从月视图切换到周视图）时触发。
calendar.on('viewSkeletonRender', function(info) {
// 视图渲染完成后触发
});
calendar.on('viewSkeletonDestroy', function(info) {
// 视图销毁前触发
});
要处理这些事件，你需要在创建 FullCalendar 实例时提供相应的回调函数。例如：
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
dateClick: function(info) {
alert('Date clicked: ' + info.dateStr);
},
eventClick: function(info) {
alert('Event clicked: ' + info.event.title);
}
});
calendar.render();
});
在这个例子中，我们为 dateClick 和 eventClick 事件提供了回调函数，当用户点击日期或事件时，会弹出一个包含相关信息的警告框。你可以根据需要修改这些回调函数以实现自定义的交互操作。