How can I refresh calendar from outside this script?

Question

I need to reload async the calendar (fullcalendar 4) from a button outside the calendar, to get the events entered in the database

Events made from another application

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
      selectable: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },

      select: function(info) {
        alert('selectado ' + info.startStr + ' to ' + info.endStr);
      },

      events: {
        url: 'cal',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block';
        }
      },

    });

    calendar.render();

  });

I can't reload this calendar with a button outside of this script

how do you get your events ? what type of event source are you using ? — François Huppé, Aug 05 '19 at 00:43

score 1 · Accepted Answer · answered Aug 05 '19 at 01:39

You could use the refetchEvents method. It refetches events from all sources and rerenders them. Use it like that:

calendar.refetchEvents();

Ref: https://fullcalendar.io/docs/Calendar-refetchEvents

Make sure to put your button listener function inside your DOMContentLoaded function, so you have access to the calendar var.

How can I refresh calendar from outside this script?

1 Answers1