要自定义 FullCalendar 的视图和布局，您需要遵循以下步骤：
引入依赖文件：在 HTML 文件中，引入 FullCalendar 的 CSS 和 JavaScript 文件。您还需要引入 jQuery 和 moment.js，因为 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=https://www.mykuaidi.com/static/image/nopic320.png>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 文档。
自定义样式：要更改 FullCalendar 的外观，您可以在 CSS 文件中覆盖默认样式。例如，要更改日历单元格的背景颜色，您可以添加以下样式：.fc .fc-row .fc-content-skeleton { background-color: #f0f0f0;}这只是一个简单的自定义示例。您可以根据需要进行更多自定义，以满足您的项目需求。
