如何使用fullcalendar實(shí)現(xiàn)多日歷視圖

小樊
83
2024-09-03 00:58:00
欄目: 編程語言

FullCalendar 是一個(gè)流行的 JavaScript 事件日歷庫，支持多日歷視圖。要使用 FullCalendar 實(shí)現(xiàn)多日歷視圖，請(qǐng)按照以下步驟操作：

  1. 首先，確保你已經(jīng)在項(xiàng)目中安裝并引入了 FullCalendar 的相關(guān)文件。你可以通過 CDN 或者 npm 來安裝 FullCalendar。這里以 npm 為例：
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
  1. 在 HTML 文件中創(chuàng)建一個(gè)容器元素，用于存放 FullCalendar：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FullCalendar Multiple Calendar View</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.9.0/main.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.9.0/main.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/main.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@5.9.0/main.min.js"></script>
</head>
<body>
    <div id="calendar"></div>
   <script src="main.js"></script>
</body>
</html>
  1. 在 main.js 文件中初始化 FullCalendar，并設(shè)置多日歷視圖：
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    initialView: 'dayGridMonth',
    editable: true,
    selectable: true,
    events: [
      {
        title: 'Event 1',
        start: '2022-01-01',
        end: '2022-01-03',
        allDay: true,
        color: 'red'
      },
      {
        title: 'Event 2',
        start: '2022-01-05',
        end: '2022-01-07',
        allDay: true,
        color: 'blue'
      }
    ]
  });

  calendar.render();
});

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含三種視圖（月、周、日）的 FullCalendar。你可以根據(jù)需要添加更多的視圖和事件。

注意：請(qǐng)確保將示例代碼中的日期更改為你所需的日期。

0 踩