Search results

Set the Clear Button in ASP.NET MVC Calendar control

20 Jan 2022 / 1 minute to read

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

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

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
            calendarObject = document.getElementById('calendar').ej2_instances[0];
            calendarObject.value = null;
    function onCreate() {
        //creates the custom element for clear 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';

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