[FullCalendar] 取得日期點擊的事件與事件點擊的事件

在 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 就好了。