Set clear button in calendar in Vue Calendar component

11 Jun 20244 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 the clear button visible. In the following example, div with Essential JS 2 button component 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 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>