阅读量:0
FullCalendar 是一个流行的 JavaScript 事件日历库，支持多日历视图。要使用 FullCalendar 实现多日历视图，请按照以下步骤操作：
- 首先，确保你已经在项目中安装并引入了 FullCalendar 的相关文件。你可以通过 CDN 或者 npm 来安装 FullCalendar。这里以 npm 为例：
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction - 在 HTML 文件中创建一个容器元素，用于存放 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> - 在 main.js 文件中初始化 FullCalendar，并设置多日历视图：
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(); }); 在这个示例中，我们创建了一个包含三种视图（月、周、日）的 FullCalendar。你可以根据需要添加更多的视图和事件。
注意：请确保将示例代码中的日期更改为你所需的日期。
