Set clear button in calendar in Angular Calendar component

17 Nov 20223 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.

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

@Component({
    selector: 'app-root',
    styleUrls: ['styles.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];
        //creates the custom element for clear button
        clearBtn.className = 'e-btn e-clear e-flat';
        clearBtn.textContent = 'Clear';
        footerElement.prepend(clearBtn);
        this.ejCalendar.element.appendChild(footerElement);
        let proxy = this;
        // custom click handler to update the value property with null values.
        document.querySelector('.e-footer-container .e-clear').addEventListener('click', function() {
            proxy.ejCalendar.value = null;
        })
    });
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);