Skip to content

Scheduler: Update Date Navigator How To (#8747)#8776

Open
arman-boyakhchyan wants to merge 2 commits into
DevExpress:26_1from
arman-boyakhchyan:scheduler-datenavigator-how-to-update-26-1
Open

Scheduler: Update Date Navigator How To (#8747)#8776
arman-boyakhchyan wants to merge 2 commits into
DevExpress:26_1from
arman-boyakhchyan:scheduler-datenavigator-how-to-update-26-1

Conversation

@arman-boyakhchyan
Copy link
Copy Markdown
Contributor

No description provided.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Updates the Scheduler “Date Navigator” guide to better explain what the date navigator is, how to customize its buttons via toolbar item options, how to constrain navigation with min/max, and how to hide the navigator by overriding toolbar items.

Changes:

  • Expanded the introduction to describe the date navigator as a predefined Scheduler toolbar item backed by a ButtonGroup, with customization examples for jQuery/Angular/Vue/React.
  • Updated min/max examples (including Vue/React refactors) and clarified the customizeDateNavigatorText mention.
  • Added a new section showing how to hide the date navigator by omitting it from toolbar.items.
Comments suppressed due to low confidence (2)

concepts/05 UI Components/Scheduler/055 Date Navigator.md:135

  • DxSchedulerModule is imported in this snippet but not used (there is no @NgModule example here). Either remove the import or include the minimal module setup that shows where DxSchedulerModule should be added.
    import { DxSchedulerModule } from 'devextreme-angular'
    // ...

concepts/05 UI Components/Scheduler/055 Date Navigator.md:184

  • This jQuery snippet initializes dxScheduler without a DOM-ready wrapper. If the script executes before the container element exists, initialization can fail. Wrap this code in $(function() { ... }) (or ensure it runs after the container is rendered) to make the example reliable.
    <!--tab: index.js-->
    $("#scheduler-container").dxScheduler({
        // ...


---

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:
Comment thread concepts/05 UI Components/Scheduler/055 Date Navigator.md
Comment thread concepts/05 UI Components/Scheduler/055 Date Navigator.md
Comment thread concepts/05 UI Components/Scheduler/055 Date Navigator.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants