Dfyjkt

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;
 
 );

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