Vue Calendar - Specify Zoom Level

To specify which calendar view (month, year, decade or century) should be displayed at first, set the zoomLevel property.

App.vue
  • <template>
  • <DxCalendar zoom-level="year" />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxCalendar from 'devextreme-vue/calendar';
  •  
  • export default {
  • components: {
  • DxCalendar
  • }
  • }
  • </script>

To make certain calendar views inaccessible, specify the maxZoomLevel and minZoomLevel properties. For example, the following code enables the month, year and decade calendar views leaving the century view behind.

App.vue
  • <template>
  • <DxCalendar
  • min-zoom-level="decade"
  • max-zoom-level="month"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxCalendar from 'devextreme-vue/calendar';
  •  
  • export default {
  • components: {
  • DxCalendar
  • }
  • }
  • </script>
See Also