Render Angular Scheduler Inside a Dialog

Render the Scheduler inside an Angular ng-template when opening the dialog.

Rendering the Scheduler before the dialog opens can cause incorrect layout and appointment rendering. To avoid this problem, render the Scheduler only when the dialog is opened.

app.component.ts

import { NgModule } from '@angular/core'
import { ScheduleAllModule, RecurrenceEditorAllModule } from '@syncfusion/ej2-angular-schedule'
import { DialogAllModule } from '@syncfusion/ej2-angular-popups'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { RouterModule } from '@angular/router'
import { CommonModule } from '@angular/common'



import { Component, ViewChild, Inject } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { TimelineViewsService , EventSettingsModel} from '@syncfusion/ej2-angular-schedule';

@Component({
imports: [ CommonModule, ScheduleAllModule, RecurrenceEditorAllModule, DialogAllModule, ],
standalone: true,
  selector: 'app-root',
  providers: [TimelineViewsService ],
  // specifies the template string for the Schedule component
  template: `<div id="container">
  <button (click)="onOpenDialog()">Open dialog</button>
  <ejs-dialog id="modalDialog" #modalDialog [closeOnEscape]="'false'" [visible]='false'
    [position]='position' [animationSettings]="animationSettings" height='94%' width='100%' [showCloseIcon]="'true'">
    <ng-template #content>
      <div *ngIf="renderSchedule">
        <ejs-schedule #schedule height='448px' width="100%" [(currentView)]="currentView" [(selectedDate)]="selectedDate" [eventSettings]="eventSettings">
          <e-views>
            <e-view option="TimelineDay"></e-view>
            <e-view option="TimelineWeek"></e-view>
          </e-views>
        </ejs-schedule>
      </div>
    </ng-template>
  </ejs-dialog>
</div>`,
})

export class AppComponent {
  @ViewChild('modalDialog') modalDialog: DialogComponent | undefined;
  public animationSettings: Object = { effect: 'SlideTop', duration: 400, delay: 0 };
  public renderSchedule: boolean = false;
  public selectedDate: Date = new Date(2022, 1, 3);
  public currentView = "TimelineWeek";
  public eventSettings: EventSettingsModel = {
    dataSource:[{
        Id: 1,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business goal of 2020.',
        StartTime: new Date(2022, 1, 3, 15, 0),
        EndTime: new Date(2022, 1, 3, 17, 0),
    },
    {
        Id: 2,
        Subject: 'Training session on JSP',
        Description: 'Knowledge sharing on JSP topics.',
        StartTime: new Date(2022, 1, 4, 15, 0),
        EndTime: new Date(2022, 1, 4, 17, 0),
    }],
  };
position: any;
  public onOpenDialog() {
    this.modalDialog!.show();
    this.renderSchedule = true;
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));