fullcalendar failing jquery call

Question

Please forgive my lack of Js/jquery knowledge - hopefully this will be a simple question to answer. I think I must be missing a script or something somewhere

So when the calendar renders

Calendar.prototype.initialRender = function () {
   var _this = this;
   var el = this.el;
   el.addClass('fc');  !fails here

The console tell me 'this' is the fullcalendar correctly

Calendar {loadingLevel: 0, ignoreUpdateViewSize: 0, freezeContentHeightDepth: 0, el: div#calendar, viewsByType: {…}, …}
constraints: Constraints {eventManager: EventManager, _calendar: Calendar}
currentDate: Moment {_isAMomentObject: true, _isUTC: true, _pf: {…}, _locale: Locale, _d: Tue Jun 02 2020 17:03:57 GMT+0100 (British Summer Time), …}
defaultAllDayEventDuration: Duration {_isValid: true, _milliseconds: 0, _days: 1, _months: 0, _data: {…}, …}
defaultTimedEventDuration: Duration {_isValid: true, _milliseconds: 7200000, _days: 0, _months: 0, _data: {…}, …}
el: div#calendar
eventManager: EventManager {calendar: Calendar, stickySource: ArrayEventSource, otherSources: Array(0), jQuery1124013653863441134595: {…}}
freezeContentHeightDepth: 0
ignoreUpdateViewSize: 0
loadingLevel: 0
localeData: Locale {_fullCalendar_weekCalc: "local"}
optionsManager: OptionsManager {_watchers: {…}, _props: {…}, _calendar: Calendar, overrides: {…}, dynamicOverrides: {…}, …}
viewSpecManager: ViewSpecManager {optionsManager: OptionsManager, _calendar: Calendar, viewSpecCache: {…}}
viewsByType: {}
__proto__: Object

but shows 'el' is not a jquery object as needed in order for addClass to work

>el
div#calendar

And trying to call addClass fails

el.addClass('fc')
VM14452:1 Uncaught TypeError: el.addClass is not a function
    at eval (eval at Calendar.initialRender (fullcalendar.self-e9ae1b2c551f2f852ffbb704ecc1e434ee9bbc2cda72ea67fa3631cdace57650.js?body=1:9501), :1:4)
    at Calendar.initialRender (fullcalendar.self-e9ae1b2c551f2f852ffbb704ecc1e434ee9bbc2cda72ea67fa3631cdace57650.js?body=1:9501)
    at Calendar.render (fullcalendar.self-e9ae1b2c551f2f852ffbb704ecc1e434ee9bbc2cda72ea67fa3631cdace57650.js?body=1:9490)
    at HTMLDocument. (calendar.self-38bc6bd2dda3534fb8abc461acd3125490aec51a3e037753ae5812dac1925814.js?body=1:4)
    at Object.t.dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at r.pageLoaded (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6

Why isnt the el attribute a JQuery obect and why can it not call addClass. If I do it manually it is fine

>$('div #calendar').addClass('fc')

jQuery.fn.init [div#calendar.fc, prevObject: jQuery.fn.init(1), context: document, selector: "div #calendar"]

user_1587804 · Answer

It turns out the example on the full calendar page is wrong - I'm so impressed.

initialise globals

The example supplies a DOM element to FullCalendar when you need to supply a jQuery element

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  -- **this needs to be calendarEl = $('#calendar')**

  var calendar = new FullCalendar.Calendar(calendarEl, {plugins: [ 'dayGrid' ]});

  calendar.render();
});

fullcalendar failing jquery call

1 Answers