Our pure JavaScript Scheduler component


Post by mpathella »

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.

eventsWithTransitionTime.PNG
eventsWithTransitionTime.PNG (62.31 KiB) Viewed 1091 times
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.

event_overlapping.PNG
event_overlapping.PNG (72 KiB) Viewed 1091 times

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

oldscheduler_withoutoverlap.PNG
oldscheduler_withoutoverlap.PNG (62.17 KiB) Viewed 1091 times

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 ()?


Post by pmiklashevich »

Hello,

horizontalEventSorterFn won't help in this case. It sorts events, but it doesn't make a decision if the events overlap or not. If eventLayout is not "none" ("stack" by default), then line wrap doesn't happen even when events overlap. There is no public way to achieve what you need. Though there is private Scheduler.eventlayout.HorizontalLayoutStack.findClosestSuccessor function which is responsible for overlapping similar to ExtJS version. If eventLayout is "stack", you can override the function to implement the logic you need. Just remember that overriding private things is not recommended.

import Override from '../../lib/Core/mixin/Override.js';
import HorizontalLayoutStack from '../../lib/Scheduler/eventlayout/HorizontalLayoutStack.js';

class HorizontalLayoutStackOverride {
    static get target() {
        return {
            class      : HorizontalLayoutStack,
            product    : 'scheduler',
            minVersion : '4.0.0',
            maxVersion : '5.0.0'
        };
    }

// PRIVATE FUNCTION!!!
    findClosestSuccessor(eventRenderData, events) {
        // call overridden function (optional)
        const closest = this._overridden.findClosestSuccessor.call(this, eventRenderData, events);
        
// TODO: implement me // return undefined to wrap line return closest; } } Override.apply(HorizontalLayoutStackOverride);

I've opened a feature request. We will discuss it in the team. Please subscribe to the ticket: https://github.com/bryntum/support/issues/2822

As an alternative solution, please take a look at our nested events demo. Which looks close to your screenshots, but the event time includes the offsets before/after event. Therefore line wrap due to overlapping will work out of the box.
https://www.bryntum.com/examples/scheduler/nestedevents/

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by mpathella »

Hi Pavel,
we tried to override the 'HorizontalLayoutStack' class in our scheduler component.we are using typescript for scheduler component.

import { HorizontalLayoutStack} from 'bryntum-scheduler';

export class HorizontalLayoutStackOverride {
    static get target() {
        return {
            class: HorizontalLayoutStack,
            product: 'scheduler',
            minVersion : '4.0.0',
            maxVersion : '5.0.0'
        };
    }
       // PRIVATE FUNCTION!!!
      public findClosestSuccessor(eventRenderData: any, events: any[]): any {
         console.log('findClosestSuccessor');
        return events[0];
        }
    }


 Override.apply(HorizontalLayoutStackOverride);
 

but getting console error while loading the scheduler in UI with exception 'Exception evaluating javascript: Error: Override must specify which class it overrides, using target.class'

console_error.PNG
console_error.PNG (173.08 KiB) Viewed 1069 times

is HorizontalLayoutStack class is allowed to import?.looks like its not exported in scheduler code.we verified in scheduler.d.ts file the HorizontalLayoutStack class is not availiable.


Post by pmiklashevich »

Yes, that is true. The class is not exported since it is a private class. You can try override the function another way. When you create an instance you can get the layout and override the function on the layout instance. For example in angular it might look like this:

    ngAfterViewInit(): void {
        // Store Scheduler instance
        this.scheduler = this.schedulerComponent.instance;
        // @ts-ignore getEventLayoutHandler
        const horizontalLayoutStack = this.scheduler.getEventLayoutHandler('stack');
        const original = horizontalLayoutStack.findClosestSuccessor;
        horizontalLayoutStack.findClosestSuccessor = (eventRenderData: any, events: any[]) => {
            return undefined;
            // return original.call(horizontalLayoutStack, eventRenderData, events);
        };
    }

Keep in mind, that is on your own risk. getEventLayoutHandler and findClosestSuccessor are private functions. Please add a big warning to remove this code when the ticket above is solved.

Pavlo Miklashevych
Sr. Frontend Developer


Post by mats »

@mpathella Progress made, please see the video - is it close to what you are envisioning?

https://www.youtube.com/watch?v=oqlXbXmCvQI


Post by mpathella »

@mats yes. looks good.Thank you for update.


Post Reply