FullCalendar怎樣實(shí)現(xiàn)事件拖拽

小樊
81
2024-10-12 12:35:14
欄目: 編程語言

FullCalendar 是一款基于 JavaScript 的日歷庫，支持事件拖拽功能。要實(shí)現(xiàn)事件拖拽，你需要按照以下步驟操作：

  1. 首先，確保你已經(jīng)在項(xiàng)目中引入了 FullCalendar 相關(guān)的 CSS 和 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>
  1. 在 HTML 文件中創(chuàng)建一個(gè)容器元素，用于承載日歷：
<div id="calendar"></div>
  1. 初始化 FullCalendar，并啟用事件拖拽功能：
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();
});

在上面的代碼中，我們?cè)O(shè)置了 editable: true，eventResizableFromStart: true 和 eventDraggable: true，以啟用事件的拖拽、縮放功能。你還可以通過修改這些選項(xiàng)來控制事件的拖拽行為。

現(xiàn)在，你可以在日歷上拖拽事件了。如果你想要自定義拖拽行為，可以查閱 FullCalendar 的官方文檔，了解更多關(guān)于事件拖拽的配置選項(xiàng)：https://fullcalendar.io/docs/event-draggable

0 踩