动态添加删除按钮后删除事件 events.the 删除按钮不可见

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 作为事件源，那么它将无法添加按钮，因为事件将晚于视图呈现（即具有 CSS 类的元素不会'当您尝试使用 jQuery).select 时，它们还不存在。

这导致它在删除事件后失败的原因：删除单个事件会导致所有个事件 re-rendered（如果它们的位置或大小需要改变）。然而，它不会导致视图变为 re-rendered。因此添加删除按钮的代码不会运行.

对此的明显解决方案是改用 eventAfterAllRender 回调。这确保每次在所有事件添加到日历后代码运行s。

然而，这并不是最终的答案。您遇到的另一个棘手问题是您必须在 "Delete" 按钮上单击两次才能起作用。这是因为在用户至少单击一次事件之前，您没有将 "click" 事件附加到按钮。

解决这个问题的方法是使用eventRender回调将每个按钮单独添加到它的事件之前它已被添加到日历，然后直接离开将点击事件附加到它，因此当事件显示时它可以立即被点击。

所以实际上添加按钮的代码现在是在 eventRender 而不是 eventAfterAllRender。在此之前需要做的就是在列表 header 上设置 colspan...这可以在 viewRender 中很愉快地处理，因为在删除事件后不需要 re-drawing。

这是完整的代码：

  $('#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/

动态添加删除按钮后删除事件 events.the 删除按钮不可见

Delete events after dynamically adding Delete button to events.the Delete button is not visible

javascript

jquery

fullcalendar

fullcalendar-scheduler