FullCalendar 是一個流行的 JavaScript 事件日歷庫，可以輕松地將其與后端數據進行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar with Backend Data</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 并配置事件源。這里我們使用一個名為 fetchEvents 的函數從后端獲取事件數據：document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: fetchEvents
});
calendar.render();
});
fetchEvents 函數，該函數負責從后端 API 獲取事件數據。這里我們使用 Fetch API 發送請求，你也可以使用其他庫（如 jQuery 或 Axios）實現類似功能。async function fetchEvents(info, successCallback, failureCallback) {
try {
const response = await fetch('https://your-backend-api.com/events');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const events = await response.json();
successCallback(events);
} catch (error) {
console.error('There was a problem fetching events:', error);
failureCallback(error);
}
}
/events），該端點返回一個包含事件數據的 JSON 數組。事件對象應該包含 id, title, start 和 end 屬性。例如：[
{
"id": 1,
"title": "Event 1",
"start": "2022-01-01T10:00:00",
"end": "2022-01-01T12:00:00"
},
{
"id": 2,
"title": "Event 2",
"start": "2022-01-02T14:00:00",
"end": "2022-01-02T16:00:00"
}
]
完成以上步驟后，FullCalendar 將從后端 API 獲取事件數據并顯示在日歷中。你還可以根據需要自定義事件的樣式、行為和交互。更多關于 FullCalendar 的信息和文檔，請訪問官方網站：https://fullcalendar.io/
