阅读量:0
FullCalendar 是一个流行的 JavaScript 事件日历库。要在 FullCalendar 中实现事件的拖拽和调整大小功能，你需要遵循以下步骤：
- 首先，确保你已经在项目中引入了 FullCalendar 的相关文件。你可以通过 CDN 或者下载到本地引入。在 HTML 文件中添加以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FullCalendar 示例</title> <!-- 引入 FullCalendar 的 CSS 文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.css"> </head> <body> <!-- 创建一个容器来存放日历 --> <div id="calendar"></div> <!-- 引入 FullCalendar 的 JavaScript 文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.js"></script> <script src="app.js"></script> </body> </html> - 接下来，在
app.js文件中初始化 FullCalendar，并启用事件拖拽和调整大小功能。将以下代码添加到app.js文件中：
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { // 设置日历的初始视图 initialView: 'dayGridMonth', // 启用事件拖拽功能 editable: true, // 启用事件调整大小功能 eventResizableFromStart: true, // 设置日历的事件数据 events: [ { title: '事件 1', start: '2022-01-01' }, { title: '事件 2', start: '2022-01-07', end: '2022-01-10' } ], // 当事件被拖拽或调整大小时触发的回调函数 eventDrop: function(info) { alert('事件 "' + info.event.title + '" 的时间已更新为 ' + info.event.start.toLocaleString()); }, eventResize: function(info) { alert('事件 "' + info.event.title + '" 的持续时间已更新为 ' + info.event.end.toLocaleString()); } }); // 渲染日历 calendar.render(); }); 现在，你应该可以在 FullCalendar 中看到事件，并且可以通过拖拽和调整大小来修改事件的时间。当事件的时间发生变化时，将弹出一个提示框显示更新后的时间。你可以根据需要自定义这些回调函数以实现更复杂的功能。
