FullCalendar中连接在一起的事件的拖放组 [英] drag-drop group of events connected together in FullCalendar

问题描述

我在FullCalendar + Scheduler中用以下代码将一系列事件连接在一起:

i've a sequence of events connected together in FullCalendar + Scheduler, with this code:

resourceGroupField: 'building',
        resources: [
            { id: 'a', building: 'Impianto 1', title: 'Cliente Pippo' },
            { id: 'b', building: 'Impianto 2', title: 'Cliente Pluto' },
            { id: 'c', building: 'Impianto 3', title: 'Cliente Pallino' }
        ],
        events: [
            { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [1,2,3,4,5,6,7], editable: false },
            { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "red" },
            { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "grey" },
            { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "orange" },
            { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "blue" },
            { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "green" },
            { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "pink" }
        ]

我需要一个简单的代码，当我拖放一个事件(例如ID = 1 ...第一个的事件)时，所有连接在一起的事件(使用数组:id_evento_collegato)都将跟随同时拖动的事件...因此所有事件都必须设置新的开始时间和结束时间.我不想手动拖动所有7个事件...但是我需要拖动1个事件，其余所有事件都跟随被拖动的事件.

I need a simple code that when I drag-drop an event (for example event with ID = 1...the first), all the events connected together (using array: id_evento_collegato) follow the event dragged at the same time...so all the events have to set the new start and end time. I don't want to drag all the 7 events manually...but i need to drag 1 event and all remaining events follow the event dragged.

示例中的附件.

[IMG] http://i68.tinypic.com/ranggi.jpg [ /IMG]

[IMG]http://i68.tinypic.com/ranggi.jpg [/IMG]

有人可以帮我吗?

在@ADyson的帮助下更新:

UPDATE after help of @ADyson:

我尝试对所有事件均删除可错误".如果我总是移动相同的事件(例如事件2)，则一切正常.但是，如果我移动一个事件(示例事件2)，然后尝试移动另一个事件(示例事件4)...偶数链"中断了. Firebug在以下位置出现错误:

I tried to remove EDITABLE: FALSE to all events. if i move ALWAYS the same event (for example event 2) all is ok. But if i move an event (example event 2) and then I try to move another event (example event 4)...the "even-chain" broke. Firebug get an error on:

for (var i = 0; i < event.id_evento_collegato.length; i++)

有错误:

TypeError: event.id_evento_collegato is undefined

我更新的代码:

events: [
            { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [2,3,4,5,6,7] },
            { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,3,4,5,6,7], backgroundColor: "red" },
            { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,4,5,6,7], backgroundColor: "grey" },
            { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,5,6,7], backgroundColor: "orange" },
            { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,6,7], backgroundColor: "blue" },
            { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,7],  backgroundColor: "green" },
            { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6], backgroundColor: "pink" }
        ],
        eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
            var newResourceId = event.resourceId;
            var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) {
                for (var i = 0; i < event.id_evento_collegato.length; i++)
                {
                    if (evt.id == event.id_evento_collegato[i]) return true;
                }

                return false;
            });

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

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

更新2:经过一些检查，我尝试在此处添加警报:

UPDATE 2: After some checks, i tried to add an alert here:

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

第一步之后，基本上将"relatedEvents [i] .id_evento_collegato"设置为UNDEFINED ...

Basically "relatedEvents[i].id_evento_collegato" set to UNDEFINED after the first move...

更新3:用"2,3,4,5,6,7"解决了数组[2,3,4,5,6,7]中不断变化的刹车，但是我仍然不理解为什么

UPDATE 3: Solved changing brakets in array [2,3,4,5,6,7] with "2,3,4,5,6,7" but i still don't undestand why

推荐答案

我认为这将满足您的需求.它基于我的建议，其中id_evento_collegato列表不包含它所在事件的ID.

I think this will do what you need. It is based on what I suggested, where the id_evento_collegato list does not contain the ID of the event it is within.

请注意，我从第一个事件中删除了editable: false，以便将其拖动.如果要允许此功能与任何事件一起使用，请从所有事件中删除该属性.

Note I removed editable: false from the first event, to allow it to be dragged. If you want to allow this functionality to work with any of the events, then remove that property from all of them.

还请注意，它仅适用于拖动，不能调整大小.如果您也需要它，请告诉我.

Note also that it only works for dragging, not resizing. If you need that as well, please let me know.

通过使用具有过滤器的fullCalendar的"clientEvents"方法，它返回所有相关事件ID的事件对象，非常简单.然后，它使用eventDrop回调中包含的delta属性(该Duration是指示事件移动的时间)来将所有相关事件的开始时间和结束时间更新相同的时间.最后，调用"updateEvents"以更改日历本身上的事件.

It works quite simply by using fullCalendar's "clientEvents" method, with a filter, to return the event objects for all the related event IDs. Then it uses the delta property included in the eventDrop callback, which is a Duration indicating the amount of time by which the event was moved, to update the start and end times of all the related events by the same amount. Finally "updateEvents" is called to change the events on the calendar itself.

$('#calendar').fullCalendar({
    schedulerLicenseKey: 'YourLicenseKey',
    defaultDate: '2017-09-07',
    scrollTime: "00:00:00",
    editable: true,
    header: {
        left: 'today prev,next',
        center: 'title',
        right: 'timelineDay,timelineWeek,timelineMonth,timelineYear'
    },
    defaultView: "timelineDay",
    resourceGroupField: 'building',
    resources: [
        { id: 'a', building: 'Impianto 1', title: 'Cliente Pippo' },
        { id: 'b', building: 'Impianto 2', title: 'Cliente Pluto' },
        { id: 'c', building: 'Impianto 3', title: 'Cliente Pallino' }
    ],
    events: [
        { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [2,3,4,5,6,7] },
        { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,3,4,5,6,7], editable: false, backgroundColor: "red" },
        { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,4,5,6,7], editable: false, backgroundColor: "grey" },
        { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,5,6,7], editable: false, backgroundColor: "orange" },
        { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,6,7], editable: false, backgroundColor: "blue" },
        { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,7], editable: false, backgroundColor: "green" },
        { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6], editable: false, backgroundColor: "pink" }
    ],
    eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
        var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) {
            for (var i = 0; i < event.id_evento_collegato.length; i++)
            {
                if (evt.id == event.id_evento_collegato[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);
    }
});

请参阅 https://fullcalendar.io/docs/event_ui/eventDrop/ eventDrop回调的更多详细信息，该事件在拖动事件完成后运行.

See https://fullcalendar.io/docs/event_ui/eventDrop/ for more details of the eventDrop callback, which runs when an event has finished being dragged.

这篇关于FullCalendar中连接在一起的事件的拖放组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！