Multi select in Vue Calendar component

5 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.

Composition API (~/src/App.vue)

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

Options API (~/src/App.vue)

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