要自定義 FullCalendar 的事件渲染方式,你可以使用 eventContent
和 eventDidMount
這兩個(gè)回調(diào)函數(shù)。它們分別用于生成事件的內(nèi)容和在事件已經(jīng)掛載到 DOM 后進(jìn)行操作。
首先,確保你已經(jīng)安裝并引入了 FullCalendar 庫(kù)。接下來(lái),按照以下步驟進(jìn)行操作:
<!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,并設(shè)置 events
數(shù)據(jù)源。然后,使用 eventContent
和 eventDidMount
回調(diào)函數(shù)自定義事件渲染: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) {
// 自定義事件內(nèi)容
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 后進(jìn)行操作
args.el.style.backgroundColor = 'lightblue';
args.el.style.borderRadius = '5px';
}
});
calendar.render();
});
在這個(gè)示例中,我們?yōu)槊總€(gè)事件創(chuàng)建了一個(gè)包含標(biāo)題和日期的自定義 HTML 結(jié)構(gòu),并在 eventDidMount
回調(diào)函數(shù)中設(shè)置了背景顏色和邊框半徑。你可以根據(jù)需要修改這些值以實(shí)現(xiàn)你想要的效果。
注意:這里的代碼示例使用了 FullCalendar v5,但是這些回調(diào)函數(shù)在其他版本中也應(yīng)該類似。如果你使用的是不同版本的 FullCalendar,請(qǐng)查閱相應(yīng)版本的文檔以獲取更多信息。