FullCalendar 是一個流行的 JavaScript 事件日歷庫，支持多日歷視圖。要使用 FullCalendar 實現多日歷視圖，請按照以下步驟操作：
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
<!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>
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。你可以根據需要添加更多的視圖和事件。
注意：請確保將示例代碼中的日期更改為你所需的日期。
