Schedular not working in Angular 9


Hello Support,

We are not able to load Scheduler in Angular9 application. Also, for our application, we need to have explicitly on units as show in

Please find below sample code which we are trying for

Component :
export class SchedulerComponent implements OnInit {
@ViewChild(‘scheduler_here’) schedulerContainer: ElementRef;
constructor(private eventService: EventService) { }
ngOnInit() {
const sections = [{key: 1, label: ‘Section A’}, {key: 2, label: ‘Section B’}, {key: 3, label: ‘Section C’}, {key: 4, label: ‘Section D’}];

	scheduler.locale.labels.unit_tab = 'Unit';
	scheduler.locale.labels.section_custom = 'Section';
	scheduler.config.details_on_create = true;
	scheduler.config.details_on_dblclick = true;

	scheduler.config.lightbox.sections = [
	  {name: 'description', height: 130, map_to: 'text', type: 'textarea', focus: true},
	  {name: 'custom', height: 23, type: 'select', options: sections, map_to: 'section_id'},
	  {name: 'time', height: 72, type: 'time', map_to: 'auto'}

	scheduler.createUnitsView({		  name: 'unit',		  property: 'section_id',		  list: sections		});
	scheduler.config.multi_day = true;
	scheduler.init(this.schedulerContainer.nativeElement, new Date(2017, 5, 30), 'unit');
	  { 'id': '1u2', 'start_date': '2017-06-30 12:00:00', 'end_date': '2017-06-30 14:00:00', 'text': 'Section A test',	'section_id': '1'  },
	  {	'id': '1u3','start_date': '2017-06-30 10:00:00', 'end_date': '2017-06-30 11:00:00',	'text': 'Section B test',	'section_id': '2'  },
	  {	'id': '1u3','start_date': '2017-06-1 10:00:00',	'end_date': '2017-07-30 11:00:00',	'text': 'Section B test',	'section_id': '2' },		 

<div #scheduler_here class=“dhx_cal_container” style=“width: 100%; height:100vh”>



display: block;
height: 100%;
position: relative;
width: 100%;

For reference I am attaching the code in zip format.
Also, just want to check, do we have a smart rendering concept where we can load around 1200 appointments.

Nanda (1.4 KB)

Needed information to prepare Demo

Hello @nanda.reddy,

As I can see in attached files, you are trying to create the Units view:

      name: 'unit',
      property: 'section_id',
      list: sections

But you didn’t add the dhtmlxscheduler_units extension(1 step from the guide):

You can add the extension as a script or using import:

import "*path*/dhtmlxscheduler_timeline.js";

If it won’t help, could you please provide me a simplified demo with all the necessary files, which I will be run locally and reproduce the issue?

Kind regards,


Hello Siarhei,

After adding below import
import ‘path/dhtmlxscheduler_timeline’;

Now, we are facing error exception. I am attaching for the same.

Just want to know does dhtmlxscheduler_timeline.js file exists exactly in which path. Also this is a JS file.

Can you please host an Angular 9 application which contains Scheduler with createUnitsView units.
This would be useful rather than we try couple of times


Hello @nanda.reddy,

Maybe I wasn’t clear enough with descriptions, sorry for that.

The path - means, that you should replace it with the path to the extensions file, already it looks similar as follows:

import 'dhtmlx-scheduler-evaluation';
import 'dhtmlx-scheduler-evaluation/codebase/ext/dhtmlxscheduler_timeline.js'

Where the dhtmlx-scheduler-evaluation is the name of scheduler’s folder in node modules:

Anyway, I already sent you in pm the angular(v10) demo + scheduler_trial demo(with timeline and units views, as a code reference.