Remove Elements from fullcalendar (by dragging to trash can)

Question

I have a fullcalendar with external elements being dragged onto it. I\'m relatively new to jquery. I don\'t know quite how to get the ID of the object being dragged to a \

Answer 1

Complete tutorial, how to add "move to trash" function to fullcalendar

HERE IS DEMO

if you do not want to use droppable:

from fullcalendar.css delete this lines

.fc-view
 {
   /* prevents dragging outside of widget */
   width: 100%;
   overflow: hidden;
 }

find in fullcalenar.js (line cca 6086)

function eachEventElement(event, exceptElement, funcName) {
    var elements = eventElementsByID[event._id],
        i, len = elements.length;
    for (i=0; i

and change to:

function eachEventElement(event, exceptElement, funcName) {
    var elements = eventElementsByID[event._id],
        i;
    if (elements != null) {
        var len = elements.length;
        for (i = 0; i < len; i++) {
            if (!exceptElement || elements[i][0] != exceptElement[0]) {
                elements[i][funcName]();
            }
        }
    }
}

in js:

//actually cursor position
var currentMousePos = {
    x: -1,
    y: -1
};

//set actually cursor pos
jQuery(document).ready(function () {

    jQuery(document).on("mousemove", function (event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

});

//check if cursor is in trash 
    function isElemOverDiv() {
        var trashEl = jQuery('#calendarTrash');

        var ofs = trashEl.offset();

        var x1 = ofs.left;
        var x2 = ofs.left + trashEl.outerWidth(true);
        var y1 = ofs.top;
        var y2 = ofs.top + trashEl.outerHeight(true);

        if (currentMousePos.x >= x1 && currentMousePos.x <= x2 &&
            currentMousePos.y >= y1 && currentMousePos.y <= y2) {
            return true;
        }
        return false;
    }

//fullcalendar mouseover callback

        eventMouseover: function (event, jsEvent) {
            $(this).mousemove(function (e) {
                var trashEl = jQuery('#calendarTrash');
                if (isElemOverDiv()) {
                    if (!trashEl.hasClass("to-trash")) {
                        trashEl.addClass("to-trash");
                    }
                } else {
                    if (trashEl.hasClass("to-trash")) {
                        trashEl.removeClass("to-trash");
                    }

                }
            });
        },

//fullcalendar eventdragstop callback
eventDragStop: function (event, jsEvent, ui, view) {
    if (isElemOverDiv()) {

        jQuery('#fr-calendar').fullCalendar('removeEvents', event.id);

        var trashEl = jQuery('#calendarTrash');
        if (trashEl.hasClass("to-trash")) {
            trashEl.removeClass("to-trash");
        }
    }
},

in fullcalendar set option dragRevertDuration: 0,

in fullcalendar declaration add loading callback function for append a trashcalendar:

loading: function (bool) {
    if (!bool) {
        jQuery('.fc-header-left').append('
');

    }
},

css for trash:

div.calendar-trash{
float: left;
padding-right: 8px;
margin-right:5px;
padding-left:8px;
padding-top: 3px;
cursor: pointer;
}

.to-trash{
  background-color:#EAEAEA;
    -webkit-border-radius: 5em;
    border-radius: 5em;
}

If loading callback not working, add trash on end of jquery document ready function.

foo.JFS('.fc-header-left').append('
');

trash icon: