How can i get the fullcalendar v.4.2.0 instance?

Question

So I have a fullCalendar (v.4.2.0) instance in my page (loaded/built on document.ready) and I want to access that fullCalendar instance in other functions to add events dynamically.

Using $('#calendar').fullCalendar('getView') it shows an error that the fullCalendar() method does not exist:

$(...).fullCalendar is not a function

How can I access that instance?

The code that I'm using to generate the calendar is the following:

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'timeGrid', 'dayGrid' ],
        defaultView: 'timeGridWeek', 
        height: 700,
        locale: 'pt',
        allDaySlot: false,
        handleWindowResize: true,
        events: [
            {
                title: 'Teste1', // a property!
                start: '2019-07-23 16:00', 
                end: '2019-07-23 17:00', 
                backgroundColor: '#fcba03',
                borderColor: '#fcba03',
            }
        ]
    });
calendar.render();

score 3 · Accepted Answer · answered Jul 24 '19 at 20:39

Since you are using fullCalendar version 4, it is no longer written as a jQuery plugin, and so jQuery syntax to access the methods cannot be used. Instead, simply refer to your calendar variable (which probably needs to have a wide scope in your application - either global or easily accessible some other way). You'll notice that your existing code already does exactly that when it calls calendar.render();.

Additionally, in the specific case of the "getView" method, this has been replaced simply with a view property which refers to the current view.

For example (see the last line):

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'timeGrid', 'dayGrid' ],
        defaultView: 'timeGridWeek', 
        height: 700,
        locale: 'pt',
        allDaySlot: false,
        handleWindowResize: true,
        events: [
            {
                title: 'Teste1', // a property!
                start: '2019-07-23 16:00', 
                end: '2019-07-23 17:00', 
                backgroundColor: '#fcba03',
                borderColor: '#fcba03',
            }
        ]
    });

calendar.render();

var vw = calendar.view; //get the current view

Reference documentation

Documentation of the view property

Version 3 to Version 4 upgrade guide

score -1 · Answer 2 · answered Jul 24 '19 at 08:27

**Create a config variable like below in js**

uiConfig = {
        calendar: {
          height: 450,
          editable: true,
          eventClick: alertEventOnClick,
          eventDrop: alertOnDrop,
          eventResize: alertOnResize,
          eventRender: eventRender
        }
      };

**defines the above methods in js file**

alertEventOnClick = function (date, jsEvent, view) {}
alertOnDrop = function (date, jsEvent, view) {}
alertOnResize = function (date, jsEvent, view) {}
eventRender = function (date, jsEvent, view) {}

**and in html add below lines of code**

<div ui-calendar="uiConfig.calendar" id="myCalendar" calendar-watch-event="extraEventSignature(event)"
    calendar="myCalendar" data-ng-model="eventSources">
  </div>

**The Following code is another way of accessing calendar**

$('#myCalendar').fullCalendar({
  eventClick: function(event, element) {

    event.title = "CLICKED!";

    $('#calendar').fullCalendar('updateEvent', event);

  }
});

**where Mycalender should be added in HTML like below**

<div ui-calendar="uiConfig.calendar" id="myCalendar"
    calendar="myCalendar" data-ng-model="eventSources">
  </div>

how is any of this relevant, let alone being the accepted answer? OP is clearly asking a question about fullCalendar 4.2, but this jQuery syntax is only valid in fullCalendar 3 or below. See https://fullcalendar.io/docs/upgrading-from-v3 for details. I can't see how this would solve the problem in the question, at all. Not to mention that 99% of the code has nothing to do with the specific issue mentioned - the getView method (which was causing the error) is not referred to at all in this sample! — ADyson, Jul 24 '19 at 20:40

How can i get the fullcalendar v.4.2.0 instance?

2 Answers2