Schedular not working in Angular 9

Scheduler
#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 Units view

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.

js%20error
js%20error965×226 21.7 KB

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.

#5

Hi Siarhei,

Can you help me on it i am really stuck with it please help

Angular minimum version
#6

Hi @nithinneewee ,

It’s hard to suggest what exactly goes wrong in your case without details, or a simplified demo which I will be able to run locally and reproduce.

Here is the latest version of the framework demo, that you can use as a reference(it uses GPL versions of scheduler and gantt):
https://files.dhtmlx.com/30d/2ce72c35d2b5d86b149e8bd361ebe70b/angular11+gantt__GPL+scheduler_GPL.zip

You can add PRO version of scheduler instead of GPL, using the following instruction:
https://docs.dhtmlx.com/scheduler/install_with_bower.html#addingproeditionintoproject