javascript - FullCalendar v4.2.0 destroy() 不工作

Question

https://fullcalendar.io/docs/destroy

完整日历代码:

     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 销毁无法正常工作 我尝试了以下方法，

 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();

这些我尝试过，但没有任何帮助! 注意:我试图在ajax成功中销毁日历。
我的目标是我需要销毁旧事件并通过新事件重新初始化。

Answer 1

基本上，您可以从 DOMContentLoaded 中初始化主 Calendar 对象，并将其用作该页面中的全局对象，如以下代码所示:

     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();
    });

现在在任何其他函数中，您可以调用它来销毁，如下所示:

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

另一种选择是使用“refetchEvents”，如此链接中所述: how to refresh fullcalendar v4 after change events object using ajax

此链接也可能对您有帮助: Destroy fullcalendar on bootstrap tabs click before new calendar is initialized