FullCalendar 是一個流行的 JavaScript 事件日歷庫,它可以輕松地將交互式日歷添加到網頁中
要使用 FullCalendar,請按照以下步驟操作:
<head>
部分添加以下代碼:<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>
<div id="calendar"></div>
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth", // 初始視圖模式,這里設置為月視圖
events: [
// 示例事件數據
{
title: "我的生日",
start: "2022-08-26",
},
{
title: "會議",
start: "2022-08-27T10:00:00",
end: "2022-08-27T12:00:00",
},
],
});
calendar.render(); // 渲染日歷
});
根據需求自定義 FullCalendar 的配置選項,例如設置日期格式、時間格式、顯示周數等。更多配置選項可以參考官方文檔:https://fullcalendar.io/docs
如果需要與后端進行交互,例如從服務器獲取事件數據或者提交新的事件,可以使用 FullCalendar 的事件源(Event Source)功能。事件源可以是一個 JSON 對象數組、一個函數或者一個 URL,用于向服務器請求事件數據。
通過以上步驟,你就可以在網頁中集成并使用 FullCalendar 了。更多關于 FullCalendar 的高級用法和 API,請參考官方文檔:https://fullcalendar.io/docs