FullCalendar 是一個流行的 JavaScript 事件日歷庫。要在 FullCalendar 中實現事件的拖拽和調整大小功能，你需要遵循以下步驟：
<!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 中看到事件，并且可以通過拖拽和調整大小來修改事件的時間。當事件的時間發生變化時，將彈出一個提示框顯示更新后的時間。你可以根據需要自定義這些回調函數以實現更復雜的功能。
