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;
    }'Web > fullCalendar' 카테고리의 다른 글
| fullcalendar 에 context menu(pop up menu) 추가하기 (643) | 2015.04.28 | 
|---|---|
| fullcalendar 에서 이벤트 클릭시 배경색상 변환 (656) | 2015.04.28 | 
| full calendar 에서 이벤트를 드래그로 삽입/삭제 하는 기법 (639) | 2015.04.28 | 
| fullcalendar 에서 익스플로어에서 이벤트가 나오지 않을때 (2457) | 2015.04.28 | 
| [fullcalendar] 달력위에서 드래그 방식으로 삭제 (2) | 2015.04.28 |