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

Question

I added Delete button to event in ListDay after deleting event using Delete button the Delete buttons are not visible in fullcalendar.

$('#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);
      }
    });
  }
});       

Before:

After:

Answer 1

The problem you've got here is that you are adding the delete buttons when the view is rendered.

However, rendering the view (i.e. the calendar grid) and rendering the events are separate processes. Your code only works (at startup) currently because you load a static set of events from an array. If you were using AJAX for the event source, then it would fail to add the buttons because the events would be rendered later than the view (i.e. the elements with those CSS classes wouldn't exist yet when you tried to select them with jQuery).

This leads onto why it fails after you delete an event: deletion of a single event causes all the events to be re-rendered (in case their position or size needs to change). However it does not cause the view to be re-rendered. Therefore the code which adds the delete buttons does not run.

The obvious solution to this would be to use the eventAfterAllRender callback instead. This ensures the code runs every time after all the events have finished being added to the calendar.

However, this turns out not to be the final answer. Another niggling problem you had is that you have to click twice on the "Delete" button before it will work. This was because you didn't attach a "click" event to the button until the user had clicked at least once on an event.

The way to fix this is to use the eventRender callback to add each button to its event individually before it has been added to the calendar, and then straight away attach the click event to it, so it's ready to be clicked on immediately when the event is displayed.

So actually the code to add the button is now in eventRender rather than eventAfterAllRender. All that's necessary to do before that is set the colspan on the list header...and that can be handled in viewRender quite happily, because it doesn't need re-drawing after an event is deleted.

Here's the completed code:

  $('#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);
        }
      });
    },
  });

And here's a runnable demo: http://jsfiddle.net/108sad4f/3/