Scheduler Undefined

#1

I have the Pro version of the scheduler library and am trying to use it in an Angular app. I have set up a Gantt chart so I tried to set up the scheduler the same way. I imported Scheduler and SchedulerStatic like this:

import { Scheduler, SchedulerStatic } from ‘libraries/scheduler/dhtmlxscheduler’

then I define the scheduler variable like this:

scheduler: SchedulerStatic

then in the ngOnInit I get the instance like this:

this.scheduler = Scheduler.getSchedulerInstance();

and then in the ngAfterViewInit I init the scheduler like this:

this.scheduler.init(this.schedulerContainer.nativeElement, new Date())

When I run the project I get: Can not read property 'getSchedulerInstance' of undefined

#2

In order to have access to class object u need to declare variable:
declare let Scheduler: any;

But in your case this shouldn’t be necessary, simply declaring the instance variable should be enough:
declare let scheduler: any;

Both of these are intialized by dhtmlxscheduler js script. So by the time you try to access it in ngOnInit or ngAfterViewInit it should already be initialized.

Try it and let me know if it works for you :slight_smile:

#3

I am not sure what you mean. This same way works for the Gantt chart so I am not sure why it isn’t working for the scheduler. For the pro version it says to use Scheduler.getSchedulerInstance() to set up the instance of the schedule. I use this for the Gantt chart and it works great. Is there an example of how to initialize the scheduler with Angular using the pro version if you want to use more than one instance on the same page?

This is what I am currently doing and I get error that Scheduler is null:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from ‘@angular/core’;
import { Scheduler, SchedulerStatic } from ‘/libraries/scheduler/dhtmlxscheduler’;

@Component({
encapsulation: ViewEncapsulation.None,
selector: ‘calender’,
templateUrl: ‘./calender.component.html’,
styleUrls: [’./calender.component.css’],
})
export class CalenderComponent implements OnInit, AfterViewInit {
constructor() {}

scheduler: SchedulerStatic;
@ViewChild(‘scheduler’) schedulerContainer: ElementRef;

ngOnInit(): void {
this.scheduler = Scheduler.getSchedulerInstance();
}

ngAfterViewInit() {
this.scheduler.init(this.schedulerContainer.nativeElement, new Date());
}
}

#4

Hello @ndmoroz,

The scheduler is designed in a little bit different way than gantt, and sometimes requires a specific way to work with it.

The way provided in the previous answer is correct and can be used to create multiple instances of the scheduler, here is sceencast with few schedulers in one component):
https://recordit.co/ziaUlHTKLP

Is there an example of how to initialize the scheduler with Angular using the pro version if you want to use more than one instance on the same page?

We currently working on new framework integration guides unfortunately there is no ETA.
If you have an active license, please send a request using the ticket system, and I will send you a simple angular+multiple instances scheduler demo(as it uses the PRO version of the scheduler and I can’t post it in the forum).