Calendar Views in Vue Calendar

03 Sep 20265 minutes to read

The Calendar has the following predefined views that provide a flexible way to navigate back and forth when selecting dates.

View Description
month (default) Displays the days in a month.
year Displays the months in a year.
decade Displays the years in a decade.

When a view is assigned to the start property of the Calendar, it sets the initial view on rendering.

The following example demonstrates how to set the year as the start view of the Calendar.

<template>
  <div id="app">
    <div class='wrap'>
      <ejs-calendar id='calendar' :value='calVal' start='Year'></ejs-calendar>
    </div>
  </div>
</template>
<script setup>

import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";

const calVal = new Date();

</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;
}
</style>
<template>
  <div id="app">
    <div class='wrap'>
      <ejs-calendar id='calendar' :value='calVal' start='Year'></ejs-calendar>
    </div>
  </div>
</template>
<script>

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

export default {
  name: "App",
  components: {
    "ejs-calendar": CalendarComponent
  },
  data() {
    return {
      calVal: new Date()
    }
  }
}
</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;
}
</style>

View restriction

By defining the start and depth properties with different views, drill-down and drill-up navigation can be limited for the user. The Calendar will drill down only to the view set in the depth property and drill up only to the view set in the start property.

The following example displays the Calendar in decade view, and allows you to select a date in month view.

Depth view should always be smaller than the start view. If the views are the same, then the Calendar view remains unchanged.

<template>
  <div id="app">
    <div class='wrap'>
      <ejs-calendar id='calendar' start='Decade' depth='Year'></ejs-calendar>
    </div>
  </div>
</template>
<script setup>

import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";

</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;
}
</style>
<template>
  <div id="app">
    <div class='wrap'>
      <ejs-calendar id='calendar' start='Decade' depth='Year'></ejs-calendar>
    </div>
  </div>
</template>
<script>

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

export default {
  name: "App",
  components: {
    "ejs-calendar": CalendarComponent
  },
  data() {
    return {
    }
  }
}
</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;
}
</style>