Schedular not working in Angular 9


#1

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 https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html

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');
	scheduler.parse([
	  { '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' },		 
	]);
}

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


 

 









SCSS
:host{
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.

Regards,
Nanda Kumarcomponents.zip (1.4 KB)


Needed information to prepare Demo
#2

Hello @nanda.reddy,

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

    scheduler.createUnitsView({
      name: 'unit',
      property: 'section_id',
      list: sections
    });

But you didn’t add the dhtmlxscheduler_units extension(1 step from the guide):
https://docs.dhtmlx.com/scheduler/units_view.html

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,


#3

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


#4

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.