Scheduler Pro with Angular

Scheduler
#1

I have used DHX scheduler (GPL) following the article: https://dhtmlx.com/blog/angular-dhtmlxscheduler-tutorial/ , and it work well.

I was trying to use Timeline view, and I found the function of scheduler in my code can’t work anymore.
Functions like scheduler.parse scheduler,config, etc. It’s all right when compile, the error occurred when the function was executed.

Error message :
ScheduleToolComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property ‘config’ of undefined

So, how can I use the dhtmlx-scheduler-evaluation in angular ?

For more information:

I resolved the compile error when I import {} from @types/dhtmlxcheduler in GPL version by adding this in Tsconfig.app.json :
“compilerOptions”: {
“outDir”: “…/out-tsc/app”,
“types”: [“dhtmlxscheduler”]
_}

After download the PRO version package, I remove the previous version：
npm uninstall dhtmlx-scheduler --save
npm uninstall @types/dhtmlxscheduler --save

and remove the folders:
/node-modules/dhtmlx-scheduler
@types/dhtmlxscheduler

and remove the line: “types”: [“dhtmlxscheduler”] in Tsconfig.app.json

then I install the PRO version by :
npm install D:\Project\scheduler_trial --save

in GPL version ,I use the scheduler instance by
import “dhtmlx-scheduler”;
import {} from “@types/dhtmlxscheduler”;

in Trail Version , I import like this
import “dhtmlx-scheduler-evaluation”
import { scheduler } from ‘dhtmlx-scheduler-evaluation’;

I found in GPL version(4.3.0), the “scheduler” was definited in @types/dhtmlxscheduler/index.d.ts
and in Trail version(5.3.6) it looks like in the “/node-modules/dhtmlx-scheduler-evaluation/dhtmlxscheduler.d.ts”

Getting the types file for Angular Schedler
#2

Hello @richard_zrg,

Thank you for the detailed description of the issue. Currently, this guide and demo are a little bit outdated, we will update them in the future.

The issue you have occurred is because missing type definitions, and can be fixed by adding this line into “scheduler.component.ts” file:
declare let scheduler: any;
Also, the old demo requires a few changes to work with the new version of the scheduler:

  1. Import styles inside the “styles.css” file:
    @import "../node_modules/dhtmlx-scheduler-evaluation/codebase/dhtmlxscheduler.css";

  2. Replace the date formatting method in the “scheduler.component.ts”:

 scheduler.dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
...

    private serializeEvent(data: any, insert: boolean = false): Event {
        const result = {};

        for (let i in data) {
            if (i.charAt(0) === '$' || i.charAt(0) === '_') {
                continue;
            }
            if (insert && i === 'id') {
                continue;
            }
            if (data[i] instanceof Date) {
                result[i] = scheduler.dateToStr(data[i]);
            } else {
                result[i] = data[i];
            }
        }
        return result as Event;
    }
  1. Remove the second parameter from the .parse method:
                scheduler.parse(data);

Here is the link to the updated demo:
https://files.dhtmlx.com/30d/5108b92858290202ea9b07045e5db6f7/angular-scheduler-master.zip

How to run:
1.)“npm install”
2.)“ng serve”