如何使用fullcalendar实现多日历视图

FullCalendar 是一个流行的 JavaScript 事件日历库，支持多日历视图。要使用 FullCalendar 实现多日历视图，请按照以下步骤操作：

1. 首先，确保你已经在项目中安装并引入了 FullCalendar 的相关文件。你可以通过 CDN 或者 npm 来安装 FullCalendar。这里以 npm 为例：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

2. 在 HTML 文件中创建一个容器元素，用于存放 FullCalendar：

3. 在 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。你可以根据需要添加更多的视图和事件。

注意：请确保将示例代码中的日期更改为你所需的日期。