Select a sequence of dates in calendar in Vue Calendar component

11 Jun 202410 minutes to read

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when isMultiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

<template>
    <div id="app">
      <div class="wrap" style="height:357px; display: inline-block;">
        <ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection"
          :change="onChange"></ejs-calendar>
      </div>
      <div id="btncontainer">
        <ejs-button id="week" class="e-btn" v-on:click="onweekChange"> Week </ejs-button>
        <ejs-button id="workweek" class="e-btn" v-on:click="onworkweekChange"> Work Week </ejs-button>
      </div>
    </div>
  </template>
  <script setup>
  
  import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";
  import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
  import moment from "moment";
  import { ref } from 'vue';
  
  const CalendarInstance = ref(null);
  const isMultiSelection = true;
  
  const onChange = (args) => {
    let startOfWeek = moment(args.value).startOf('week');
    let endOfWeek = moment(args.value).endOf('week');
    if (CalendarInstance.value.$el.classList.contains('workweek')) {
      getWeekArray(startOfWeek.day(1), endOfWeek.day(5));
    } else if (CalendarInstance.value.$el.classList.contains("week")) {
      getWeekArray(startOfWeek, endOfWeek);
    }
  };
  /*selected current week dates when click the button*/
  const onweekChange = () => {
    if (CalendarInstance.value.$el.classList.contains('workweek')) {
      CalendarInstance.value.$el.classList.remove('workweek')
    }
    CalendarInstance.value.$el.classList.add('week');
    console.log(CalendarInstance.value.$el.classList);
  };
  const onworkweekChange = () => {
    if (CalendarInstance.value.$el.classList.contains('week')) {
      CalendarInstance.value.$el.classList.remove('week')
    }
    CalendarInstance.value.$el.classList.add('workweek');
    console.log(CalendarInstance.value.$el.classList);
  };
  const getWeekArray = (startOfWeek, endOfWeek) => {
    let days = [];
    let day = startOfWeek;
    while (day <= endOfWeek) {
      days.push(day.toDate());
      day = day.clone().add(1, 'd');
    }
    CalendarInstance.value.ej2Instances.values = days;
  };
  
  </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;
  }
  
  #app {
    max-width: 550px;
  }
  
  #btncontainer {
    float: right;
    margin-left: 30px;
    margin-top: 75px;
    margin-right: 10px;
  }
  
  button#workweek {
    margin-left: 15px;
  }
  </style>
<template>
    <div id="app">
        <div class="wrap" style="height:357px; display: inline-block;">
            <ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection"
                :change="onChange"></ejs-calendar>
        </div>
        <div id="btncontainer">
            <ejs-button id="week" class="e-btn" v-on:click="onweekChange"> Week </ejs-button>
            <ejs-button id="workweek" class="e-btn" v-on:click="onworkweekChange"> Work Week </ejs-button>
        </div>
    </div>
</template>
<script>

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

export default {
    name: "App",
    components: {
        "ejs-calendar": CalendarComponent,
        "ejs-button": ButtonComponent
    },
    data() {
        return {
            isMultiSelection: true
        }
    },
    methods: {
        onChange: function (args) {
            let startOfWeek = moment(args.value).startOf('week');
            let endOfWeek = moment(args.value).endOf('week');
            if (this.$refs.CalendarInstance.$el.classList.contains('workweek')) {
                this.getWeekArray(startOfWeek.day(1), endOfWeek.day(5));
            } else if (this.$refs.CalendarInstance.$el.classList.contains("week")) {
                this.getWeekArray(startOfWeek, endOfWeek);
            }
        },
        /*selected current week dates when click the button*/
        onweekChange: function () {
            if (this.$refs.CalendarInstance.$el.classList.contains('workweek')) {
                this.$refs.CalendarInstance.$el.classList.remove('workweek')
            }
            this.$refs.CalendarInstance.$el.classList.add('week');
        },
        onworkweekChange: function () {
            if (this.$refs.CalendarInstance.$el.classList.contains('week')) {
                this.$refs.CalendarInstance.$el.classList.remove('week')
            }
            this.$refs.CalendarInstance.$el.classList.add('workweek');
        },
        getWeekArray: function (startOfWeek, endOfWeek) {
            let days = [];
            let day = startOfWeek;
            while (day <= endOfWeek) {
                days.push(day.toDate());
                day = day.clone().add(1, 'd');
            }
            this.$refs.CalendarInstance.ej2Instances.values = days;
        }
    }
}
</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;
}

#app {
    max-width: 550px;
}

#btncontainer {
    float: right;
    margin-left: 30px;
    margin-top: 75px;
    margin-right: 10px;
}

button#workweek {
    margin-left: 15px;
}
</style>