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) bett

Answer 1

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("
X
" );
       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("
X
" );}

Hope to help someone