Set clear button in calendar in Angular Calendar component

27 Sep 20233 minutes to read

The following steps illustrate how to configure clear button in Calendar UI.

1. On created event of Calendar add the required elements to have clear button. Here we have used div with Essential JS 2 Button component.

2. Use the e-footer class to the div tag to act as the footer.

3. Use button to clear the selected date from the calendar.

4. Bind the required event handler to the button tag to clear the value.

Below is the code example.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
    selector: 'app-root',
    styleUrls: ['./style.css'],
    template: `
        <!-- Bind created event to add the clear button --->
        <ejs-calendar #ejCalendar (created)='onCreate()'></ejs-calendar>
        `
})
export class AppComponent {
    @ViewChild('ejCalendar') ejCalendar?: CalendarComponent;
    onCreate() {
        let clearBtn: HTMLElement = document.createElement('button');
        let footerElement: HTMLElement = document.getElementsByClassName('e-footer-container')[0] as HTMLElement;
        //creates the custom element for clear button
        clearBtn.className = 'e-btn e-clear e-flat';
        clearBtn.textContent = 'Clear';
        footerElement.prepend(clearBtn);
        (this.ejCalendar as CalendarComponent ).element.appendChild(footerElement);
        let proxy = this;
        // custom click handler to update the value property with null values.
        (document.querySelector('.e-footer-container .e-clear') as Element ).addEventListener('click', function() {
            (proxy.ejCalendar as CalendarComponent ).value = null as any;
        })
    };
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);