在 FullCalendar 裡如果要設定事件的話，可以透過 events 這個陣列把內容放進去，像是我準備這樣的陣列物件：
var eventList=[
{
id:1,
title: "事件一",
start: "2021-09-05 10:00:00",
end: "2021-09-05 12:00:00",
},
{
id:2,
title: "事件二",
start: "2021-09-06 10:00:00",
end: "2021-09-06 12:00:00",
},
];
塞進去
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
timeZone: 'Asia/Taipei',
events: eventList,
});
calendar.render();
這樣就可以在月曆上顯示既有的事件。
接下來抓取一下點擊月曆上的事件：
calendar.on('dateClick', function(info) {
//取得點擊日期
let date=info.dateStr;
});
取得日期後就可以做一些額外處理，那如果要取得已建立事件的話，就是像這樣：
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: eventList,
eventClick: function(info) {
console.log(info.event)
}
});
calendar.render();
在建立物件的時候綁定 eventClick 就好了。
![[jQuerry Plugin] 好用的響應式 3D cover flow 套件- flipster](/assets/upload/1647747465128_0.jpg)
