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
事件提供了回調函數,當用戶點擊日期或事件時,會彈出一個包含相關信息的警告框。你可以根據需要修改這些回調函數以實現自定義的交互操作。