DevExtreme jQuery/JS - Specify Zoom Level
To specify which calendar view (month, year, decade or century) should be displayed at first, set the zoomLevel option.
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 ], // ... })
To make certain calendar views inaccessible, specify the maxZoomLevel and minZoomLevel options. 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 ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.