FullCalendar 是一款基于 JavaScript 的日歷庫,支持事件拖拽功能。要實現事件拖拽,你需要按照以下步驟操作:
<!-- 引入 FullCalendar 的樣式表 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.css" />
<!-- 引入 FullCalendar 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.js"></script>
<div id="calendar"></div>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true, // 允許拖拽和縮放事件
eventResizableFromStart: true, // 從事件開始的地方拖拽
eventDraggable: true, // 允許拖拽事件
events: [
{
title: '事件1',
start: '2022-08-01'
},
{
title: '事件2',
start: '2022-08-02'
}
]
});
calendar.render();
});
在上面的代碼中,我們設置了 editable: true
,eventResizableFromStart: true
和 eventDraggable: true
,以啟用事件的拖拽、縮放功能。你還可以通過修改這些選項來控制事件的拖拽行為。
現在,你可以在日歷上拖拽事件了。如果你想要自定義拖拽行為,可以查閱 FullCalendar 的官方文檔,了解更多關于事件拖拽的配置選項:https://fullcalendar.io/docs/event-draggable