Full Calendar implemented using jQuery

Question

I'm trying to implement FullCalendar using jQuery

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

but the calendar doesn't show on the browser

-for more information about the FullCalendar:[FullCalendar][1]- [1]: https://fullcalendar.io/

Answer 1

FullCalendar accepts an Element object into its constructor. It does not accept a jQuery object. You cannot use a jQuery object in the way you've shown in your code. jQuery doesn't give you any advantages in this situation. (This does not prevent you from using jQuery elsewhere in your page, you just can't use a jQuery object to initialise the calendar.)

Ways to get an Element object:

1. Use document.getElementById as shown in the fullCalendar introductory guide - eg document.getElementById("calendar");

2. use document.querySelector - eg 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] , and pass that to fullCalendar. But this is inefficient and unnecessary. jQuery is just getting in your way if you do this, without adding any value.

Here's a simple example of initialising the calendar using document.querySelector :

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

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

  calendar.render();
});

Live demo: 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. For example:

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