要自定義 FullCalendar 的視圖和布局，您需要遵循以下步驟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar Customization</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script src="custom.js"></script>
</body>
</html>
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'
},
events: [
{
title: 'Event 1',
start: '2022-01-01'
},
{
title: 'Event 2',
start: '2022-01-07',
end: '2022-01-10'
}
]
});
calendar.render();
});
initialView：設置日歷的默認視圖，如 'dayGridMonth'、'timeGridWeek' 或 'timeGridDay'。headerToolbar：自定義日歷頂部的工具欄，包括導航按鈕、標題和視圖切換按鈕。events：添加日歷事件數據，可以是靜態數據或從服務器獲取的動態數據。editable：設置日歷事件是否可編輯。selectable：設置用戶是否可以選擇日期范圍以創建新事件。eventDisplay：設置事件在日歷中的顯示方式，如 'block' 或 'list'。slotDuration：設置時間網格視圖中的時間間隔。更多關于 FullCalendar 的配置選項，請參考官方文檔：FullCalendar 文檔。
.fc .fc-row .fc-content-skeleton {
background-color: #f0f0f0;
}
這只是一個簡單的自定義示例。您可以根據需要進行更多自定義，以滿足您的項目需求。
