如何在选择/拖动时以全日历合并事件？

Question

I have fullcalendar with agendaweek view. I have events in table coming from server. I want to do the next thing: user can select few events in the table with select event and when he do it, I want to add green border over selected area. http://prntscr.com/lhkp9y

I found one way - it is to merge selected events into one, but it is not so easy if starting point is over existing event. On the screen starting point - is empty timeslot.

What I have now: If events are editable:false in the table, and I start to select and starting point is over existing event, nothing happens. If starting point is - empty timeslot, it works

If events are editable:true in the table, and I start to select and starting point - is existing event, this event stick to cursor and start to move which is not good. I want existing event stay on the same place.

Here is my calendar code

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

Try it, hope it's fine for you.

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');
},