Manual refresh in Angular Schedule component

27 Apr 202423 minutes to read

Refresh Template

In Scheduler, we can able to refresh the elements of the template alone instead of the entire scheduler by using the refreshTemplates public method. We can provide an additional option to refresh specific templates alone or all templates together by using this method. The following template names are accepted as an argument to refresh it specifically.

eventTemplate
dateHeaderTemplate
resourceHeaderTemplate
quickInfoTemplates
editorTemplate
tooltipTemplate
headerTooltipTemplate

In the following code example, you can see how to use the refreshTemplates method to refresh multiple templates. Here, we have added the following scheduler templates such as cellTemplate, dateHeaderTemplate, eventTemplate and resourceHeaderTemplate

app.component.html
app.component.ts
main.ts
<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, we can able to refresh the layout manually without re-render the DOM element by using the refreshLayout public method. The following example code explains to know how to use the refreshLayout method.

app.component.ts
main.ts
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));