Scheduler intitial load really, really slow

[Giruga]

Hi again!

I have come to face an problem, that I am not able to solve by myself.

After trying to make the scheduler act like it should in our little project, I seem to have added .... something that slows the initial load of the scheduler A LOT.

'The page' loads quickly enough (I got the default Loading... text), but then there comes what I think is 'Scheduler loading' - and this loading takes more than 30 seconds.

After the load has been done, the scheduler is responsive and fast again.

The data load happens really fast (I am checking with console.logs etc + the amount of data is quite small (2 groups, ~10 resources, total of 50 appointments)

The data is loaded with forkJoin (4 async calls), piped with .pipe(takeUntil(this.onDestroy))

The schedule elements (with event bindings:)

<ejs-schedule #scheduleObj cssClass='timeline-resource-grouping' [selectedDate]="selectedDate" [group]="group"

      [eventSettings]="eventSettings" [firstDayOfWeek]='1' (actionComplete)="onAction($event)" (popupOpen)="onPopupOpen($event)"

      (resizeStop)="onResizeStop($event)" (dragStop)="onDragStop($event)" (eventRendered)="eventRendered($event)"

      (actionBegin)="onActionBegin($event)" (navigating)="onNavigate($event)">

Views: Agenda, TimelineDay & TimelineWeek, no extra services (only the TimelineViewsService)

Do you have any tips suggestions what to check? I have already investigated the package sizes and analyzed the stats of the whole app - nothing alarming there

As I am quite newbie with Angular, please feel free to check that I have also done all the 'obvious' steps :D

I do realize this is really broad question, but after days of investigating - and not having any answers - I am getting a bit lost

TL;DR; Are there any specific things that make the Scheduler init really slowly? How do You suggest I should tackle them?

[Hareesh Balasubramanian]

Hi Giruga, 

Greetings from Syncfusion Support. 

We have prepared a sample with 2 groups, 10 resources and with 50 data source but in our schedular takes only a reasonable time (5 sec) for the initial loading and the same can be viewed from the following sample link, 

Sample: https://stackblitz.com/edit/angular-3ta34u-6i4nbc?file=app.component.html 

Note: For loading “n” number of resources, we suggest you to use the virtual scrolling, it will increase the schedular performance for larger resources. Kindly refer the below link, 

https://ej2.syncfusion.com/angular/documentation/schedule/virtual-scrolling/ 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Giruga]

Hi!

And thank you for your reply.

Apparently I was not clear enough in my previous message - the amount of data etc. was 'FYI' info, not the problem. The slowness of init WAS NOT because of data

BUT! A breakthrough happened today. The reason for slowness was this starthour- attribute:

        <e-view option="TimelineDay" displayName="Day" [startHour]='startHour'

          [allowVirtualScrolling]="virtualScroll"></e-view>

By removing it the scheduler started to load in seconds.

Apparently as I had working hours etc that started before the starting hour, and that resulted in some kind of loop? I do not know.

But now it is fast again.

Which leads to the next question: How do I 'scroll' automatically to certain time-period?

I would like to 'scroll' automatically - let's say - to have the scheduler view 'start' at 08:00, but I still need to be able to scroll to earlier timeperiods - is there way to achieve this?

TL;DR; How can I scroll to wanted time 'automatically' after viewInit?

[Vinitha Devi Murugan]

Hi Giruga, 

 

Thanks for your update. 

 

Q1: We are happy that the problem has been resolved at your end. 

 

Q2: You can manually scroll to a specific time on scheduler by making use of the scrollTo method. Please refer below UG and sample link. 

 

https://ej2.syncfusion.com/angular/documentation/schedule/working-days/#how-to-scroll-to-current-time-on-initial-load  

https://ej2.syncfusion.com/angular/demos/#/material/schedule/scroll-to 

 

Regards, 

M.Vinitha devi 

[Steve Furner]

Hi vinita devi murugan , 
I have question here regarding virtualScrolling since I am not using  dataManager for scheduler . How can I use its scroll event . is there any custom event for that ?

because I have tried different ways but I am not getting scroll event and I am trying to get data from remote server. It would be helpful if you have any solution for it.

I am updating data source following way  

 this.eventSettings = {

                dataSource: eventObj  //events

            };

[Ravikumar Venkatesan]

Hi Steve, 

Greetings from Syncfusion support. 

We have validated your reported query at our end. Based on your query we suspect that you need to scroll to the particular resource when using virtual scrolling. Based on that we have prepared a sample and it can be available below. 

Sample: https://stackblitz.com/edit/angular-skzyer?file=app.component.ts 

Kindly try the above sample and if we misunderstood your requirement please share more details about your requirement to serve you better. 

Regards, 

Ravikumar Venkatesan 

[Jean carlos lefchak]

when adding the records to the schedule:
UPDATE:

let event:any;
let events: any[];
this.scheduleObj.addEvent(event);

FOR TO LIST:

this.scheduleObj.addEvent(events);

[Vinitha Devi Murugan]

Hi Steve, 

 

Thanks for your update. 

 

Based on your query, we suspect that you are using addEvent public method to create new events and want the scheduler to move on to that newly created event.  We achieved your requirement with the help of actionComplete event and scrollTo public method of our scheduler and same can be available below link. 

 

Sample: https://stackblitz.com/edit/scroll-scheduler-to-event-specific-type?file=app.component.ts  

 

 onActionComplete(args): void { 

        // This actionComplete event with requestType eventCreated called after the successful creation of event. 

        if (args.requestType === 'eventCreated') { 

            let currTime = new Date((args.data[0] as any).StartTime); 

            let hours: string = currTime.getHours() < 10 ? '0' + currTime.getHours().toString() : currTime.getHours().toString(); 

            let minutes: string = currTime.getMinutes().toString(); 

            let time: string = hours + ':' + minutes; 

            let date: Date = new Date(currTime.getFullYear(), currTime.getMonth(), currTime.getDate()); 

            // Check whether the added appointment date available in current rendered view or not. 

            let isDateAvailableInCurrentView: boolean = !!this.scheduleObj.getCurrentViewDates().find(item => { return item.getTime() == date.getTime() }) 

            if (!isDateAvailableInCurrentView) { 

                // If appointment not available in current rendered view change the scheduler to appointment date using below code 

                this.scheduleObj.selectedDate = date; 

                this.scheduleObj.dataBind(); 

            } 

            // Apply scroll to the added appointment specific time 

            this.scheduleObj.scrollTo(time, date); 

            this.addButtonObj.element.setAttribute('disabled', 'true'); 

        } 

    } 

 

API Link:  

https://ej2.syncfusion.com/angular/documentation/api/schedule/#actioncomplete  

https://ej2.syncfusion.com/angular/documentation/api/schedule/#scrollto  

 

Kindly try with the above sample and get back to us if you need any further assistance 

 

Regards, 

Vinitha