Scheduler view is not rendering initially in Angular with v5.3.14

Scheduler
#1

Hi,
I am using Dhtmlx scheduler v5.3.14 in my Angular project. I have created basic-scheduler component. But on initial load, it is appearing like this

image
image1044×196 2.9 KB

then, I need to click on buttons, then grid view and other buttons appears properly.

This is my basic-scheduler.component.html code

<div #scheduler_here
	class="dhx_cal_container"
	style="width:100%; height:600px;">
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button"></div>
		<div class="dhx_cal_next_button"></div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab"
			name="day_tab"></div>
		<div class="dhx_cal_tab"
			name="week_tab"></div>
		<div class="dhx_cal_tab"
			name="month_tab"></div>
	</div>
	<div class="dhx_cal_header"></div>
	<div class="dhx_cal_data"></div>
</div>

and this is basic-scheduler.component.ts code

import {
  Component, ElementRef, OnInit, ViewChild,
  ViewEncapsulation
} from '@angular/core';

declare let scheduler: any;

@Component({
  selector: 'basic-scheduler',
  templateUrl: './basic-scheduler.component.html',
  styleUrls: ['./basic-scheduler.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class BasicSchedulerComponent implements OnInit {
  @ViewChild('scheduler_here', { static: true }) schedulerContainer: ElementRef;


  ngOnInit(): void {
    scheduler.config.first_hour = 8;
    scheduler.config.last_hour = 18;

    scheduler.parse([
      {
        id: 1,
        text: 'Mock Meeting A',
        start_date: '2025-06-20 09:00',
        end_date: '2025-06-20 10:00'
      },
      {
        id: 2,
        text: 'Mock Meeting B',
        start_date: '2025-06-20 11:00',
        end_date: '2025-06-20 12:00'
      }
    ], 'json');

    scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'day');
  }
}
#2

Hello @profile,

The provided code fragment looks mostly correctly - but you should call the parse method after initializing scheduler:

    scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'day');

    scheduler.parse([
      {
        id: 1,
        text: 'Mock Meeting A',
        start_date: '2025-06-20 09:00',
        end_date: '2025-06-20 10:00'
      },
      {
        id: 2,
        text: 'Mock Meeting B',
        start_date: '2025-06-20 11:00',
        end_date: '2025-06-20 12:00'
      }
    ], 'json');

It’s quite hard to suppose what exactly goes wrong, as the issue can be connected with various reasons.

It may be helpful if you send me some simplified demo with necessary files and run instructions, that I will be able to run locally and reproduce the issue.

The things that may cause the issue:

As issue disappears after the first click, it may be connected with render loop, you can try to place some timeout inside ngOnInit, and call additional scheduler.render call, something like follows:

  ngOnInit(): void {
...

scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'day');

setTimeout(() => {
    scheduler.render();
}, 1000)

If you are using one of the modern angular versions it may affect scheduler(as version v5.3.14 is quite old) - in this case, the best approach is to update scheduler to one of the latest versions(the current is v.7.2.5):
https://docs.dhtmlx.com/scheduler/what_s_new.html

Kind regards,

#3

@Siarhei Thanks for the reply. I created simple project with this basic scheduler component, and there it is loading correctly. So, problem is something else, I am trying to figure it out. Meanwhile it is working correctly with setTimeout. Thanks.

1 Like