91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

FullCalendar怎樣實現事件拖拽

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

FullCalendar 是一款基于 JavaScript 的日歷庫,支持事件拖拽功能。要實現事件拖拽,你需要按照以下步驟操作:

  1. 首先,確保你已經在項目中引入了 FullCalendar 相關的 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 文件中創建一個容器元素,用于承載日歷:
<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();
});

在上面的代碼中,我們設置了 editable: trueeventResizableFromStart: trueeventDraggable: true,以啟用事件的拖拽、縮放功能。你還可以通過修改這些選項來控制事件的拖拽行為。

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

0
城口县| 方正县| 万全县| 永丰县| 庄河市| 锡林郭勒盟| 顺平县| 巴东县| 灌南县| 丹凤县| 黄浦区| 台东市| 囊谦县| 六安市| 靖西县| 晋州市| 正阳县| 江达县| 馆陶县| 霍山县| 云霄县| 蕉岭县| 兴海县| 石柱| 乐东| 新平| 镇坪县| 泽州县| 夏河县| 乌鲁木齐县| 临潭县| 新和县| 九寨沟县| 洛阳市| 嵊泗县| 门源| 肃北| 麟游县| 来安县| 称多县| 台州市|