"calendar.refetchEvents();" 没有刷新事件

"calendar.refetchEvents();" not refreshing events

我正在使用 fullcalendar 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();

  });

数据库中的事件正在被删除,所以该功能可以正常工作,但事件不会刷新并且删除的事件仍在日历中显示。它只有在我完全刷新页面时才会消失,这并不理想。

知道为什么吗?

日历对象似乎从未被初始化过。

我会尝试按照文档中的描述更改您的事件侦听器:

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