React Calendar - Specify Zoom Level

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

jQuery
JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        zoomLevel: 'year'
    });
});
Angular
HTML
TypeScript
<dx-calendar ...
    zoomLevel="year">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar zoom-level="year" />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    render() {
        return (
            <Calendar zoomLevel="year" />
        );
    }
}
export default App;

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.

jQuery
JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        minZoomLevel: 'decade',
        maxZoomLevel: 'month'
    });
});
Angular
HTML
TypeScript
<dx-calendar ...
    minZoomLevel="decade"
    maxZoomLevel="month">
</dx-calendar>
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCalendar
        min-zoom-level="decade"
        max-zoom-level="month"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    render() {
        return (
            <Calendar
                minZoomLevel="decade"
                maxZoomLevel="month" />
        );
    }
}
export default App;
See Also