Set Clear Button in JavaScript Calendar control

08 May 2023 / 1 minute to read

To configure clear button in Calendar UI, do the following:

To the created event of the Calendar, add the required elements to make clear button visible. In the following example, Essential JS 2 button component within div element is used.
When the e-footer class is used, the div tag acts as the footer.
Using these button, selected date can be cleared.
Bind the required event handler to the button tags to update the value.

Code example is as follows:

Source

Preview

app.ts

index.html

styles.css

import { Calendar } from '@syncfusion/ej2-calendars';
// creates a Calendar with today and clear buttons.
let calendarObject: Calendar = new Calendar({
created: onCreate
});
calendarObject.appendTo('#element');
function onCreate() {
//creates the custom element for clear button.
let clearBtn: HTMLElement = document.createElement('button');
let footerElement: HTMLElement = document.getElementsByClassName('e-footer-container')[0];
clearBtn.className = 'e-btn e-clear e-flat';
clearBtn.textContent = 'Clear';
footerElement.prepend(clearBtn);
this.element.appendChild(footerElement);
}
// custom click handler to update the value property with current date object.
document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
calendarObject.value = new Date();
calendarObject.dataBind();
});

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Calendar control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <!--style reference from app-->
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
   <!--style reference from the Calendar component-->
   <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
   <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
   <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!--Element which is going to render-->
        <div id='element'></div>
    </div>
</body>

</html>

/* Example -styles */

#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}


/* custom -styles */

.e-clear { /* csslint allow: adjoining-classes*/
    margin-right: 81px;
}