in our scheduler resources are meeting rooms and events are reserving the rooms (reservation events) for particular time ranges.we have transition times for these meetingrooms before meeting and after meeting.for ex 15min before event and 15min after meeting for cleaning and arranging the things in the room.for showing transitiontime we overrided the eventBodyTemplate added extra 'div' before and end of the event as shown below.
eventBodyTemplate = function (aData: EventBodyTemplateData) {
return `
<div class="transitionBefore" style="left: -${aData.transitionWidth}px;width:${aData.transitionWidth}px;"></div>
<div class="event-info-container">
<span class="event-state-icon">
<span class="${aData.eventRecord.boIcon}"></span>
<span class="${aData.eventRecord.stateIcon}"></span>
</span>
<span class="pn-event-text-info">${aData.eventRecord.customText ? aData.eventRecord.customText : aData.eventRecord.name}</span>
<span class="${aData.eventRecord.repeatOrderIcon}"></span>
<span class="${aData.eventRecord.hasSubOrderIcon}"></span>
</div>
<div class="transitionAfter" style="right: -${aData.transitionWidth}px;width:${aData.transitionWidth}px;"></div>
`;
};
we have sub events also there. but those does not have transitiontime.due to this we have an issue with overlapping of events in particular case.like endTime of subevent is equalto starttime of mainevent we are not able to see the transitiontime of main event.since mainevent have virtual starttime is 15min before the actual start time.
for example if mainEvent starts at 12:15pm and ends at 13:15pm.but while showing in scheduler the main event is shown with transitiontiontime of 15min before and after (which is shown in first attachement)
one subevent starts at 11:15am and ends at 12:15pm.other subevent starts at 13:15pm ends 13:45pm. as shown below.
if subevents have different time other than this (in between time of main event time) they are showing below of the main event.
previously we are using Ext JS for our scheduler.now we are migrating to Bryntum Scheduler with out Ext JS.we had an issue with event overlapping while using Ext JS. we had ticket reference for that as below,
https://forum.bryntum.com/viewtopic.php?f=16&t=5161&sid=04fd5d2004572b54ec19477793ad2dfc&p=30156#p30156
using above reference we overrided above class as below code,
Ext.override(Sch.eventlayout.Horizontal, {
findClosestSuccessor : function (currentEvent, eventList) {
for (var i = 0; i < eventList.length; i++) {
// The getVirtualStartDate() and getVirtualEndDate() are only available on the object event inside the currentEvent object.
//here are we taking virtualstartdate instead of actual startdate of event.since in our requirement we need add
// transitiontime to event( like booking meeting room that room requires transition time for cleaning & arranging).
if ((eventList[i].event.getVirtualStartDate() >= currentEvent.end) && (eventList[i].start >= currentEvent.event.getVirtualEndDate())) { return eventList[i]; }
}
}
});
for same testcase by using above code snippet in old scheduler(which is using Ext JS) we are able to got the subevents with out overlapping as shown below
in new scheduler i have tried to prevent overlapping of events by using horizontalEventSorterFn different ways.but no success.is it anyway to avoid overlapping of events at particular equal case without overrriding findClosestSuccessor ()?