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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Positioning Timeline Schedule in current time

Thread ID:





145578 Jun 28,2019 01:22 PM UTC Feb 1,2021 07:32 AM UTC JavaScript - EJ 2 13
Tags: Schedule
Gerson C Teixeira
Asked On June 28, 2019 01:22 PM UTC


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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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. 

Jiri Richter
Replied On 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? 

Vengatesh Maniraj [Syncfusion]
Replied On 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. 


Replied On February 24, 2020 10:40 PM UTC

Any update on this fix?

Vengatesh Maniraj [Syncfusion]
Replied On 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. 


Replied On 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 | /**

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 

Replied On 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.


Nevitha Ravi [Syncfusion]
Replied On 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. 


Replied On 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

Nevitha Ravi [Syncfusion]
Replied On 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.


Replied On 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.


Vinitha Devi Murugan [Syncfusion]
Replied On February 1, 2021 07:32 AM UTC

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon