Set Clear Button in Calendar Control

27 Aug 20262 minutes to read

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

  1. Bind the created event on the Calendar tag and add the required elements to make the clear button visible. In the following example, an HTML button styled with Essential JS 2 button classes is used.

  2. The footer container uses the e-footer-container class. The clear button is prepended to this existing footer element.

  3. Using this button, the selected date can be cleared.

  4. Bind a click handler to the button to clear the selected value. The handler is attached in script after the button is created.

  5. Add the .e-clear CSS rule to position the clear button within the footer.

@Html.EJS().Calendar("calendar").Created("onCreate").Render()

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
            calendarObject = document.getElementById('calendar').ej2_instances[0];
            calendarObject.value = null;
            calendarObject.dataBind();
        });
    });
    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';
        footerElement.prepend(clearBtn);
        this.element.appendChild(footerElement);
    }
</script>

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

View Sample in GitHub.