Question

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

  });

该事件正在数据库中被删除，因此该功能可以正常工作，但是该事件不会刷新，并且删除的事件仍显示在日历中。仅当我完全刷新页面后，它才会消失，这是不理想的。

知道为什么吗？

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

“ calendar.refetchEvents（）;”不刷新事件

1 个答案: