在我的情况下,我经常让用户不是单击和拖动来创建长事件(日视图),只需单击一个时间段(30分钟),然后单击下一个(30分钟).
因此,不是13:00 - 14:00的事件,而是13:00-13:30和第二个13:30-14:00.
为了防止这种情况,我想将两个事件合并为一个,以便它们显示为13:00 - 14:00.
怎么做得好?
这就是我最终解决它的方式:
// user choses event 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'); },
结果:
结果示例:
Matheboss.de上的FullCalendar