时间戳

首页 > 解决方案 > “日历.refetchEvents（）；” 不刷新事件

php - “日历.refetchEvents（）；” 不刷新事件

问题描述

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

  });

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

知道为什么吗？

标签： phpajaxfullcalendarfullcalendar-4

解决方案

看起来日历对象从未被初始化过。

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

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

推荐阅读