Set clear button in calendar in EJ2 JavaScript Calendar control

26 Apr 20233 minutes 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:

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