使用 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 在其构造函数中接受 Element object。它不接受 jQuery 对象。您不能按照您在代码中显示的方式使用 jQuery 对象。 jQuery 在这种情况下不会给您任何优势。（这不会阻止您在页面的其他地方使用 jQuery，您只是不能使用 jQuery 对象来初始化日历。）

获取元素对象的方法：

使用 document.getElementById as shown in the fullCalendar introductory guide - 例如document.getElementById("calendar");
使用 document.querySelector - 例如document.querySelector('#calendar')
如果出于某种原因，您确实坚持使用 jQuery 构造函数和对象带来不必要的开销，那么您可以使用 [= 创建一个 jQuery 对象14=]，然后使用 $("#calendar")[0] 从中获取第一个匹配的 Element 对象，并将其传递给 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

P.S。如果您随后想使用 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....

使用 jQuery 实现的完整日历

Full Calendar implemented using jQuery

javascript

jquery

fullcalendar

fullcalendar-5