GetEvents from FullCalendar

Question

I'm working with Full Calendar I want to create a button that take all the events from the calendar and send them to my database. But when trying to call the getEvents method referenced here from the calendar object, I cannot get it to work. The method doesn't seem to exist. I get undefined method.

Below is a snippet of the initialization of the calendar.

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialDate: '2020-09-12',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      select: function(arg) {
        var title = prompt('Event Title:');
        if (title) {
          calendar.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay
          })
        }
        calendar.unselect()
      },
      eventClick: function(arg) {
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2020-09-01'
        },
        {
          title: 'Long Event',
          start: '2020-09-07',
          end: '2020-09-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2020-09-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2020-09-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2020-09-11',
          end: '2020-09-13'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2020-09-28'
        }
      ]
    });

    calendar.render();

I use the last version of Full Calendar (v5)

When I try to create a button that will get the calendar then retrieve all the events and send it to my database I get error saying that the function doesn't exist.

Here is how I do that :

var calendar = document.getElementById("calendar");

/* I can do that since I have my calendar with the id "calendar"
And then I try use the getEvents function 
*/

var events = calendar.getEvents();
/* Show undefined */

<div id="calendar"></div>

Super Important Note: I realized that the function doesn't exist since I try to apply it to the HTML element and not the FullCalendar JS object. So my question is how can I get a FullCalendar JS Object from the HTML element in order to retrieve the events that the user has saved ??

Answer 1

Your problem is because var calendar = document.getElementById("calendar"); fetches the HTML element into which the rest of the calendar's HTML was added by fullCalendar. It does not fetch the fullCalendar instance which was generated by new FullCalendar.Calendar when you intialised the calendar. It's the latter which exposes the functions to manipulate the calendar or get data from it.

Notice how you already use that object in your code to call fullCalendar's render function, e.g. calendar.render();.

(The HTML element object just contains standard functions found on any HTML element, not anything specific to fullCalendar.)

So in summary you need to use the calendar variable you created from the new FullCalendar... instantiation. If you need access to that outside the scope it was originally declared in (which is the callback of the DOMContentLoaded event handler), then one way round that is to make it a global variable, e.g.

var calendar; //global variable

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

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

Then somewhere else in your code, wherever you need it, you can write

var events = calendar.getEvents();