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

Positioning Timeline Schedule in current time


How can I position the schedule, using view timeline, on current time?

When fill the datasource I want to scroll the schedule to current hour/minute. I want exactly scroll until the timeIndicator stay on center of schedule. Is that possible?

Thank you.

13 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team July 1, 2019 05:50 AM UTC

Hi Gerson,  
Syncfusion greetings. 
Kindly refer the below UG link to adjust the scroller based on system time. 

JR Jiri Richter January 9, 2020 09:56 AM UTC

In TimelineWeek view, this is not entirely useful as the scrollTo() method will always take you to the specified time of the first day in the view. So basically, it works only on Mondays :)
Is there another way to scroll to a time and day? Or are there plans to add this functionality? 

VM Vengatesh Maniraj Syncfusion Team January 10, 2020 05:46 AM UTC

Hi Gerson, 

We have validated the reported case and we have consider this as issue and logged the bug report. The fix for this issue will be included in our weekly patch release on January 28, 2020. We will ensure the fix and update the further details on January 29, 2020. Kindly be patience until then. 


JA Jarmo February 24, 2020 10:40 PM UTC

Any update on this fix?

VM Vengatesh Maniraj Syncfusion Team February 25, 2020 05:36 AM UTC

Hi Gerson, 

Sorry for the delay. 

We have fixed the reported issue and it has reflected in our v17.4.46 package version. You can get it by upgrading your package version to v17.4.46.    

Kindly let us know if you need further assistance. 


BR Brian January 16, 2021 11:26 PM UTC


I'm using version : @syncfusion/ej2-react-schedule": "^18.3.51

Currently I'm on TimelineWeek, showing 2 week. I wanted to have the scrollbar to point to my current date. 
Example in the Timeline, it show 11 Jan - 24 Jan. My current date is 17 Jan, I would like to have the scroll bar point to 17 Jan upon first load.

I'm using reactJS's hook to implement the ScheduleComponent.

const [scheduleObject, setScheduleObject] = React.useState();

  ref={(schedule) => setScheduleObject(schedule)}
    timeScale={{ enable: true, interval: 180, slotCount: 3 }}

function onCreated() {
    console.log(new Date());
    scheduleObject.scrollTo(new Date());

When I set the 'scrollTo' with current date and time, it gives me this error. Can you give me some guidance if I set it wrongly or some where is wrong wen I'm trying to set it?

TypeError: startEndTime.split is not a function
G:/Projects CommiTz/brainy/brainy-entertainment/node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1024
  1021 | Schedule.prototype.getStartEndTime = function (startEndTime) {
1022 | if (!isNullOrUndefined(startEndTime) && startEndTime !== '') {
1023 | var startEndDate = util.resetTime(this.getCurrentTime());
> 1024 | var timeString = startEndTime.split(':');
| ^ 1025 | if (timeString.length === 2) {
1026 | startEndDate.setHours(parseInt(timeString[0], 10), parseInt(timeString[1], 10), 0);
1027 | }
G:/Projects CommiTz/brainy/brainy-entertainment/node_modules/@syncfusion/ej2-schedule/src/schedule/renderer/timeline-view.js:61
  58 |         }
59 | }
60 | }
> 61 | date = isNullOrUndefined(scrollDate) ? this.parent.getStartEndTime(hour) : date;
| ^ 62 | if (isNullOrUndefined(date)) {
63 | return;
64 | }
G:/Projects CommiTz/brainy/brainy-entertainment/node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1699
  1696 |         this.activeView.scrollToDate(scrollDate);
