Positioning Timeline Schedule in current time

[Gerson C Teixeira]

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]

Hi Gerson,  

 

Syncfusion greetings. 

 

Kindly refer the below UG link to adjust the scroller based on system time. 

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

https://stackblitz.com/edit/3gjc8f-r4wwsx?file=index.js 

 

Regards, 

Karthi 

[Jiri Richter]

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]

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. 

https://www.syncfusion.com/feedback/11212/scrollto-method-is-not-working-properly-in-timeline-views 

Regards, 

Vengatesh 

[Jarmo]

Any update on this fix?

[Vengatesh Maniraj]

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.    

https://ej2.syncfusion.com/documentation/release-notes/17.4.46/#schedule 

Kindly let us know if you need further assistance. 

Regards, 

Vengatesh 

[Brian]

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 |         }

View compiled

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 | }

View compiled

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

View compiled

[Balasubramanian Sattanathan]

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' })); 

Sample: https://stackblitz.com/edit/react-5go14k-xm8gkj?file=index.js 

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

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

Regards, 

Balasubramanian S 

[Brian]

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.

I looked into the sample: Sample: https://stackblitz.com/edit/react-5go14k-xm8gkj?file=index.js 

Regards,

Brian

[Nevitha Ravi]

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. 

https://stackblitz.com/edit/schedule-on-currrent-date?file=index.js  

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. 

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

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. 

https://stackblitz.com/edit/react-schedule-selected-date?file=index.js  

            <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]

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]

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. 

https://stackblitz.com/edit/react-schedule-selected-date-with-group?file=index.js  

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]

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]

Hi Brain, 

 

Thanks for your update. 

 

You are most welcome 😊. 

 

Regards, 

Vinitha