How can I resolve fullCalendar is not a function TypeError error?

I am instantiaing a calendar in my application using FullCalendar, and even though I can see the calendar on my webpage, I cannot execute the fullCalendar() function. It gives me a TypeError saying jquery.js:4050 jQuery.Deferred exception: calendarEl.fullCalendar is not a function TypeError: calendarEl.fullCalendar is not a function

Here is the code:

'use strict';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import 'fullcalendar';

export default class CalendarDisplay {
  constructor() {
    this.name = 'CalendarDisplay';
    console.log('CalendarDisplay');

    var calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin,timeGridPlugin],
      initialView: "timeGridWeek",
      headerToolbar : {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      allDaySlot: false,
      slotEventOverlap: false,
      scrollTime: '08:00:00',

      events: [
        {
          title: 'All Day Event',
          start: '2021-05-24',
        },
        {
          title: 'Long Event',
          start: '2021-05-24T09:00:00',
          end: '2021-05-24T24:00:00'
        }
      ]
    
    });

    calendar.render();

    calendarEl.fullCalendar({
      viewRender: function(view, element) {
          console.log("The view's title is " + view.intervalStart.format());
          console.log("The view's title is " + view.name);
      }
  });


    
  }
}

Answer

You seem to be getting mixed up between modern fullCalendar and the syntax for the older jQuery-based versions. .fullCalendar() was the way to run methods in v3 and below. With v5 if you want to call a method you do it directly.

But I think you don’t need this separate call after rendering the calendar anyway. You seem to be trying to set what happens when the view is changed. That can be set in your initial options, without a separate call.

The other issue as well though is that viewRender no longer exists in v5. It’s been replaced by the standardised view render hooks.

So actually you can achieve your goal this way:

'use strict';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import 'fullcalendar';

export default class CalendarDisplay {
  constructor() {
    this.name = 'CalendarDisplay';
    console.log('CalendarDisplay');

    var calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin,timeGridPlugin],
      initialView: "timeGridWeek",
      headerToolbar : {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      allDaySlot: false,
      slotEventOverlap: false,
      scrollTime: '08:00:00',

      events: [
        {
          title: 'All Day Event',
          start: '2021-05-24',
        },
        {
          title: 'Long Event',
          start: '2021-05-24T09:00:00',
          end: '2021-05-24T24:00:00'
        }
      ]
      viewDidMount: function(view, el) //view render hook for didMount
      {
        console.log("The view's title is " + view.currentStart.toISOString());
        console.log("The view's title is " + view.title);
      }
    });

    calendar.render();

    calendarEl.fullCalendar({
      viewRender: function(view, element) {
      }
  });
  }
}