Search results

Set clear button

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
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);
#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;
}