Search results

Set clear button

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.

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