使用 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....