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

Angular2 scrollTo() on click event

Asked by Martin
7 years ago.

I am using the new Angular2 component, and setting up a DayPilot.Angular.Schedule component for a daily schedule. I am using two radiobuttons to set the cellDuration to either 5, or 10 minutes. These works great.

I want the schedule to scroll to a specific hour on init, and I am using the event "onAfterRender" to accomplish that. That also works great.

But when the radiobutton click event is fired, I also want to reset the scroll to the same hour, but the method Scheduler.control.scrollTo() does not scroll to the date that I input.

Here is my code:

Buttons in my template:

<input type="radio" name="cellduration" value="5" checked (click)="changeCellDuration($event)">5 min
<input type="radio" name="cellduration" value="10" (click)="changeCellDuration($event)">10 min

Here are my two functions in my component:

changeCellDuration(event) { //Called by the click event
this.cellDuration = event.srcElement.value;
this.scheduler1.config.cellDuration = this.cellDuration; //This works fine
this.resetScrollPosition(7); //This does not work
private resetScrollPosition(startHour: number) {
var startDate = (this.scheduler1.control.startDate as DayPilot.Date);
startDate = startDate.addHours(startHour); //Adds the nr of hours ontop of current date

the function "resetScrollPosition" is the function used in my onAfterRender, so I know that it works

onAfterRender: args => {

I also tested to use the control.setScrollX function in my "resetScrollPosition" function, using this formula:

this.scheduler1.control.setScrollX(this.scheduler1.control.cellWidth * ((startHour * 60) / this.scheduler1.control.cellDuration));

It works as expected on init, and works on the first time I switch cellDuration, but all following changes also breaks.

I have attached a screenshot of some debuglogs of these functions.

It shows 3 roundtrips into the function "resetScrollPosition" using the setScrollX formula mentioned above.

First one is the init, which returns the expected result. Second time, I switch from cellDuration 5, to 10, that also works as expected. Third I switch back from 10 to 5. Thats when the scrollX I input differs from the actual one set in the Scheduler.

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

This issue should be fixed now in the latest sandbox build (8.3.2510):

You can use the following code to keep the current position when changing the scale/cellDuration/cellWidth:

  switchToDayScale() {
    this.config.scale = "Day";
    this.config.cellWidth = 100;

  switchToHourScale() {
    this.config.scale = "Hour";
    this.config.cellWidth = 10;
Comment posted by Martin
7 years ago.

Thanks for the reply!

Getting this error when I updated to the latest sandbox version. I also get this when I took the latest release version.

TypeError: Cannot read property 'length' of undefined
at $h.diff (daypilot-angular.min.js:38)
at AngularScheduler.DayPilot.Angular.Scheduler.AngularScheduler.updateEvents (daypilot-angular.min.js:38)
at AngularScheduler.DayPilot.Angular.Scheduler.AngularScheduler.ngDoCheck (daypilot-angular.min.js:38)
at Wrapper_AngularScheduler.detectChangesInternal (wrapper.ngfactory.js:39)
at _View_AppComponent0.detectChangesInternal (component.ngfactory.js:218)
at _View_AppComponent0.AppView.detectChanges (core.umd.js:9197)
at _View_AppComponent0.DebugAppView.detectChanges (core.umd.js:9302)
at _View_AppComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9223)
at _View_AppComponent_Host0.detectChangesInternal (host.ngfactory.js:38)
at _View_AppComponent_Host0.AppView.detectChanges (core.umd.js:9197)

This is my config:

locale: "sv_SE",
startDate: "2016-10-22",
scale: "CellDuration",
cellGroupBy: "Hour",
eventHeight: 50,
barHidden: true,
rowMinHeight: 50,
rowHeaderWidth: 120,
cellDuration: this.cellDuration,
cellWidthSpec: "Fixed",
cellWidth: 12,
theme: "scheduler_green",
onAfterRender: args => {
console.log("init from onAfterRender");

Comment posted by Dan Letecky [DayPilot]
7 years ago.

Thanks for reporting the issue.

It happens when the [events] attribute is not specified or doesn't point to an array.

It's fixed now in build 2512. Let me know if there is any problem.

Comment posted by Martin
7 years ago.

Thanks, that worked great!

Both the scrollTo and setScrollX works as intended now as well.

I also tried the code you provided (this.scheduler1.control.scrollTo(this.scheduler1.control.getViewPort().start);), and that is probably a better way of handling the change in cellDuration. Thanks for the tip!

On another topic, are there any plans of adding the DayPilot.Modal into this angular module? Or maybe making a typescript d.ts for it? It'd be nice to not have to use another lib for the modals I plan on using in the click events.

Thanks again!

Comment posted by Dan Letecky [DayPilot]
7 years ago.

The current DayPilot.Modal can't be used because you'd want to build the content as an Angular2 component.

The Angular 2 replacement for the modal dialog is in the works. It uses a slighly different approach (and visual layout) but it lets you define the content inline like this:

<daypilot-modal #modal>
  <form #newEventForm="ngForm">
    <h2>New Event</h2>
    <input [(ngModel)]="name" name="name" required> 
    <button type="submit" (click)="createEvent()" [disabled]="!newEventForm.form.valid">OK</button>        
    <button (click)="modal.close()" formnovalidate>Cancel</button>        

It will be added in one of the next builds so you'll be able to try it out.

Comment posted by Martin
7 years ago.

Cant wait! Thanks!

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