календарь.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();

  });

Событие удаляется из базы данных, поэтому функция работает нормально, но события не обновляются, а удаленное событие по-прежнему отображается в календаре. Он исчезает только тогда, когда я полностью обновляю страницу, что не идеально.

Есть идеи, почему?


php ajax fullcalendar fullcalendar-4
person Erica C    schedule 23.07.2019    source источник
comment
Есть ошибки? Определен ли calendar в этой области?   -  person Felippe Duarte    schedule 23.07.2019
comment
Я не получаю никаких ошибок в консоли или на странице.   -  person Erica C    schedule 23.07.2019
comment
Я думаю, что календарь определен в этой области, поскольку это глобальная переменная. Я только что обновил код выше. Спасибо.   -  person Erica C    schedule 23.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Не похоже, что объект календаря когда-либо инициализировался.

Я бы попробовал изменить прослушиватель событий, как описано в документации:

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

Я предполагаю, что вы используете теги script, но если вы используете систему сборки (например, веб-пакет), вы можете попробовать следующее: 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

person user1477388    schedule 23.07.2019
comment
Спасибо. Я пробовал это, но ничего не изменилось. События по-прежнему не обновляются после удаления. :-( См. отредактированный код в вопросе выше. Любая подсказка о том, что я могу упустить? - person Erica C; 23.07.2019
comment
Я не думаю, что вам вообще нужно вызывать функцию refetch. Простое удаление события должно вызвать повторную визуализацию календаря. По крайней мере, так это работало в предыдущих версиях. Посмотрите мое редактирование, попробуйте и дайте мне знать, как оно сработало. - person user1477388; 23.07.2019
comment
Да!!!! ClickedInfo.event.remove(); работал как шарм! :-) СПАСИБО! - person Erica C; 23.07.2019