All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Date Navigator

The date navigator is an element that allows you to change the date displayed on the view.

Scheduler Date Navigator

You can specify the range of available dates in the min and max properties:

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 { }
Vue
App.vue
<template>
    <DxScheduler
        :min="min"
        :max="max"
    />
</template>

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

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            min: new Date(2018, 2, 3),
            max: new Date(2018, 4, 3)
        };
    }
}
</script>
React
App.js
import React from 'react';

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

import Scheduler from 'devextreme-react/scheduler';

const min = new Date(2018, 2, 3);

const max = new Date(2018, 4, 3);

class App extends React.Component {
    render() {
        return (
            <Scheduler
                min={min}
                max={max}
            />
        );
    }
}
export default App;

Use the customizeDateNavigatorText function to customize the navigator's text. Refer to the function's description for an example.