Integration with Angular 8

dlnatn · December 1, 2020, 12:50pm

We want to use the scheduler’s timeline view in our project. I transferred the demo to the project. But there is a distorted image. We are unable to perform the demo. Can you help? We are using Angular version 8. I shared the relevant screenshots below. I’ll be happy if you can help me. Thank you so much.
Code:

declare let scheduler any;
import"…/…/…/…/…/…/node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler.css";
import “…/…/…/…/…/…/node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler”;
import “…/…/…/…/…/…/node_modules/dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline.js”
import “…/…/…/…/…/…/node_modules/dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_daytimeline”;
import “…/…/…/…/…/…/node_modules/dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_limit”;

Siarhei · December 1, 2020, 5:04pm

Hello @dlnatn ,

Looks like the issue occurs, because you included the CSS file of the scheduler(dhtmlxscheduler.css) in an incorrect way:
https://recordit.co/vSJzaxukwU
so, the final HTML page can’t reach them.

The correct way is to import CSS styles through the angular-cli.json file, as you can see in our dem:

github.com

DHTMLX/angular-scheduler/blob/master/.angular-cli.json#L23


  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler.css"
  ],
  "scripts": [
    "../node_modules/dhtmlx-scheduler/codebase/dhtmlxscheduler.js"
  ],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

If it’s not your case, could you please provide me a simplified demo, which I will be able to run locally and reproduce the issue?