Angular Calendar - Specify Zoom Level

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

HTML
TypeScript
  • <dx-calendar ...
  • zoomLevel="year">
  • </dx-calendar>
  • import { DxCalendarModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxCalendarModule
  • ],
  • // ...
  • })

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.

HTML
TypeScript
  • <dx-calendar ...
  • minZoomLevel="decade"
  • maxZoomLevel="month">
  • </dx-calendar>
  • import { DxCalendarModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxCalendarModule
  • ],
  • // ...
  • })
See Also