Question

我在FullCalendar + Scheduler中连接在一起的一系列事件，代码如下：

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的帮助下更新：

我尝试删除所有事件的EDITABLE：FALSE。如果我总是移动相同的事件（例如事件2）一切都好。但是如果我移动一个事件（例如事件2）然后我尝试移动另一个事件（例如事件4）......＆＃34;偶数链＆＃34;打破。 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);
            }

基本上＆＃34; relatedEvents [i] .id_evento_collegato＆＃34;在第一次移动后设置为UNDEFINED ......

更新3：使用＆＃34; 2,3,4,5,6,7和＃34;解决了更换阵列[2,3,4,5,6,7]中的问题。但我仍然没有理解为什么

Answer 1

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

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

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

使用fullCalendar＆＃34; clientEvents＆＃34;它非常简单。带有过滤器的方法，用于返回所有相关事件ID的事件对象。然后，它使用eventDrop回调中包含的delta属性，该属性是指示移动事件的时间的持续时间，以相同的数量更新所有相关事件的开始和结束时间。最后＆＃34; updateEvents＆＃34;被调用来改变日历本身的事件。

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

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

拖放在FullCalendar中连接在一起的事件组

1 个答案: