"calendar.refetchEvents();"不刷新事件

Question

我正在使用全日历v4(https://fullcalendar.io/(，并且我正在尝试在单击事件时删除事件。

当我单击一个事件时，我有以下代码来删除该事件：

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

该事件

在数据库中删除，因此该函数工作正常，但事件不会刷新，已删除的事件仍显示在日历中。只有当我完全刷新页面时，它才会消失，这并不理想。

知道为什么吗？

Answer 1

看起来日历

对象从未被初始化过。

我会尝试按照文档中的说明更改事件侦听器：

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

参考 https://fullcalendar.io/docs/initialize-globals

我假设您使用的是脚本标签，但是如果您使用的是构建系统(即 webpack(，那么您可以尝试以下操作： https://fullcalendar.io/docs/initialize-es6

要删除事件，我只需尝试以下操作：

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
            }
        })
     }
},

参考 https://fullcalendar.io/docs/Event-remove