Question

在使用删除按钮删除事件后，我在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);
      }
    });
  }
});

之前：

之后：

Answer 1

这里出现的问题是，渲染视图时要添加删除按钮。

但是，呈现视图（即日历网格）和呈现事件是独立的过程。您的代码当前（在启动时）仅能正常工作，因为您从数组中加载了一组静态事件。如果您使用AJAX作为事件源，那么它将无法添加按钮，因为事件的渲染时间要晚于视图（即，当您尝试使用jQuery选择它们时，那些CSS类的元素尚不存在）

这导致了删除事件后失败的原因：单个事件的删除会导致 all 事件重新呈现（以防它们的位置或大小发生变化）。但是，这不会导致重新渲染 view 。因此，添加删除按钮的代码无法运行。

一个明显的解决方案是改为使用eventAfterAllRender回调。这样可以确保代码在所有事件都添加到日历之后每次都运行。

但是，这最终不是答案。您遇到的另一个麻烦的问题是，必须先在“删除”按钮上单击两次，然后它才能起作用。这是因为直到用户至少单击一次事件后，您才将“点击”事件附加到按钮上。

解决此问题的方法是使用eventRender回调在之前将每个按钮分别添加到其事件中，然后将其添加到日历中，然后立即附加click事件它，因此可以在事件显示时立即单击它。

因此，实际上添加按钮的代码现在位于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/

在事件中动态添加“删除”按钮后删除事件。“删除”按钮不可见

1 个答案: