Search results

Set clear button in Angular Calendar component

04 Aug 2021 / 1 minute 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
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;
    })
});
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

/* custom -styles */

.e-btn.e-clear { /* csslint allow: adjoining-classes*/
    margin-right: 81px;
}