要自定義 FullCalendar 的事件渲染方式，你可以使用 eventContent 和 eventDidMount 這兩個回調函數。它們分別用于生成事件的內容和在事件已經掛載到 DOM 后進行操作。
首先，確保你已經安裝并引入了 FullCalendar 庫。接下來，按照以下步驟進行操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar Custom Event Rendering</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.9.0/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script src="app.js"></script>
</body>
</html>
app.js）中初始化 FullCalendar，并設置 events 數據源。然后，使用 eventContent 和 eventDidMount 回調函數自定義事件渲染：document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
id: '1',
title: 'My Event',
start: '2022-01-01'
},
{
id: '2',
title: 'Another Event',
start: '2022-01-02'
}
],
eventContent: function(args) {
// 自定義事件內容
let content = document.createElement('div');
content.innerHTML = `
<div class="custom-event">
<span class="title">${args.event.title}</span>
<span class="date">${args.event.startStr}</span>
</div>
`;
return { html: content.outerHTML };
},
eventDidMount: function(args) {
// 在事件掛載到 DOM 后進行操作
args.el.style.backgroundColor = 'lightblue';
args.el.style.borderRadius = '5px';
}
});
calendar.render();
});
在這個示例中，我們為每個事件創建了一個包含標題和日期的自定義 HTML 結構，并在 eventDidMount 回調函數中設置了背景顏色和邊框半徑。你可以根據需要修改這些值以實現你想要的效果。
注意：這里的代碼示例使用了 FullCalendar v5，但是這些回調函數在其他版本中也應該類似。如果你使用的是不同版本的 FullCalendar，請查閱相應版本的文檔以獲取更多信息。
