Search results

Set Clear Button in React Calendar component

The following steps illustrate how to configure clear button in Calendar UI.

  • On created event of Calendar add the required elements to have clear button. Here we have used div with Essential JS 2 Button component.
  • Use the e-footer class to the div tag to act as the footer.
  • And use the button to clear the selected date.
  • Bind the required event handler to the button tags to update the value.

Below is the code example

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {

    public onCreated(): void {
        const proxy: any = this;
        const clearBtn = document.createElement('button');
        clearBtn.setAttribute('class', 'e-btn e-clear e-flat');
        clearBtn.innerHTML = 'Clear';
        const footerElement: HTMLElement = document.querySelector('.e-footer-container') as HTMLElement;
        (document.querySelector(".e-clear") as HTMLElement).addEventListener("click",(e) => {
            proxy.value = null;
    public render() {
        return (
            <CalendarComponent id="calendar" created={this.onCreated} />

ReactDOM.render(<App />, document.getElementById('element'));