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:

Created:

Updated:

Platform:

Replies:

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

Hi.

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. 
 
Regards, 
Karthi 


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. 


Regards, 
Vengatesh 


Jarmo
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. 

Regards, 
Vengatesh 



Brian
Replied On January 16, 2021 11:26 PM UTC

Hi,

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();

<ScheduleComponent
  ref={(schedule) => setScheduleObject(schedule)}
  created={onCreated.bind(this)}
>
  <ViewsDirective>
  <ViewDirective
    option="TimelineWeek"
    timeScale={{ enable: true, interval: 180, slotCount: 3 }}
    interval={2}
  />
  </ViewsDirective>
</ScheduleComponent>

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
ScheduleComponent.Schedule.getStartEndTime
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 | }
TimelineViews.scrollToHour
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 | }
ScheduleComponent.Schedule.scrollTo
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. 

Regards, 
Balasubramanian S 


Brian
Replied On January 18, 2021 10:36 PM UTC

Hi,

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.




Regards,
Brian

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. 
scheduleObj.scrollTo(“18:00”); 

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. 

            <ScheduleComponent 
              ref={schedule => (this.scheduleObj = schedule)} 
              width="100%" 
              height="550px" 
              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. 

Regards, 
Nevitha  


Brian
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 :
<ViewDirective
option="TimelineWeek"
timeScale={{ enable: true, interval: 180, slotCount: 3 }}
interval={2}
/>

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.

Regards, 
Nevitha 


Brian
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.

Regards,
Brian

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

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


CONFIRMATION

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