We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Scheduler intitial load really, really slow

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?

7 Replies

HB Hareesh Balasubramanian Syncfusion Team November 15, 2019 01:44 PM UTC

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, 

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, 

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


GI Giruga November 18, 2019 09:17 AM UTC


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'

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?

VD Vinitha Devi Murugan Syncfusion Team November 19, 2019 06:41 AM UTC

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. 
M.Vinitha devi 

SF Steve Furner November 5, 2020 08:10 PM UTC

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

RV Ravikumar Venkatesan Syncfusion Team November 6, 2020 12:06 PM UTC

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. 

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

Ravikumar Venkatesan 

JC Jean carlos lefchak July 9, 2021 07:26 PM UTC

when adding the records to the schedule:

let event:any;
let events: any[];



VD Vinitha Devi Murugan Syncfusion Team July 12, 2021 11:37 AM UTC

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. 
 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[0as any).StartTime); 
            let hoursstring = currTime.getHours() < 10 ? '0' + currTime.getHours().toString() : currTime.getHours().toString(); 
            let minutesstring = currTime.getMinutes().toString(); 
            let timestring = hours + ':' + minutes; 
            let dateDate = new Date(currTime.getFullYear(), currTime.getMonth(), currTime.getDate()); 
            // Check whether the added appointment date available in current rendered view or not. 
            let isDateAvailableInCurrentViewboolean = !!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; 
            // Apply scroll to the added appointment specific time 
API Link:  
Kindly try with the above sample and get back to us if you need any further assistance 

Live Chat Icon For mobile
Up arrow icon