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 |