DevExtreme React - Date Navigator
The date navigator is an element that allows you to change the date displayed on the view.
You can specify the range of available dates in the min and max options:
jQuery
index.js
$(function() { $("#schedulerContainer").dxScheduler({ // ... min: new Date(2018, 2, 3), max: new Date(2018, 4, 3) }); });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-scheduler ... [min]="minDate" [max]="maxDate"> </dx-scheduler>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { minDate: Date = new Date(2018, 2, 3); maxDate: Date = new Date(2018, 4, 3); }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxSchedulerModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxSchedulerModule ], bootstrap: [AppComponent] }) export class AppModule { }
Use the customizeDateNavigatorText function to customize the navigator's text. Refer to the function's description for an example.
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.