Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The following steps illustrate how to configure clear button in Calendar UI.
created
event of Calendar add the required elements to have clear button. Here we have used div with Essential JS 2 Button component.e-footer class to the div tag to act as the footer.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);#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;
}