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:
-
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. -
When the
e-footer
class is used, the div tag acts as the footer. -
Using these button, selected date can be cleared.
-
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>