Fullcalendar에서 이벤트를 드래그 방식으로 날려버리는 기법

Posted by RAY.D
2015. 4. 28. 09:23 Web/fullCalendar
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.




jQuery FullCalendar event deletion by dragging


Fullcalendar에서 이벤트를 드래그 방식으로 날려버리는 기법



1. 


       $('#calendar').children('.fc-content').children().append('<div id="calendarTrash" style="float: right; padding-top: 5px; padding-right: 5px; padding-left: 5px;"><span class="ui-icon ui-icon-trash"></span></div>');

    //listens for drop event
    $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function(event, ui) { 
            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
                var event = dragged[1];
                var answer = confirm("Delete Event?")
                if (answer)
                {
                    $.ajax({
                        url:'/employees/removeevent?id='+event.id,
                        dataType: 'json',
                        async: false,
                        error: function(xhr, ajaxOptions, thrownError)
                        {
                            //console.log(xhr.status);
                            //console.log(thrownError);
                        },
                        success: function()
                        {
                            calendar.fullCalendar( 'removeEvents' , event.id  );
                        }
                    });
                }
            }
        }
    });

        eventDragStart: function( event, jsEvent, ui, view ) { 
            dragged = [ ui.helper[0], event ];
        },





혹은


var calendar = $('#calendar').fullCalendar({
...
eventDragStop: function(event, jsEvent, ui, view) { 
               //console.log(event.id);
                if (isElemOverDiv(ui, $('div#delete-events'))) {
                    calendar.fullCalendar('removeEvents', event.id);
                }
            }
});


//And an helper function:


var isElemOverDiv = function(draggedItem, dropArea) {
        var dragged = $(draggedItem)[0].offset;

        var b = $(dropArea);
        var limitX = parseInt(b.offset().left) + parseInt(b.outerWidth());
        var limitY = parseInt(b.offset().top) + parseInt(b.outerHeight());

        // Compare
        if ( limitY >=   parseInt(dragged.top) 
            && limitX >=   parseInt(dragged.left) ) 
        { 
            return true; 
        }
        return false;
    }