Javascript 使用jQuery实现的完整日历

我正在尝试使用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接受一个新的元素到其构造函数中。它不接受jQuery对象。不能以代码中显示的方式使用jQuery对象。在这种情况下，jQuery不会给您带来任何优势。（这并不妨碍您在页面的其他位置使用jQuery，只是不能使用jQuery对象初始化日历。）

获取元素对象的方法：

如-e.

document.getElementById（“日历”）中所示使用

使用-例如

document.querySelector（“#日历”）

如果出于某种原因，您确实坚持使用jQuery构造函数和对象会带来不必要的开销，那么您可以使用

$（“#日历”）

创建jQuery对象，然后使用

$（“#日历”）[0]

从中获取第一个匹配的

元素

对象，并将其传递给fullCalendar。但这是低效和不必要的。如果您这样做，jQuery只会妨碍您，而不会增加任何价值

下面是一个使用

document.querySelector

初始化日历的简单示例：

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

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

  calendar.render();
});

现场演示：

---

另外，如果您想使用jQuery对calendar元素执行更多操作，则在

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

---

您需要向fullCalendar构造函数提供DOM元素，而不是jQuery对象。它们不是一回事。只需按照演示进行操作，很简单：。这不需要jQuery。好吧。。。。。但是我尝试使用jQuery来简化内容，但它也不起作用，所以即使我使用了他们使用它的方式，我也无法使用jQuery

的选择器，我尝试使用jQuery来简化内容

…当然，jQuery有时也很有用。但在这种情况下，它实际上没有实现任何有用的功能。这只会给你带来麻烦

即使我使用了他们使用它的方式，我也无法使用jQuery的选择器

…在上面的代码中，您需要这些选择器做什么？再说一遍，这也没用。另外，“jQuery选择器”实际上是CSS选择器（除了jQuery为边缘情况引入的一些额外选择器），因此如果您愿意，您可以在

文档中使用相同的选择器。querySelector

，而不是document.getElementById，您甚至不需要

初始视图：“dayGridMonth”

，因为这已经是默认值了！这就是创建并运行基本日历所需的全部内容：-我使用了document.querySelector而不是document.getElementById，因此您可以使用与jQuery中相同的“选择器”。呃，我肯定回答了这个问题。答案是“不要为此使用jQuery，它没有用处”。fullCalendar需要一个DOM元素，所以给它一个DOM元素。简单。