How to add close button to the event block in Fullcalendar

问题

I need to add 'close' button to the event which would remove it from the calendar. As 'text' field doesn't accept HTML, I can't do this directly. What is the best way to modify event HTML ?

回答1:

Adding a trash icon from Bootstrap-3

eventRender: function(event, element) {
   element.html(event.title + '<span class="removeEvent glyphicon glyphicon-trash pull-right" id="Delete"></span>');
}

The event can be captured in the "eventClick":

eventClick: function(calEvent, jsEvent, view) {
  if (jsEvent.target.id === 'Delete') {
    $("#myModal").modal(); // Maybe show a modal dialog asking the user if he wants to delete the event. 
  }
}

回答2:

I succeeded to add a close button with the eventRender callback function.

 eventRender: function(event, element) {
                    element.html(event.title+"<i  class='fa fa-close pull-right text-danger' id='"+event.id+"'></i>");
                },

But i could not get the button to work. Please let me know if you could get the button to work.

来源：https://stackoverflow.com/questions/22240871/how-to-add-close-button-to-the-event-block-in-fullcalendar