在FullCalendar中连接的一组事件组

我有一系列事件与全卡伦达调度程序连接在一起，并使用此代码：

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个事件，其余的事件遵循拖动事件。

在附件中示例。

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

任何人可以帮我做这个吗？

@adyson的帮助后更新：

我试图删除可编辑：对所有事件的错误。如果我始终移动同一事件（例如事件2），一切都可以。但是，如果我移动事件（示例事件2），然后尝试移动另一个事件（示例事件4）..."偶数链"破裂。Firebug出现错误：

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：经过一些检查后，我尝试在此处添加警报：

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"设置为第一步之后的未定义...

更新3：用" 2,3,4,5,6,7"中的更换式式式面包，用" 2,3,4,5,6,7"，但我仍然不忘记为什么

我认为这将做您需要的事情。它基于我的建议，id_evento_collegato列表不包含其内部事件的ID。

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

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

它通过使用FullCalendar的"客户端"方法（带有过滤器）来返回所有相关事件ID的事件对象。然后，它使用EventDrop回调中包含的delta属性，该属性是指示移动事件的时间的持续时间，以将所有相关事件的开始和结束时间更新为相同的量。最后，"更新事项"被要求更改日历本身上的事件。

$('#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);
    }
});

有关事件Drop Callback的更多详细信息，请参见https://fullcalendar.io/docs/event_ui/eventdrop/，当事件完成后运行时，该详细信息已拖动。

相关内容

最新更新

热门标签：