"calendar.refetchEvents();" not refreshing events

Question

I am using fullcalendar v4 (https://fullcalendar.io/) and I am trying to delete events when the event is clicked.

When I click on an event, I have this code to delete the event:

    document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'pt',
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
      editable: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },

      // CUSTOM CODE DATABASE

      events: load.php,

      eventClick:function(clickedInfo)
        {
         if(confirm("Are you sure you want to delete this event?"))
         {
          var id = clickedInfo.event.id;
          $.ajax({
           url:"delete.php",
           type:"POST",
           data:{id:id},
           success: function() {

        alert('Deleted!');

       calendar.refetchEvents();
      }
          })
         }
        },


    });
    calendar.render();

  });

The event is getting deleted in the database, so the function works fine, but the events don't refresh and the deleted event is still showing in the calendar. It only disappears when I fully refresh the page, which is not ideal.

Any idea why?

Answer 1

It doesn't look like the calendar object is ever being initialized.

I would try changing your event listener as described in the documentation:

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

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

    calendar.render();
});

Ref. https://fullcalendar.io/docs/initialize-globals

I am assuming you are using script tags, but if you're using a build system (i.e. webpack), then you can try this: https://fullcalendar.io/docs/initialize-es6

For removing an event, I would just try this:

eventClick:function(clickedInfo)
{
    if(confirm("Are you sure you want to delete this event?"))
    {
        var id = clickedInfo.event.id;
        $.ajax({
            url:"delete.php",
            type:"POST",
            data:{id:id},
            success: function() {

                alert('Deleted!');

                //calendar.refetchEvents(); // remove this

                clickedInfo.event.remove(); // try this instead
            }
        })
     }
},

Ref. https://fullcalendar.io/docs/Event-remove