使用 jQuery 实现的完整日历答案

【问题标题】：Full Calendar implemented using jQuery使用 jQuery 实现的完整日历
【发布时间】：2021-03-26 11:47:38
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

您需要向 fullCalendar 构造函数提供 DOM 元素，而不是 jQuery 对象。它们不是同一件事。只需按照演示，很简单：fullcalendar.io/docs/initialize-globals。你不需要 jQuery。
好的.....但是我正在尝试使用 jQuery 来缓解问题，但它也无法正常工作，所以即使我使用他们使用它的方式我也无法使用jQuery的选择器
I'm trying to use jQuery to ease stuff out...当然，jQuery 有时对此很有用。但在这种情况下，它实际上并没有实现任何有用的东西。它只是给你带来了问题。 even if I used the way they using it I'm not able to use the selectors of jQuery ...在上面的代码中，您需要这些做什么？再次它没有用。附言“jQuery 的选择器”实际上是 CSS 选择器（除了一些额外的 jQuery 为边缘情况引入的选择器），因此如果您愿意，实际上可以使用与 document.querySelector 相同的选择器，而不是 document.getElementById
您甚至不需要initialView: 'dayGridMonth'，因为这已经是默认设置了！这就是启动和运行基本日历所需的全部内容：codepen.io/ADyson82/pen/bGgEPPK - 我使用了 document.querySelector 而不是 document.getElementById，因此您可以使用与 jQuery 中相同的“选择器”。
呃，我肯定回答了这个问题。答案是“不要为此使用 jQuery，它没有用”。 fullCalendar 需要一个 DOM 元素，所以给它一个 DOM 元素。很简单。

标签： javascript jquery fullcalendar fullcalendar-5

【解决方案1】：

FullCalendar 在其构造函数中接受 Element object。它不接受 jQuery 对象。您不能以您在代码中显示的方式使用 jQuery 对象。在这种情况下，jQuery 不会给您任何优势。（这并不妨碍您在页面的其他地方使用 jQuery，只是不能使用 jQuery 对象来初始化日历。）

获取Element对象的方法：

如fullCalendar introductory guide 所示使用document.getElementById - 例如document.getElementById("calendar");
使用document.querySelector - 例如document.querySelector('#calendar')
如果出于某种原因，您确实坚持使用 jQuery 构造函数和对象的不必要开销，那么您可以使用 $("#calendar") 创建一个 jQuery 对象，然后从中获取第一个匹配的 Element 对象使用$("#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

附：如果您想使用 jQuery 对日历元素做更多的事情，在 calendar.render() 行之后，您可以轻松地将 calendarEl 包装在 jQuery 对象中，这样您就可以将 jQuery 函数与它一起用于其他目的。例如：

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

【讨论】：