在fullcalendar中如何处理用户的交互操作

FullCalendar 是一个流行的 JavaScript 事件日历库。要在 FullCalendar 中处理用户的交互操作，你需要监听和响应相关的事件。以下是一些常见的用户交互操作及其对应的事件：

1. 日期选择：当用户选择一个日期或日期范围时触发。

calendar.on('select', function(info) {   // info.start 和 info.end 分别表示所选日期范围的开始和结束时间 }); 

2. 日期点击：当用户点击一个日期时触发。

calendar.on('dateClick', function(info) {   // info.date 表示被点击的日期 }); 

3. 事件点击：当用户点击一个事件时触发。

calendar.on('eventClick', function(info) {   // info.event 表示被点击的事件对象 }); 

4. 事件拖动：当用户拖动一个事件时触发。

calendar.on('eventDragStart', function(info) {   // 拖动开始时触发 }); calendar.on('eventDragStop', function(info) {   // 拖动结束时触发 }); 

5. 事件调整大小：当用户调整一个事件的大小时触发。

calendar.on('eventResizeStart', function(info) {   // 调整大小开始时触发 }); calendar.on('eventResizeStop', function(info) {   // 调整大小结束时触发 }); 

6. 视图切换：当用户切换视图（例如从月视图切换到周视图）时触发。

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 事件提供了回调函数，当用户点击日期或事件时，会弹出一个包含相关信息的警告框。你可以根据需要修改这些回调函数以实现自定义的交互操作。