Как объединить события в fullcalendar по select / drag

Question

У меня есть полный календарь с видом на неделю. У меня есть события в таблице с сервера. Я хочу сделать следующее: пользователь может выбрать несколько событий в таблице с событием select, и когда он это сделает, я хочу добавить зеленую рамку над выбранной областью. http://prntscr.com/lhkp9y

Я нашел один способ - это объединить выбранные события в одно, но это не так просто, если начальная точка находится над существующим событием. На экране отправная точка - пустой временной интервал.

Что у меня сейчас: если в таблице editable:false событий, и я начинаю выбирать, а начальная точка находится над существующим событием, ничего не происходит. Если отправная точка - пустой временной интервал, это работает

Если в таблице есть события 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');
},