Set clear button in Calendar Control

19 Dec 20222 minutes 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.

CSHTML

@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>

NOTE

View Sample in GitHub.