How to set the clear button in Vue Calendar

03 Sep 20265 minutes to read

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

  1. To the created event of the Calendar, add the required elements to make the clear button visible. In the following example, a div containing an Essential® JS 2 Button component is added.

  2. When the e-footer class is used, the div tag acts as the footer.

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

  4. Bind the required event handler to the button tags to update the value.

<template>
    <div id="app">
        <div class='wrap'>
            <ejs-calendar id='calendar' :created='onCreate' ref="CalendarInstance"></ejs-calendar>
        </div>
    </div>
</template>
<script setup>

import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";
import { ref } from 'vue';

const CalendarInstance = ref(null);

const onCreate = () => {
    let calendarObj = CalendarInstance.value;
    let clearBtn = document.createElement('button');
    let footerElement = document.getElementsByClassName('e-footer-container')[0];
    clearBtn.className = 'e-btn e-clear e-flat';
    clearBtn.textContent = 'Clear';
    footerElement.prepend(clearBtn);
    calendarObj.$el.appendChild(footerElement);
    document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
        calendarObj.value = null;
        calendarObj.dataBind();
    });
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";

.wrap {
    margin: 35px auto;
    width: 240px;
}

.e-clear {
    margin-right: 81px;
}
</style>
<template>
    <div id="app">
        <div class='wrap'>
            <ejs-calendar id='calendar' :created='onCreate' ref="CalendarInstance"></ejs-calendar>
        </div>
    </div>
</template>
<script>

import { CalendarComponent } from "@syncfusion/ej2-vue-calendars";

export default {
    name: "App",
    components: {
        "ejs-calendar": CalendarComponent
    },
    methods: {
        onCreate: function () {
            let calendarObj = this.$refs.CalendarInstance;
            let clearBtn = document.createElement('button');
            let footerElement = document.getElementsByClassName('e-footer-container')[0];
            clearBtn.className = 'e-btn e-clear e-flat';
            clearBtn.textContent = 'Clear';
            footerElement.prepend(clearBtn);
            calendarObj.$el.appendChild(footerElement);
            document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
                calendarObj.value = null;
                calendarObj.dataBind();
            });
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";

.wrap {
    margin: 35px auto;
    width: 240px;
}

.e-clear {
    margin-right: 81px;
}
</style>