如何在選擇/拖動時以全日歷合並事件？

Question

我對日歷周的觀點充滿信心。 我表中的事件來自服務器。 我想做下一件事：用戶可以在表中select事件數很少的事件，當他這樣做時，我想在選定區域上方添加綠色邊框。 http://prntscr.com/lhkp9y

我發現了一種方法-將選定的事件合並為一個，但是如果起點在現有事件之上則不是那么容易。 在屏幕的起點-空時隙。

我現在擁有的：如果事件是editable:false表中的editable:false ，並且我開始選擇並且起點在現有事件之上，那么什么也不會發生。 如果起點是-空時隙，則可以正常工作

如果事件是editable:true在表中為editable:true ，並且我開始選擇並且起點-是現有事件，則此事件會停留在光標上並開始移動，這不好。 我希望現有活動保留在同一位置。

這是我的日歷代碼

                $('#calendar').fullCalendar({
                defaultView: 'agendaWeek',
                firstDay: 1,
                navLinks: false,
                header: false,
                selectable: true,
                eventOverlap: true,
                selectOverlap: function (event) {
                    // check is allowed to select next timeslot ot not
                    return !event.closed;
                },
                selectHelper: true,
                allDaySlot: true,
                minTime: self.minTime,
                maxTime: self.maxTime,
                slotLabelInterval: '00:30:00',
                viewSubSlotLabel: true,
                slotLabelFormat: 'h:mm a',
                editable: true,
                events: events,
                select: function (start, end, jsEvent, view) {

                    // merge selected events into one
                    self.mergeEvents();
                },
                eventDragStart: function (event, jsEvent, ui, view) {
                    // I WANT TO CANCEL DRAG, BUT IT DOESNT WORK
                    return false;
                }
            });

Answer 1

嘗試一下，希望對您有好處。

select: function (start, end, jsEvent, view) 
{
    var diffmin = (new Date(end).getTime()/1000 - new Date(start).getTime()/1000)/60;
    var title = diffmin+' min';
    var eventData;
    // some users click 1 slot, then the following, so we have 2 events each 30 min instead of 60 min
    // merge both events into one
    var eventmerge = false;
    $.each(allevents, function( index, eventitem )
    {
        if(eventitem!==null && typeof eventitem != 'undefined')
        {
            // if start time of new event (2nd slot) is end time of existing event (1st slot)
            if( moment(start).format('YYYY-MM-DD HH:mm') == moment(eventitem.end).format('YYYY-MM-DD HH:mm') )
            {
                eventmerge = true;
                // existing event gets end data of new merging event
                eventitem.end = end;
            }
            // if end time of new event (1st slot) is start time of existing event (2nd slot)
            else if( moment(end).format('YYYY-MM-DD HH:mm') == moment(eventitem.start).format('YYYY-MM-DD HH:mm') )
            {
                eventmerge = true;
                // existing event gets start data of new merging event
                eventitem.start = start;
            }

            if(eventmerge)
            {
                // recalculate
                var diffmin = (new Date(eventitem.end).getTime()/1000 - new Date(eventitem.start).getTime()/1000)/60;
                eventitem.title = diffmin+' min';

                // copy to eventData
                eventData = eventitem;

                // find event object in calendar
                var eventsarr = $('#calendar').fullCalendar('clientEvents');
                $.each(eventsarr, function(key, eventobj) { 
                    if(eventobj._id == eventitem.id) {
                        console.log('merging events');
                        eventobj.start = eventitem.start;
                        eventobj.end = eventitem.end;
                        eventobj.title = eventitem.title;
                        $('#calendar').fullCalendar('updateEvent', eventobj);
                    }
                });

                // break each loop
                return false;
            }
        }
    });
    if(!eventmerge)
    {
        // console.log('adding event id: '+eventcount);
        eventData = {
            id: eventcount, // identifier
            title: title,
            start: start,
            end: end,
            color: '#00AA00',
            editable: true,
            eventDurationEditable: true,
        };

        // register event in array
        allevents[eventcount] = eventData;
        eventcount++;

        $('#calendar').fullCalendar('renderEvent', eventData, true);
    }

    // console.log(start, end);
    setTimePrice(eventData);

    $('#calendar').fullCalendar('unselect');
},