How to set clear button in Calendar in Angular Calendar

25 Sep 20263 minutes to read

The following steps demonstrate how to add a Clear button to the Angular Calendar UI and use it to clear the currently selected date.

  1. In the created event of the Angular Calendar, create and append the required elements for the Clear button. In this example, a div element containing an Essential® JS 2 Button component is added.

  2. Apply the e-footer CSS class to the div element so that it is displayed as the Angular Calendar footer.

  3. Create a button that is used to clear the selected date in the Angular Calendar.

  4. Bind a click event handler to the button and reset the Angular Calendar value when the button is clicked.

The following example demonstrates how to add a Clear button and clear the selected date programmatically.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




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

@Component({
imports: [
        
        CalendarModule,
        FormsModule
    ],


standalone: true,
    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;
        })
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));