scrolling to a specific day is not working as expected

Asked by T175
2 years ago.

I'm using the trial pro version and getting the issue, that when I call the "scrollTo" function, it is not scolling exactly to the selected day but to the selected month.
Here is the explaination:

I've a filter and search button. The user can select a time period. When the user clicks on filter button, I scroll to the selected period.

search(){
 const day = filter.dayFrom; // "2021-08-13"
 if ( this.scheduler.visibleStart() <= day && day < this.scheduler.visibleEnd()) {
        this.scheduler.scrollTo(day, "fast");
 } else {
        this.config.startDate = dayFrom.firstDayOfMonth();;
        this.scheduler.scrollTo(day, "fast");
 }
}

the case is now: the scheduler is pointing now on the current time(05-2021). when I click search it calls the "search" mehtod and scrolls to the firstDayOfMonth // "2021-08-01".

BUT when I click search again it scrolls to "2021-08-13", which is supposed to be done by the first call. The reason probably now is, that the scheduler is pointing to the wanted month August.

javascript

Answer posted by Dan Letecky [DayPilot]
2 years ago.

In Angular/React, you can't mix the config changes with direct API calls like this. The config changes are merged and applied at once after the current code block finishes. The result of this logic is that scrollTo() is called first and then the current month is changed.

There are three options:

1. You can switch to infinite scrolling which will automatically shift the current range when scrollTo() is called:
https://doc.daypilot.org/scheduler/infinite-scrolling/

2. You can use the direct API to change the date and scroll to the desired date:

this.scheduler.update({
  startDate: dayFrom.firstDayOfMonth()
  scrollTo: dayFrom
});

In this case you need to remove startDate from config.

3. You can postpone the scrollTo() call using setTimeout:

this.config.startDate = dayFrom.firstDayOfMonth();
setTimeout(() = > {
  this.scheduler.scrollTo(day, "fast");
}, 0);

Comment posted by T175
2 years ago.

1- Infinite loop is not practical for me, since I have to change some other implemetations.
3- has not worked.

2- is working only if I did it like this:

´´´
this.config.startDate = start;
this.config.days = days;

this.scheduler.update({
startDate: start,
days: days,
scrollTo: day,
});
´´´

If I delete the first two lines, it does not scroll anymore :|

Now it is working, but I don't know how!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

scrolling to a specific day is not working as expected

Products

Learn

Get Support

DayPilot Pro