JavaScript/jQuery Scheduler - Date Navigator

The date navigator is a predefined toolbar item that allows you to change the displayed date in the dxScheduler.

Scheduler Date Navigator

The date navigator is a DevExtreme ButtonGroup with three buttons: previous date ('prev'), next date ('next'), and date interval ('dateInterval'). You can customize the order of these buttons or add new buttons using options.items:

jQuery
index.js
$("#scheduler-container").dxScheduler({
    // ...
    toolbar: {
        items: [{
            name: "dateNavigator",      
            options: {
                items: ['prev', 'dateInterval', 'next', {
                    icon: 'more',
                    onClick() {
                        console.log("The custom button was clicked.")
                    },
                }]
            }
        }]  
    }
});
Angular
app.component.html
app.component.ts
<dx-scheduler ... >
    <dxo-scheduler-toolbar>
        <dxi-scheduler-toolbar-item 
            name="dateNavigator"
            [options]="dateNavigatorOptions">
        </dxi-scheduler-toolbar-item>
    </dxo-scheduler-toolbar>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular'
// ...
export class AppComponent {
    dateNavigatorOptions = {
        items: ['prev', 'dateInterval', 'next', {
            icon: 'more',
            onClick() {
                console.log("The custom button was clicked.")
            },
        }]
    }
}
Vue
App.vue
<template>
    <DxScheduler ... >
        <DxToolbar>
            <DxItem
                name="dateNavigator"
                :options="dateNavigatorOptions"
            />
        </DxToolbar>
    </DxScheduler>
</template>
<script setup lang="ts">
    import { DxScheduler, DxToolbar, DxItem } from 'devextreme-vue/scheduler';

    const dateNavigatorOptions = {
        items: ['prev', 'dateInterval', 'next', {
            icon: 'more',
            onClick() {
                console.log("The custom button was clicked.")
            },
        }]
    }
</script>
React
App.tsx
import { Scheduler, Toolbar, Item } from 'devextreme-react/scheduler';
// ...

const dateNavigatorOptions = {
    items: ['prev', 'dateInterval', 'next', {
        icon: 'more',
        onClick() {
            console.log("The custom button was clicked.")
        },
    }]
};

function App() {
    return (
        <Scheduler ... >
            <Toolbar>
                <Item
                    name="dateNavigator"
                    options={dateNavigatorOptions}
                />
            </Toolbar>
        </Scheduler>
    );
}

You can configure the customizeDateNavigatorText callback to customize the date interval text. To customize the range of available dates in the date navigator, configure min and max properties:

jQuery
index.js
$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        min: new Date(2026, 2, 3),
        max: new Date(2026, 4, 3)
    });
});
Angular
app.component.html
app.component.ts
<dx-scheduler ...
    [min]="minDate"
    [max]="maxDate">
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular'
// ...
export class AppComponent {
    minDate: Date = new Date(2026, 2, 3);
    maxDate: Date = new Date(2026, 4, 3);
}
Vue
App.vue
<template>
    <DxScheduler
        :min="minDate"
        :max="maxDate"
    />
</template>

<script setup lang="ts">
import { DxScheduler } from 'devextreme-vue/scheduler';

const minDate = new Date(2026, 2, 3);
const maxDate = new Date(2026, 4, 3);
</script>
React
App.tsx
import { Scheduler } from 'devextreme-react/scheduler';

const minDate = new Date(2026, 2, 3);
const maxDate = new Date(2026, 4, 3);

function App() {
    return (
        <Scheduler
            min={minDate}
            max={maxDate}
        />
    );        
}

To hide the date navigator, configure toolbar.items[] and omit "dateNavigator". The following code snippet displays only the "viewSwitcher" predefined toolbar item:

jQuery
index.js
$("#scheduler-container").dxScheduler({
    // ...
    toolbar: {
        items: ['viewSwitcher']
    }
});
Angular
app.component.html
<dx-scheduler ... >
    <dxo-scheduler-toolbar>
        <dxi-scheduler-toolbar-item 
            name="viewSwitcher"
        </dxi-scheduler-toolbar-item>
    </dxo-scheduler-toolbar>
</dx-scheduler>
Vue
App.vue
<template>
    <DxScheduler ... >
        <DxToolbar>
            <DxItem
                name="viewSwitcher"
            />
        </DxToolbar>
    </DxScheduler>
</template>
<script setup lang="ts">
    import { DxScheduler, DxToolbar, DxItem } from 'devextreme-vue/scheduler';

    // ...
</script>
React
App.tsx
import { Scheduler, Toolbar, Item } from 'devextreme-react/scheduler';
// ...

function App() {
    return (
        <Scheduler ... >
            <Toolbar>
                <Item
                    name="viewSwitcher"
                />
            </Toolbar>
        </Scheduler>
    );
}