Set clear button in calendar in React Calendar component

24 Jan 20233 minutes to read

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 {
    onCreated() {
        const proxy = this;
        const clearBtn = document.createElement('button');
        clearBtn.setAttribute('class', 'e-btn e-clear e-flat');
        clearBtn.innerHTML = 'Clear';
        const footerElement = document.querySelector('.e-footer-container');
        footerElement.insertBefore(clearBtn, footerElement.childNodes[0]);
        document.querySelector(".e-clear").addEventListener("click", (e) => {
            proxy.value = null;
        });
    }
    render() {
        return (<CalendarComponent id="calendar" created={this.onCreated}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
// 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;
        footerElement.insertBefore(clearBtn,footerElement.childNodes[0]);
        (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'));