Programmatically Refresh Layout in Angular Scheduler

Refresh Template

In the Angular Scheduler, you can refresh specific template elements without re-rendering the entire component by using the refreshTemplates public method. Use this method to refresh one or more specific templates, or all templates at once. The following template names are accepted as arguments.

  • eventTemplate
  • dateHeaderTemplate
  • resourceHeaderTemplate
  • quickInfoTemplates
  • editorTemplate
  • tooltipTemplate
  • headerTooltipTemplate

The example below shows how to use refreshTemplates to refresh multiple templates. It uses scheduler templates such as cellTemplate, dateHeaderTemplate, eventTemplate, and resourceHeaderTemplate.

<div>
    <div style="display: flex;">
        <div style="padding-right: 10px;">
            <button ejs-button cssClass='e-info' (click)='refreshCellTemplate()'> Refresh
                cellTemplate </button>
        </div>
        <div style="padding-right: 10px;">
            <button ejs-button cssClass='e-info' (click)='refreshDateHeaderTemplate()'> Refresh
                dateHeaderTemplate </button>
        </div>
        <div style="padding-right: 10px;">
            <button ejs-button cssClass='e-info' (click)='refreshEventTemplate()'> Refresh
                eventTemplate </button>
        </div>
        <div style="padding-right: 10px;">
            <button ejs-button cssClass='e-info' (click)='refreshResHeaderTemplate()'> Refresh
                resourceHeaderTemplate </button>
        </div>
        <div style="padding-right: 10px;">
            <button #allTempObj ejs-button cssClass='e-info' (click)='refreshAllTemplate()'> Refresh All
                Template </button>
        </div>
    </div>
    <div>
        <ejs-schedule #scheduleObj width='auto' height='520px' [selectedDate]="selectedDate"
            [(currentView)]="currentView" [eventSettings]="eventSettings" [group]="group" [readonly]='readonly'>
            <ng-template #resourceHeaderTemplate let-data>
                <div class='res-template-wrap'>
                    <div class="resource-image "></div>
                    <div class="resource-details">
                        <div class="resource-name"></div>
                        <div class="resource-designation"></div>
                    </div>
                </div>
            </ng-template>
            <ng-template #dateHeaderTemplate let-data>
                <div class="date-text"></div>
                <div [innerHTML]="getWeatherImage(data.date)"></div>
            </ng-template>
            <ng-template #cellTemplate let-data>
                <div class="cell-template-wrap" *ngIf="data.type == 'workCells'"
                    [innerHTML]="getWorkCellText(data.date)">
                </div>
                <div class="cell-template-wrap" *ngIf="data.type == 'monthCells'"
                    [innerHTML]="getMonthCellText(data.date)">
                </div>
            </ng-template>
            <e-views>
                <e-view option="Week">
                    <ng-template #eventTemplate let-data>
                        <div class='app-template-wrap' [style.background]="data.SecondaryColor">
                            <div class="subject" [style.background]="data.PrimaryColor"></div>
                            <div class="time" [style.background]="data.PrimaryColor">Time:
                                
                                -
                                </div>
                            <div class="image">
                                <img src="https://ej2.syncfusion.com/demos/src/schedule/images/.svg"
                                    alt="" />
                            </div>
                            <div class="description"></div>
                            <div class="footer" [style.background]="data.PrimaryColor"></div>
                        </div>
                    </ng-template>
                </e-view>
                <e-view option="Month"></e-view>
                <e-view option="TimelineMonth"></e-view>
            </e-views>
            <e-resources>
                <e-resource field='DoctorId' title='Doctor Name' name='Doctors' [dataSource]='resourceDataSource'
                    textField='text' idField='id' colorField='color' workDaysField='workDays' startHourField='startHour'
                    endHourField='endHour'>
                </e-resource>
            </e-resources>
        </ejs-schedule>
    </div>
