fullcalendar에서 외부로 삭제 된 이벤트를 삭제하는 방법은 무엇입니까?

Question

fullcalendar에서 휴지통으로 이벤트를 드래그 할 수 있도록 노력하고 있습니다. 코드는 캘린더가 초기화 될 때 렌더링되는 이벤트에 적합하지만 작동하지 않는 이벤트는있는 것처럼 보입니다. 외부 이벤트에서 캘린더에 떨어졌습니다.

캘린더에 외부 이벤트를 드래그하여 휴지통으로 드래그하면 모든 이벤트가 삭제됩니다.

this과 같이 _id 속성을 사용한다고하는 게시물을 보았습니다.하지만 그렇게하면 아무것도 삭제되지 않습니다. 내가 여기에 그것을 가지고, 아무것도하지 않는,

eventDragStop: function (event, jsEvent) { 

    var trashEl = jQuery('#trashCan'); 
    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 (jsEvent.pageX >= x1 && jsEvent.pageX <= x2 && 
     jsEvent.pageY >= y1 && jsEvent.pageY <= y2) { 
     console.log(event); 
     $('#calendar').fullCalendar('removeEvents', event._id); 
    } 
}, 

통과 event.id 작동하지만, event._id : 여기

은 내가 사용하는 코드입니다.

편집 : 조금 명확히하기 위해 모든 관련 코드를 남겨 두어야합니다.

이것은 내 외부 이벤트를 처리하는 방법입니다. 여기

$('#external-events .menu-event').each(function() { 

    // store data so the calendar knows to render an event upon drop 
    $(this).data('event', { 
     title: $.trim($(this).text()), // use the element's text as the event title 
     stick: true // maintain when user navigates (see docs on the renderEvent method) 
    }); 

    // make the event draggable using jQuery UI 
    $(this).draggable({ 
     zIndex: 999, 
     revert: true,  // will cause the event to go back to its 
     revertDuration: 0 // original position after the drag 
    }); 
}); 

그리고 내 드롭 기능입니다 :

<div id="external-events" class="dropdown col-lg-3"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Unscheduled Events 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <li class="dropdown-header">Drag events to calendar</li> 
     <li class="divider"></li> 
     <li><a href="#" data-duration="01:00" data-event='{"id": "803", "title": "Jennifer Ramundo"}' class='menu-event'>My Event 1</a></li> 
     <li class="divider"></li> 
     <li><a href="#" data-event="{'id': '2'}" class='menu-event'>My Event 2</a></li> 
     <li class="divider"></li> 
     <li><a href="#" data-event="{'id': '3'}" class='menu-event'>My Event 3</a></li> 
    </ul> 
</div> 

내가 외부 이벤트를 초기화하는 방법 이것은이 : 첫 번째는 바로 내가 년 정도 근무했던 한 fullcalendar 예에서 복사 :

drop: function (date, jsEvent, ui, resourceId) { 
    console.log('drop', date.format(), resourceId); 
    $(this).parent().next().remove(); 
    $(this).remove(); 
    if ($('#external-events').find('.menu-event').length === 0) { 
     $('#external-events').hide(); 
    } 
}, 

Answer 1

@ADyson이 옳았습니다. 위의 자신의 답글에서 :

id는 캘린더에있을 때 이벤트 객체에 표시되지 않는 것 같습니다.

실제로 드래그가 발생하기 전에 외부 요소 ID가 손실됩니다. console.log()을 $('#external-events .menu-event').each(...) 반복에서 사용하면 html에 지정한 인라인 데이터가 JS에 적용된 새 이벤트 데이터로 완전히 덮어 쓰여 있음을 발견했습니다.

내 언더 그 랜드닝 (undertsanding)은 이런 일이 일어나지 않아야 이상합니다. the jQuery docs에서 : jQuery를 1.4.3에서

는 소자의 데이터 .DATA (OBJ) 오브젝트를 설정하는 단계 이전에 그 요소에 저장된 데이터를 확장한다.

(제가 v1.4.3 이상을 의미한다고 가정합니다). ,

$('#selector').data('a', stuff); 
$('#selector').data('b', otherstuff); 

아니 문제는, 충돌이 $('#selector')의 데이터가 이제 두 요소를 포함하지 않는 모든 아침 위의 그 라인을 오해 한 후, 나는 문서는 예를 들어, 당신은 새로운 요소와 데이터 오브젝트를 확장 할 수있는 말을 깨달았다 값은 모두 stuff 및 otherstuff입니다.

하지만 그건 당신이 무슨 일을하는지는 '병합'새로운 값으로 기존 요소에 노력 적용되지 않습니다이 경우

$('#selector').data('a', stuff); 
$('#selector').data('a', otherstuff); 

는, 최종 결과는 a 데이터 otherstuff이고 stuff은 otherstuff과 병합되지 않습니다. 단순히 a의 데이터 값을 대체하는 것입니다. 이것은 뒤늦은 시야에서 분명합니다.

결과적으로 캘린더에 놓을 때 외부 요소에 id이없는 것입니다. removeEvents을없이 지정하면 idwill remove all events이 지정됩니다.

HTML의 모든 인라인 또는 JS를 통한 모든 동적 인 데이터를 한 번에 한꺼번에 지정할 수있는 가장 간단한 옵션이있는 것처럼 보입니다. 순서가 중요한 열쇠라고 여기

var elData = $(this).data('event'), 
newData = { 
    title: $.trim($(this).text()), 
    stick: true 
}; 
$(this).data('event', $.extend(elData, newData)); 

주 : 둘 다에서 할당해야하는 경우,이 솔루션을 사용하면 항목을 반복으로 적절하게 새로운 데이터로 인라인 데이터를 병합하는 값 쌍을 newData에 의지 일치하는 키를 elData에 덮어 씁니다.

이 업데이트로 코드를 작동시킬 수있었습니다. Here's a working JSFiddle.

사이드 노트 :

• 당신은 jQuery 및 $의 사용을 혼합되어, 적어도 당신의 eventDragStop() 콜백한다.

• 이벤트 2 및 3의 인라인 데이터에 대한 JSON 구문이 올바르지 않습니다. 문자열에 대해서는 JSON requires double quotes입니다. 이를 확인하기 위해 JSFiddle에서 이벤트 2의 구문을 수정했으며 이벤트 1과 2 (유효 JSON)가 작동하는지 테스트 할 수 있습니다. 이벤트 3 (잘못된 JSON)을 휴지통으로 보내면 모든 이벤트가 휴지통으로 이동합니다.