Our pure JavaScript Scheduler component


Post by mpathella »

is it possible overriding 'findClosestSuccessor()' in HorizontalLayoutStack.since in SchedulerEventRendering declaring HorizontalLayoutStackClass shows private(in comments).

 as below.
<CODE>
            /**
             * The class name responsible for the stacking horizontal event layout process.
             * Override this to take control over the layout process.
             * @config {Scheduler.eventlayout.HorizontalLayout}
             * @default
             * @private
             * @category Misc
             */
            horizontalLayoutStackClass : HorizontalLayoutStack;
</CODE>

Post by alex.l »

Hi mpathella,

We do not recommend to override any private classes or methods because they may be renamed/changed without any notifications.

Why do you need this? Maybe we can suggest you a workaround or provide a public API to do that.

All the best,
Alex


Post by mpathella »

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

so, by using above reference we are trying to overriding the findClosestSuccessor() in new bryntum scheduler.is there any possible solution other than overriding?


Post by mats »


Post by mpathella »

Hi mats,
i am trying to override the below function and implementing custom sorting.
Scheduler.view.mixin.SchedulerEventRendering#horizontalEventSorterFn

i need to now in what way 'a' event and 'b' event values enter into this function.
for example if one resource 'R' have e1(10:00 am - 11:00 am), e2(12:30 pm - 1:30 pm), e3(3:00 pm - 4:00 pm), e4(5:30pm - 6:30 pm)events are there for particular day.
while loading the scheduler for that day above function will be called number of times right. like e1 & e2 are called then e2 &e3, e3& e4 are 'a' and 'b' respectively?


Post by pmiklashevich »

horizontalEventSorterFn is a config on the scheduler.

new Scheduler({
    horizontalEventSorterFn(a, b) {
        // TODO: implement me
        return -1;
    },

Please check out Scheduler.view.orientation.HorizontalRendering.eventSorter function implementation. It is private, but that will give you an idea of how default sorting works. There are no guarantees in which order events come to the "a" and "b" arguments. It is similar to Array.sort function.

Pavlo Miklashevych
Sr. Frontend Developer


Post by mpathella »

sorting_issue.PNG
sorting_issue.PNG (99.85 KiB) Viewed 1378 times

ok.in our case we have two types of events one type is main event (which is in blue color) other one is sub event(which is in dark grey color) as shown in above attachment. by overriding horizontalEventSorterFn is it possible to show sub events (which are not overlapping with main events) below line irrespective of date and time like sub event which is having overlapping time with main event?


Post by mats »

Yes for sure, you can review this demo showing you how to do exactly this: https://bryntum.com/examples/scheduler/layouts/


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 1348 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 1348 times

if subevents have different time other than this (in between time of main event time) they are showing below of the main event. 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?


Post by mats »

Please start a new thread with this question, as this seems unrelated to the original post.


Post Reply