Set Clear Button in JavaScript (ES5) Calendar control

30 Mar 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

index.js

index.html

styles.css

ej.base.enableRipple(true);

   var calendar = new ej.calendars.Calendar({
      created: onCreate
    });

    function onCreate() {
    //creates the custom element for today button.
    var clearBtn = document.createElement('button');
    var footerElement = 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 null values.
    document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
    calendar.value = null;
    calendar.dataBind();
});

}
 calendar.appendTo('#element');

document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";

<!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.1.35/ej2-base/styles/material.css" rel="stylesheet">
   <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
   <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!--Element which is going to render-->
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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;
}