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

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 2

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);
            });

Answer 3

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 4

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 5

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
            });

 });