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

Answer 3

The way i found:

//HTML Code to add the button

<div id='calendar'></div>
<button id='Delete'>Delete Events</button></p> 

-

//Our Js data
{id: '1', resourceId: 'a' , start: '2015-10-16T10:52:07', end: '2015-10-16T21:00:00', url: 'https//www.google.com', title: 'How to delete Events'},
{id: '2', resourceId: 'b' , start: '2015-10-16T11:00:10', end: '2015-10-18T17:03:00', title : 'Can we delete multiple events ?'},
{id: '2', resourceId: 'c' , start: '2015-10-16T10:00:00', end: '2015-10-16T23:00:02', title : 'How ?'},
],

//Need to set our button
select: function(start, end, jsEvent, view, resource) {
        console.log(
        'select callback',
        start.format(),
        end.format(),
        resource ? resource.id : '(no resource)'
        );
        }
        });

        //Our button to delete Events
        $('#Delete').on('click', function() {
        $('#calendar').fullCalendar('removeEvents', 2); //Remove events with the id: 2
            });

 });

Answer 4

This code may better help you. In this code remove icon display you whenever your mouse moving over event and whenever your mouse goes outside remove button will hide or removed.

eventMouseover:function(event,domEvent,view){

    var el=$(this);

    var layer='<div id="events-layer" class="fc-transparent"><span id="delbut'+event.id+'" class="btn btn-default trash btn-xs">Trash</span></div>';
    el.append(layer);

    el.find(".fc-bg").css("pointer-events","none");

    $("#delbut"+event.id).click(function(){
        calendar.fullCalendar('removeEvents', event._id);
    });
},
eventMouseout:function(event){
    $("#events-layer").remove();
}

Answer 5

this will works for Month ,Week ,Day views

eventRender: function (event, element, view) {

            if (view.name == 'listDay') {
                element.find(".fc-list-item-time").append("<span class='closeon'>X</span>");
            } else {
                element.find(".fc-content").prepend("<span class='closeon'>X</span>");
            }
            element.find(".closeon").on('click', function () {
                $('#calendar').fullCalendar('removeEvents', event._id);
            });