Skip to content

Scheduler: Update Date Navigator How To #8747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arman-boyakhchyan wants to merge 1 commit into
base: 25_2
Choose a base branch
from
+190 −67
Open

Scheduler: Update Date Navigator How To #8747

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 190 additions & 67 deletions concepts/05 UI Components/Scheduler/055 Date Navigator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,114 @@
The date navigator is an element that allows you to change the date displayed on the view.
The date navigator is a [predefined toolbar item](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/) that allows you to change the displayed date in the dxScheduler.

![Scheduler Date Navigator](/images/UiWidgets/Scheduler_Date_Navigator.png)

You can specify the range of available dates in the [min](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/min.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#min') and [max](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/max.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#max') properties:
The date navigator is a DevExtreme [ButtonGroup](/api-reference/10%20UI%20Components/dxButtonGroup '/Documentation/ApiReference/UI_Components/dxButtonGroup/') 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](/api-reference/10%20UI%20Components/dxScheduler/7%20Interfaces/dxSchedulerToolbarItem/options.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#options').**items**:

---

##### jQuery

<!--tab: 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

<!-- tab: app.component.html -->
<dx-scheduler ... >
<dxo-scheduler-toolbar>
<dxi-scheduler-toolbar-item
name="dateNavigator"
[options]="dateNavigatorOptions">
</dxi-scheduler-toolbar-item>
</dxo-scheduler-toolbar>
</dx-scheduler>

<!-- tab: app.component.ts -->
import { DxSchedulerModule } from 'devextreme-angular'
// ...
export class AppComponent {
dateNavigatorOptions = {
items: ['prev', 'dateInterval', 'next', {
icon: 'more',
onClick() {
console.log("The custom button was clicked.")
},
}]
}
}

##### Vue

<!-- tab: 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

<!-- tab: 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](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/customizeDateNavigatorText.md 'Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#customizeDateNavigatorText') callback to customize the date interval text. To customize the range of available dates available in the date navigator, configure the [min](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/min.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#min') and [max](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/max.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#max') properties:
Copy link
Copy Markdown
Contributor

@arminal arminal May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You can configure the [customizeDateNavigatorText](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/customizeDateNavigatorText.md 'Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#customizeDateNavigatorText') callback to customize the date interval text. To customize the range of available dates available in the date navigator, configure the [min](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/min.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#min') and [max](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/max.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#max') properties:
You can configure the [customizeDateNavigatorText](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/customizeDateNavigatorText.md 'Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#customizeDateNavigatorText') callback to customize the date interval text. To customize the range of available dates available in the date navigator, configure [min](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/min.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#min') and [max](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/max.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#max') properties:


---
##### jQuery
Expand All @@ -11,8 +117,8 @@ You can specify the range of available dates in the [min](/api-reference/10%20UI
$(function() {
$("#schedulerContainer").dxScheduler({
// ...
min: new Date(2018, 2, 3),
max: new Date(2018, 4, 3)
min: new Date(2026, 2, 3),
max: new Date(2026, 4, 3)
});
});

Expand All @@ -25,90 +131,107 @@ You can specify the range of available dates in the [min](/api-reference/10%20UI
</dx-scheduler>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
import { DxSchedulerModule } from 'devextreme-angular'
// ...
export class AppComponent {
minDate: Date = new Date(2018, 2, 3);
maxDate: Date = new Date(2018, 4, 3);
minDate: Date = new Date(2026, 2, 3);
maxDate: Date = new Date(2026, 4, 3);
}

<!-- tab: app.module.ts -->
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

<!-- tab: App.vue -->
<template>
<DxScheduler
:min="min"
:max="max"
:min="minDate"
:max="maxDate"
/>
</template>

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

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

export default {
components: {
DxScheduler
},
data() {
return {
min: new Date(2018, 2, 3),
max: new Date(2018, 4, 3)
};
}
}
const minDate = new Date(2026, 2, 3);
const maxDate = new Date(2026, 4, 3);
</script>

##### React

<!-- tab: App.js -->
import React from 'react';
<!-- tab: 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}
/>
);
}

import 'devextreme/dist/css/dx.fluent.blue.light.css';
---

import Scheduler from 'devextreme-react/scheduler';

const min = new Date(2018, 2, 3);
To hide the date navigator, configure **toolbar**.[items[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/) and omit *"dateNavigator"*. The following code snippet displays only the *"viewSwitcher"* predefined toolbar item:

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

class App extends React.Component {
render() {
return (
<Scheduler
min={min}
max={max}
/>
);
<!--tab: index.js-->
$("#scheduler-container").dxScheduler({
// ...
toolbar: {
items: ['viewSwitcher']
}
}
export default App;
});

---
##### Angular

<!-- tab: app.component.html -->
<dx-scheduler ... >
<dxo-scheduler-toolbar>
<dxi-scheduler-toolbar-item
name="viewSwitcher"
</dxi-scheduler-toolbar-item>
</dxo-scheduler-toolbar>
</dx-scheduler>

##### Vue

<!-- tab: 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

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

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

Use the [customizeDateNavigatorText](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/customizeDateNavigatorText.md 'Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#customizeDateNavigatorText') function to customize the navigator's text. Refer to the function's description for an example.
---
Loading