fullcalendar的事件拖拽和調(diào)整大小功能如何實(shí)現(xiàn)

小樊
111
2024-09-03 01:01:13

FullCalendar 是一個(gè)流行的 JavaScript 事件日歷庫(kù)。要在 FullCalendar 中實(shí)現(xiàn)事件的拖拽和調(diào)整大小功能，你需要遵循以下步驟：

  1. 首先，確保你已經(jīng)在項(xiàng)目中引入了 FullCalendar 的相關(guān)文件。你可以通過(guò) 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>
    <!-- 創(chuàng)建一個(gè)容器來(lái)存放日歷 -->
    <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>
  1. 接下來(lái)，在 app.js 文件中初始化 FullCalendar，并啟用事件拖拽和調(diào)整大小功能。將以下代碼添加到 app.js 文件中：
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 設(shè)置日歷的初始視圖
    initialView: 'dayGridMonth',

    // 啟用事件拖拽功能
    editable: true,

    // 啟用事件調(diào)整大小功能
    eventResizableFromStart: true,

    // 設(shè)置日歷的事件數(shù)據(jù)
    events: [
      {
        title: '事件 1',
        start: '2022-01-01'
      },
      {
        title: '事件 2',
        start: '2022-01-07',
        end: '2022-01-10'
      }
    ],

    // 當(dāng)事件被拖拽或調(diào)整大小時(shí)觸發(fā)的回調(diào)函數(shù)
    eventDrop: function(info) {
      alert('事件 "' + info.event.title + '" 的時(shí)間已更新為 ' + info.event.start.toLocaleString());
    },
    eventResize: function(info) {
      alert('事件 "' + info.event.title + '" 的持續(xù)時(shí)間已更新為 ' + info.event.end.toLocaleString());
    }
  });

  // 渲染日歷
  calendar.render();
});

現(xiàn)在，你應(yīng)該可以在 FullCalendar 中看到事件，并且可以通過(guò)拖拽和調(diào)整大小來(lái)修改事件的時(shí)間。當(dāng)事件的時(shí)間發(fā)生變化時(shí)，將彈出一個(gè)提示框顯示更新后的時(shí)間。你可以根據(jù)需要自定義這些回調(diào)函數(shù)以實(shí)現(xiàn)更復(fù)雜的功能。

0 踩