FullCalendar v4.2.0 destroy() not working

Question

FullCalendar Code:

     document.addEventListener('DOMContentLoaded', function () {           
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],                
            defaultDate: new Date(),
            navLinks: true,
            selectable: true,
            selectMirror: true,
            draggable: true,                
            editable: true,
            eventLimit: true, 
            events: [
                <?= $contents ?>
            ],                
        });

        calendar.render();
    });

FullCalendar v4.2 destroy is not working I tried the below,

 1. var calendarEl = document.getElementById('calendar');
    calendarE1.destroy();

 2. $("#calendar).destroy();

 3. calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['interaction', 'dayGrid', 'timeGrid'],
    });
    calendar.destroy();

These things I tried but nothing helps!. Note: I am trying to destroy the calendar in ajax success.
My Objective is I need to destroy the old events and reinitialize by new events.

fyi, in your example #1: `calendarEl` is not the same as `calendarE1` — brombeer, Nov 25 '19 at 08:07
"My Objective is I need to destroy the old events and reinitialize by new events" ...in that case you do **not** need to destroy the entire calendar. You can just add and remove the events themselves. — ADyson, Nov 25 '19 at 08:56

score 3 · Accepted Answer · answered Nov 25 '19 at 07:35

Basically, you can initialize the main Calendar object out of DOMContentLoaded, and utilize it as global within that page like the following code:

     var calendar;

     document.addEventListener('DOMContentLoaded', function () {           
     var calendarEl = document.getElementById('calendar');
     calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],                
            defaultDate: new Date(),
            navLinks: true,
            selectable: true,
            selectMirror: true,
            draggable: true,                
            editable: true,
            eventLimit: true, 
            events: [
                <?= $contents ?>
            ],                
        });

        calendar.render();
    });

Now inside any other function you can call it to destroy as follow:

if (calendar) {
   calendar.destroy();
}

Another option is to use "refetchEvents" as stated in This link: how to refresh fullcalendar v4 after change events object using ajax

And this link may also help you : Destroy fullcalendar on bootstrap tabs click before new calendar is initialized

It's working fine, I followed the first method. Thank you so much. — sridhar, Nov 25 '19 at 09:25

FullCalendar v4.2.0 destroy() not working

1 Answers1