fullcalendar.js - deleting event on button click

Question

I am using the fullCalendar.js and the current problem is making i lose so much time on something that might be simple to whose understand javascript (more specific jquery) better than me.

The link of my example is at the bottom but my main concern is this part:

eventClick: function(event){
  $(".closon").click(function() {
     $('#calendar').fullCalendar('removeEvents',event._id);
  });
},    

I want to delete an event from the calendar with my close button and not on direct click of the event. I already tried using the $element.click outside of the eventClick trigger but it closed all the events on the calendar and the max i could reach was this poor situation, where the user need to click first on the calendar event and after on the 'X' to delete it.

http://jsfiddle.net/59RCB/49/

Answer 1

Remove the eventClick function and replace the eventAfterAllRender function with this:

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }

Answer 2

Above solution works perfectly on the month view, but if you are on weekview and dayview, this solution will not work as pointed out by nextdoordoc above. Why? In weekview their is div element with ".fc-bg" as css class which is overlay with 25% opacity which blocks click event.

Workarround:

eventRender: function(event, element) { 
       element.find(".fc-bg").css("pointer-events","none");
       element.append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );
       element.find("#btnDeleteEvent").click(function(){
            $('#calendar').fullCalendar('removeEvents',event._id);
       });

Adding pointer-events:none allows click event propagation. Note: This solution does not work in IE10 and older.

To work in IE10 you can directly append you delete button to (".fc-bg")

here is example:

eventRender: function(event, element) { 
   element.find(".fc-bg").append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );}

Hope to help someone