使用 jQuery 實現的完整日歷

Question

我正在嘗試使用 jQuery 實現 FullCalendar

$(document).ready(function() {
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = $('#calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  });
});

但日歷沒有顯示在瀏覽器上

-有關 FullCalendar 的更多信息：[FullCalendar][1]- [1]：https://fullcalendar.io/

Answer 1

FullCalendar 將元素 object 接受到其構造函數中。 它不接受 jQuery object。 您不能按照您在代碼中顯示的方式使用 jQuery object。 jQuery 在這種情況下不會給您任何優勢。 （這並不妨礙您在頁面的其他地方使用 jQuery，只是不能使用 jQuery object 來初始化日歷。）

獲取元素 object 的方法：

1. 使用fullCalendar 介紹指南中所示的document.getElementById - 例如document.getElementById("calendar");

2. 使用document.querySelector - 例如document.querySelector('#calendar')

3. If, for some reason, you really insist on having the unnecessary overhead of using a jQuery constructor and object, then you can create a jQuery object using $("#calendar") and then get the first matched Element object out of it by using $("#calendar")[0] ，並將其傳遞給 fullCalendar。 但這是低效且不必要的。 如果您這樣做，jQuery 只會妨礙您，而不會增加任何價值。

這是一個使用document.querySelector初始化日歷的簡單示例：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.querySelector('#calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
  });

  calendar.render();
});

現場演示： https://codepen.io/ADyson82/pen/bGgEPPK

---

PS If you then wanted to use jQuery to do more things to the calendar element, after the calendar.render() line you could easily wrap the calendarEl in a jQuery object so you can then use jQuery functions with it for other purposes. 例如：

var calendarEl = document.querySelector('#calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
});

calendar.render();

var calendarjQ = $(calendarEl); //wrap calendarEl, which is an Element, in a jQuery object
// then do whatever you want with calendarjQ....