How to set clear button in React Calendar

4 Sep 20264 minutes to read

The following steps illustrate how to add a Clear button to the React Calendar UI that resets the selected value when clicked.

  1. Handle the React Calendar’s created event and append the clear-button elements to the React Calendar footer. This example uses a div containing a Syncfusion Button component.

  2. Add the e-footer class to the div so that Syncfusion treats the element as part of the React Calendar footer.

  3. Bind a click event handler on the button to clear the selected date by setting the value property to null (or undefined).

  4. Ensure the value property update is applied through state, the component instance, or a bound handler so the React Calendar re-renders to reflect the cleared selection.

The e-footer class is required. Without it, the appended element renders inside the body of the page, not the React Calendar’s footer region.

The following code example demonstrates the implementation.

// 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'));