Interacting with FullCalendar in my developer console

Question

I am using the FullCalendar.io in my webpage and am trying to interact with it using my Browser Console.

HTML:

  <p>
    <button id='prev'>prev</button>
    <button id='next'>next</button>
  </p>

  <div id='calendar'></div>

JS:

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      header: false // don't display the default header
    });

    calendar.render();

    document.getElementById('prev').addEventListener('click', function() {
      calendar.prev(); // call method
    });

    document.getElementById('next').addEventListener('click', function() {
      calendar.next(); // call method
    });

  });

In my console if I run calendar.next();, it says calendar.next() is not a function.

Can someone explain why and what is the correct way to interact with the calendar?

I've also tried using

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

But returns the same error.

Answer 1

Make your calendar variable global

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

Then in console type calendar.next();