</div>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
import { CheckBoxAllModule, ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { extend, Internationalization } from "@syncfusion/ej2-base";
import {
    EventSettingsModel, ScheduleComponent, WeekService, MonthService, TimelineMonthService, ResizeService,
    DragAndDropService, View, GroupModel, ResourceDetails
} from "@syncfusion/ej2-angular-schedule";
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { webinarData } from './datasource';

@Component({
imports: [
        
        ScheduleModule,
        TimePickerModule,
        CheckBoxAllModule,
        ButtonModule
    ],
standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [WeekService, MonthService, TimelineMonthService, ResizeService, DragAndDropService],
    styleUrls: ['./index.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('scheduleObj', { static: true })
    public scheduleObj?: ScheduleComponent;
    public eventSettings: EventSettingsModel = { dataSource: extend([], webinarData, undefined, true) as Record<string, any>[] };
    public currentView: View = 'Week';
    public readonly = true;
    public selectedDate: Date = new Date(2021, 1, 15);
    public instance: Internationalization = new Internationalization();
    public resourceDataSource: Record<string, any>[] = [
        { text: 'Will Smith', id: 1, color: '#ea7a57', workDays: [1, 2, 4, 5], startHour: '08:00', endHour: '15:00' },
        { text: 'Alice', id: 2, color: 'rgb(53, 124, 210)', workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' },
        { text: 'Robson', id: 3, color: '#7fa900', startHour: '08:00', endHour: '16:00' }
    ];
    public group: GroupModel = { resources: ['Doctors'] };
ImageName: any;

    constructor() {

    }

    public getDoctorName(value: ResourceDetails): string {
        return ((value as ResourceDetails).resourceData) ?
            (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField!] as string
            : value.resourceName as string;
    }

    public getDoctorImage(value: ResourceDetails): string {
        const resourceName: string = this.getDoctorName(value);
        return resourceName.replace(' ', '-').toLowerCase();
    }

    public getDoctorLevel(value: ResourceDetails): string {
        const resourceName: string = this.getDoctorName(value);
        return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
    }

    public getWeatherImage(value: Date): string {
        switch (value.getDay()) {
            case 0:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg"/><div class="weather-text">25°C</div>';
            case 1:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">18°C</div>';
            case 2:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">10°C</div>';
            case 3:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">16°C</div>';
            case 4:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">8°C</div>';
            case 5:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg"/><div class="weather-text">27°C</div>';
            case 6:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">17°C</div>';
            default:
                return '';
        }
    }

    public getDateHeaderText(value: Date): string {
        return this.instance.formatDate(value, { skeleton: 'Ed' });
    }

    getMonthCellText(date: Date): string {
        if (date.getMonth() === 1 && date.getDate() === 23) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        } else if (date.getMonth() === 1 && date.getDate() === 9) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" />';
        } else if (date.getMonth() === 1 && date.getDate() === 13) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        } else if (date.getMonth() === 1 && date.getDate() === 22) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/thanksgiving-day.svg" />';
        } else if (date.getMonth() === 1 && date.getDate() === 14) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        }
        return '';
    }
    getWorkCellText(date: Date): string {
        let weekEnds: number[] = [0, 6];
        if (weekEnds.indexOf(date.getDay()) >= 0) {
            return "<span class='caption'>Weekend</span>";
        }
        return '';
    }

    public getTimeString(value: Date): string {
        return this.instance.formatDate(value, { skeleton: 'hm' });
    }
    refreshCellTemplate(): void {
        this.scheduleObj?.refreshTemplates("cellTemplate");
    }
    refreshDateHeaderTemplate(): void {
        this.scheduleObj?.refreshTemplates("dateHeaderTemplate");
    }
    refreshEventTemplate(): void {
        this.scheduleObj?.refreshTemplates("eventTemplate");
    }
    refreshResHeaderTemplate(): void {
        this.scheduleObj?.refreshTemplates("resourceHeaderTemplate");
    }
    refreshAllTemplate(): void {
        this.scheduleObj?.refreshTemplates();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refresh Layout

In Scheduler, you can refresh the layout manually without re-rendering DOM elements by using the refreshLayout public method. The example below shows how to use refreshLayout.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule'



import { Component, ViewChild } from '@angular/core';
import { ScheduleComponent, EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        ScheduleModule,
        ButtonModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService],
standalone: true,
    selector: 'app-root',
    // specifies the template string for the Schedule component
    template: `<button #refButton ejs-button id="refButton" cssClass='e-info' content="Refresh Layout" (click)="onButtonClick()"></button>
  <ejs-schedule #scheduleObj width='100%' height='520px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"></ejs-schedule>`
})
export class AppComponent {
    @ViewChild("scheduleObj")
    public scheduleObj?: ScheduleComponent;
    @ViewChild("refButton")
    public refButton?: ButtonComponent;
    public selectedDate: Date = new Date(2021, 10, 15);
    public eventSettings: EventSettingsModel = {
        dataSource: [{
            Id: 1,
            Subject: 'Testing',
            StartTime: new Date(2021, 10, 16, 10, 0),
            EndTime: new Date(2021, 10, 16, 12, 0),
            IsAllDay: false
        }, {
            Id: 2,
            Subject: 'Vacation',
            StartTime: new Date(2021, 10, 18, 10, 0),
            EndTime: new Date(2021, 10, 18, 12, 0),
            IsAllDay: false
        }]
    }
    public onButtonClick(): void {
        this.scheduleObj?.refreshLayout();
        this.refButton?.element.setAttribute('disabled', 'true');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));