1697 | }
1698 | else if (this.activeView.scrollToHour) {
> 1699 | this.activeView.scrollToHour(hour, scrollDate);
| ^ 1700 | }
1701 | };
1702 | /**

BS Balasubramanian Sattanathan Syncfusion Team January 18, 2021 05:58 AM UTC

Hi Brian, 

Thanks for contacting Syncfusion Support. 

We have validated your reported problem at our end and suggest you to pass the formatted date to the scrollTo method like the below code snippet. 

this.scheduleObj.scrollTo(this.instance.formatDate(new Date(), { skeleton: 'hm' })); 

Kindly try the above solution and let us know if you need further assistance. 

Balasubramanian S 

BR Brian January 18, 2021 10:36 PM UTC


Can you tell me what are the string result of this?
this.instance.formatDate(new Date(), { skeleton: "hm" })

Because I'm using hook, thus I can't seem to find a way to see what are the result of this.
I'll be using 'moment' to construct the same result as this, and feedback to you if it works.


NR Nevitha Ravi Syncfusion Team January 19, 2021 06:35 AM UTC

Hi Brain, 

Thanks for your update. 

We suspect that your requirement is to set the scroll bar on selectedDate (current date) of the scheduler on initial load, which is the default behavior of our scheduler. Please refer to the following sample for the same in which we haven’t use scrollTo public method. 

Q: Format to be used for scrollTo 
You should pass hour as string in first parameter and date in second parameter which is optional. Since in your shared example you have used Date format in first parameter, script error throws at your end. 

For example, you need to pass “18:00” to set the scrollbar on 6:00 PM. 

Q: want the scroll bar to point on Jan 15, 2018. 
In the JavaScript, month starts from 0 i.e. for January 0 and so on. In our previously shared sample the selectedDate is new Date(2018, 1, 15) which represents February 15, 2018. So we have modified the selected date to January 15, 2018 in the following sample. 

              ref={schedule => (this.scheduleObj = schedule)} 
              selectedDate={new Date(2018, 0, 15)} 
              eventSettings={{ dataSource: this.data }} 

Please check the above cases and get back to us if you need any further assistance. 


BR Brian January 19, 2021 02:15 PM UTC

Dear Nevitha,

Thanks for your guidance.
Now I've understand how the scrollbar points, which is looking at the 'SelectedDate'.

I just realised, when I'm using below to do 'group', somehow the scroll bar doesn't point to the date that I want it to be(16Jan2021 - Current date 19Jan2021, but because I want to show 3 days before thus I deduct 3 day as SelectedDate). If I comment out below, it will scroll nicely, but I can't because I want the timeline to show the employee on the left side [refer screenshot]

group={{ enableCompactView: false, resources: ["Employee"] }}

I'm using :
timeScale={{ enable: true, interval: 180, slotCount: 3 }}

Hope you can guide me on solving this. Is it the way I'm setting the group wrong

NR Nevitha Ravi Syncfusion Team January 20, 2021 07:12 AM UTC

Hi Brian, 

Thanks for your update. 

We have checked the reported scenario be adding resources in the previously shared sample but were unable to replicate the issue. The scroller is moved to selected date on initial load at our end. 

Can you please check the above sample and share the following details to check the issue further at our end. 
  • Try to replicate the issue in above sample
  • Syncfusion package version
  • Share the CSS customization done at your application
  • Share complete schedule code snippet.


BR Brian January 28, 2021 04:22 AM UTC

Dear Nevita,

Sorry for the slow response, apologize on my previous finding regarding :

group={{ enableCompactView: false, resources: ["Employee"] }}

This is not valid after I keep on trying it out to see how it behave. 
For now I still couldn't get it go to the selected date on the first run, when the timeline is loaded, and if I change in the code to a different date, then save it (it will auto refresh) then it will populate into the correct date

Finally I'm able to point to the correct date with some workaround.

ref={(schedule) => setScheduleObject(schedule)}

With above, I'm able to get the instance of the scheduleObject. Below code, I'm looking at the 'scheduleObject' which being set then it will be called [similar to component mount]. Then I will need to make a timer and set the selectedDate that I want it to point to. Without timer, I will get error, perhaps is due to some data haven't populate, no idea.

React.useEffect(() => {
    const timer = setTimeout(() => {
      // console.log("This will run after 1 second!");
      scheduleObject.selectedDate = new Date(2021, 0, 28);
    }, 1000);
    return () => clearTimeout(timer);
  }, [scheduleObject]);

Lastly, thank you very much for all the support given to me and I really appreciate it. I hope if there's someone who might hit the same issue as me, can find these helpful.


VD Vinitha Devi Murugan Syncfusion Team February 1, 2021 07:32 AM UTC

Hi Brain, 
Thanks for your update. 
You are most welcome 😊. 

Live Chat Icon For mobile
Up arrow icon