search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Angular Scheduler - Horizontal scroll position

Asked by Martin Säfsten
2 months ago.

Hey,

I'm struggling a bit with the position of horizontal scrolling, and making it stay where the user scrolled to. Some events trigger a reset of the scroll position for some reason. An example is rightclicking to show context menu after multi-select. Often, but not always, the horizontal scroll jumps away to another time.

I also have a custom calendar that changes the date of the scheduler (using cellGroupBy: 'Hour') and that also resets the scroll position. I also want the position to survive a route change in my Angular app, and potentially a refresh.

Given the wierd behavior, and the functionality I want, I basically want to store the scroll position in session, or in localStorage, and set the scrollPosition when Im loading/reloading/changing something in the scheduler.

So I have a couple of questions.

1. I'm not using dynamic event loading, so the onScroll event doesnt work for my scheduler. Is there an alternative event that I can use to get the current scroll position when the user scrolls?

2. When is it recommended to call "setScrollX" after a resource/event swap?

DayPilot version: 2018.4.3497
Angular version: 7.1.2

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

It looks like the problem might be the scrollTo/scrollX/scrollY properties in the scheduler config object. If you add them to the config they will be re-applied whenever the Scheduler detects a change. In versions prior to 2019.1.3531 this includes a change in the events object (https://javascript.daypilot.org/daypilot-pro-for-javascript-2019-1-3531/).

I'm checking the other issues:

1. It looks like the solution would be calling onScroll even if dynamic loading is disabled. In plain JavaScript you can hook the onscroll event directly using the DOM element but that would feel like a workaround in Angular:

this.scheduler.control.nav.scroll.addEventListener("scroll", function(e) { 
  console.log(e.srcElement.scrollLeft); 
});

2. If you call setScrollX() and Angular is detected the scrolling is postponed until after the changes are applied. If you use the config object to trigger updates you can simply call setScrollX() after modifying the config object.

Please let me know if it didn't help.

Comment posted by Martin Säfsten
2 months ago.

Hey Dan. Thanks for the reply. Updating the daypilot to the latest version (2019.1.3538) did not fix the problem I noticed.

I recorded the scenario with the context menu here: https://www.youtube.com/watch?v=90LFDfnmk64

I checked the config object, and we dont use any scroll property directly.

We call control.scrollTo after we get the resources and events to set the horizontal scroll to roughly the first event loaded. If I remove the scrollTo call here it stops the behavior with the context menu above.

I tried shuffling the order of the the rows in the subscribe but it didnt change anything.

this.dayservice.getSchedulesAndActions()
.pipe(takeUntil(this.ngUnsubscribe$))
.subscribe((newData) => {
this.dayscheduler.control.resources = newData.daySchedules;
this.dayscheduler.control.events.list = newData.dayActions;
this.setHorizontalScrollbarToFirstEvent(newData.dayActions);
this.dayscheduler.control.update();
});
private setHorizontalScrollbarToFirstEvent(events: ExtendedDaypilotEvent[]): void {
if (!events || events.length === 0) { return; }
const times = events.map((item) => moment(item.start));
const min = moment.min(...times);
if (this.dayscheduler && this.dayscheduler.control) {
this.dayscheduler.control.scrollTo(min.subtract(15, 'm').format('YYYY-MM-DD HH:mm:ss'));
}
}

Comment posted by Martin Säfsten
2 months ago.

Hey Dan,

Any news on my problem?

New Reply
This reply is
Your name (optional):