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

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