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