Удалить события после динамического добавления кнопки «Удалить» к событиям. Кнопка «Удалить» не отображается - PullRequest
Новая
       7

Удалить события после динамического добавления кнопки «Удалить» к событиям. Кнопка «Удалить» не отображается

0 голосов
/ 05 марта 2019

Я добавил кнопку «Удалить» к событию в ListDay после удаления события с помощью кнопки «Удалить». Кнопки «Удалить» не отображаются в полном календаре. 

$('#cal2').fullCalendar({
  height: 'auto',
  defaultView: 'listDay',
  events:this.myClonedArray,
  defaultDate: this.startdate,
  viewRender: function(view) {
    $('.cal2 .fc-toolbar').css({
      'display': 'none',
    });
    $(".fc-list-table .fc-list-heading .fc-widget-header").attr('colspan', 4);
    $(".fc-list-table .fc-list-item").append('<td class="w3-center"><button class="fc-delete-item ">Delete</button></td>');
  },
  eventClick: function(event, jsEvent, view) {
    var x = "" + event.id + "";
    localStorage.setItem("delete_id", x);
    $(".w3-center").on("click", function() {
      var result = confirm("Delete Event");
      if (result) {
        console.log(event);
        $('#cal2').fullCalendar('removeEvents', x);
      }
    });
  }
});

До: enter image description here

После: enter image description here

1 Ответ

0 голосов
/ 06 марта 2019

Проблема, с которой вы столкнулись, заключается в том, что вы добавляете кнопки удаления при визуализации представления.

Однако рендеринг вида (то есть календарной сетки) и рендеринг событий являются отдельными процессами.Ваш код работает только (при запуске) в настоящее время, потому что вы загружаете статический набор событий из массива.Если бы вы использовали AJAX для источника событий, то было бы невозможно добавить кнопки, потому что события будут отображаться позже, чем представление (т.е. элементы с этими классами CSS еще не существовали, когда вы пытались выбрать их с помощью jQuery).

Это приводит к тому, что происходит сбой после удаления события: удаление одного события приводит к всем событиям, которые будут повторно отображаться (в случае, если их позиция или размер должны измениться),Однако это не вызывает повторного рендеринга view .Поэтому код, который добавляет кнопки удаления, не запускается.

Очевидное решение для этого будет использовать вместо этого обратный вызов eventAfterAllRender .Это гарантирует, что код запускается каждый раз после того, как все события были добавлены в календарь.

Однако это не будет окончательным ответом.Другая проблема, с которой вы столкнулись, заключается в том, что вам нужно дважды щелкнуть кнопку «Удалить», чтобы она заработала.Это произошло потому, что вы не прикрепляли событие «click» к кнопке, пока пользователь не нажал хотя бы один раз на событие.

Чтобы исправить это, используйте eventRender обратный вызов, чтобы добавить каждую кнопку к своему событию отдельно до , когда она была добавлена ​​в календарь, а затем сразу же прикрепить к ней событие щелчка, чтобы ее можно было нажать сразу после отображения события.

Так что фактически код для добавления кнопки теперь находится в eventRender, а не в eventAfterAllRender.Все, что нужно сделать перед тем, как установить colspan в заголовке списка ... и это может быть легко обработано в viewRender, потому что он не нуждается в перерисовке после удаления события.

Вотзавершенный код: 

  $('#cal2').fullCalendar({
    height: 'auto',
    defaultView: 'listDay',
    events: this.myClonedArray,
    defaultDate: this.startdate,
    viewRender: function(view) {
      $('.cal2 .fc-toolbar').css({
        'display': 'none',
      });
      $(".fc-list-table .fc-list-heading .fc-widget-header").attr('colspan', 4);
    },
    eventRender: function(event, element, view) {
      element.append('<td class="w3-center"><button class="fc-delete-item ">Delete</button></td>');
      element.find(".w3-center").on("click", function() {
        var result = confirm("Delete Event");
        if (result) {
          console.log(event);
          localStorage.setItem("delete_id", event.id);
          $('#cal2').fullCalendar('removeEvents', event.id);
        }
      });
    },
  });

А вот работающая демонстрация: http://jsfiddle.net/108sad4f/3/

...