2017-10-11 4 views
-1

다른 이벤트에 연결된 이벤트를 끌어다 놓으려고합니다.Fullcalendar에서 드래그 할 때 두 이벤트를 연결하는 방법은 무엇입니까?

두 개의 이벤트를 동시에 드래그 할 수 있다면 드래그 할 때 동일한 공간이 생길 수 있습니다. 첫 번째 이벤트는 메인 이벤트이며, (휴식 사이가 있기 때문에) 두 번째 이벤트는 첫 번째 이벤트에서 계속 이벤트 http://st.d.pr/aDoFmf

:이처럼 보이는 순간

.

fullcalendar에는 이와 비슷한 기능이 내장되어 있습니까?

앞으로 연락 드리겠습니다.

답변

1

이 목적을 위해 이전에 사용했던 약간의 맞춤 코드를 사용하면 분명히 가능합니다. 어떤 이벤트가 연결되어 있는지에 대해서는 언급하지 않았으므로 다음과 같이 수정해야 할 예제를 제공 할 것입니다.

relatedEvents이라는 추가 필드를 사용하여 이벤트 객체를 정의한다고 가정 해 보겠습니다. 이벤트가 연결된 ID 배열입니다. 귀하의 경우 두 사건은 서로 연결됩니다. 다음은 세 개의 상호 연결된 이벤트와 예는 다음과 같습니다

{ id: 1, start: '2017-10-11T11:00:00', end: '2017-10-11T13:00:00', title: 'Event 1', relatedEvents: [2, 3] } 
{ id: 2, start: '2017-10-11T15:00:00', end: '2017-10-11T17:00:00', title: 'Event 2', relatedEvents: [1, 3] } 
{ id: 3, start: '2017-10-11T19:00:00', end: '2017-10-11T21:30:00', title: 'Event 3', relatedEvents: [1, 2] } 

당신은 별도의 사용자 정의 구조, 당신은 이벤트가 끌려 완료하고,에 다시 제거 될 때 실행되는 eventDrop 콜백의 일환으로 몇 가지 코드를 실행할 수 있습니다 일단 달력.

이 코드는 끌기 이벤트에 대한 관련 이벤트를보고 ID를 기반으로 fullCalendar에서 해당 이벤트 객체를 가져온 다음 드래그 이벤트가 변경된 것과 동일한 기간으로 각 관련 이벤트의 시작 및 종료 시간을 업데이트합니다 이것은 delta 매개 변수가 콜백에 전달 됨으로써 제공됩니다).

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) { 
    var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) { 
     for (var i = 0; i < event.relatedEvents.length; i++) 
     { 
      if (evt.id == event.relatedEvents[i]) return true; 
     } 

     return false; 
    }); 

    for (var i = 0; i < relatedEvents.length; i++) 
    { 
     relatedEvents[i].start.add(delta); 
     relatedEvents[i].end.add(delta); 
    } 

    $("#calendar").fullCalendar("updateEvents", relatedEvents); 
} 

eventDrop 콜백에 대한 자세한 내용은 https://fullcalendar.io/docs/event_ui/eventDrop/을 참조하십시오.

+1

당신은 남자입니다. - 고맙습니다 .--) 완벽하게 작동합니다. –