Multi select in Vue Calendar component
11 Jun 20243 minutes to read
Calendar provides an option to select single or multiple dates by using isMultiSelection
and values
properties. By default, isMultiSelection
property will be in disabled state.
API | Type | Description |
---|---|---|
isMultiSelection |
Boolean | Enables the multi-selection option in the Calendar control |
values |
Date[] | Gets or sets the date range values in multi-selection option |
The following example demonstrates the functionality of isMultiSelection
property and values
properties in the Calendar control.
<template>
<div id="app">
<div class='wrap'>
<ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection"
:values="values"></ejs-calendar>
</div>
</div>
</template>
<script setup>
import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";
const isMultiSelection = true;
const values = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];
</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: 0px auto;
max-width: 250px;
}
</style>
<template>
<div id="app">
<div class='wrap'>
<ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection"
:values="values"></ejs-calendar>
</div>
</div>
</template>
<script>
import { CalendarComponent } from "@syncfusion/ej2-vue-calendars";
export default {
name: "App",
components: {
"ejs-calendar": CalendarComponent
},
data() {
return {
isMultiSelection: true,
values: [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')]
}
}
}
</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: 0px auto;
max-width: 250px;
}
</style>