Date Navigator

• May 16, 2023
• 4 minutes to read

The DateNavigator control allows users to select a date or a range of dates.

The image below shows the elements of the DateNavigator.

Add the Date Navigator

The DateNavigator is a standalone control. To use it with the Scheduler, add a DateNavigator to your application and use the SchedulerDateNavigatorStyleSettings.Scheduler property to bind the DateNavigator to the SchedulerControl as follows:

XAML

    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduling"
<!---->
 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <dxsch:SchedulerControl x:Name="scheduler" />
    <dxe:DateNavigator x:Name="datenavigator" 
        Grid.Column="1" 
        VerticalAlignment="Stretch">
        <dxe:DateNavigator.StyleSettings>
            <dxsch:SchedulerDateNavigatorStyleSettings Scheduler="{Binding ElementName=scheduler}" />
        </dxe:DateNavigator.StyleSettings>
    </dxe:DateNavigator>
</Grid>

Refer to the following topic for a step-by-step tutorial: How to: Create the Scheduler with the DateNavigator.

Date Types

The DateNavigator control includes the following date types:

Type	Property	Description
Disabled Date	DisabledDates	Gets or sets a collection of dates unavailable for selection.
Focused Date	FocusedDate	Gets or sets the focused date in a calendar.
Holiday	Holidays	Gets or sets a collection of custom holidays.
Selected Date	SelectedDates	Gets or sets a collection of dates selected in the DateNavigator control.
Special Date	SpecialDates	Gets or sets a collection of special dates.
Workday	Workdays	Gets or sets a collection of workdays in a week.

Handle the DateNavigator.RequestCellState event to conditionally mark cells as disabled, holiday, or special.

Tip

To specify cell appearance for each state, use the Appearance property.

Customize the Date Navigator

Display Settings

The table below lists all properties that affect DateNavigator appearance.

Characteristics	Properties
Today button visibility	DateNavigator.ShowTodayButton
Number of rows and columns	DateNavigator.ColumnCount DateNavigator.RowCount
First day of the week	DateNavigator.FirstDayOfWeek
Holidays	DateNavigator.Holidays DateNavigator.HighlightHolidays
Workdays	DateNavigator.Workdays DateNavigator.ExactWorkdays
Special dates	DateNavigator.SpecialDates DateNavigator.HighlightSpecialDates
Week numbers	DateNavigator.ShowWeekNumbers

Call the RefreshCellAppearances() method to raise the RequestCellAppearance event for each cell and clear cached appearance values. To display a specific date in the current DateNavigator view, use the ScrollToDate(DateTime) method.

Behavior Settings

The table below lists all properties that affect DateNavigator behavior. Use the DateNavigator.StyleSettings property to specify SchedulerDateNavigatorStyleSettings.

Characteristics	Properties
Dates users can select	DateNavigator.DisabledDates SchedulerControl.LimitInterval DateNavigator.MaxValue DateNavigator.MinValue
Date range selection	DateNavigator.SelectionMode
Multiple date selection	DateNavigator.IsMultiSelect
Multiple date range selection	DateNavigator.AllowMultipleRanges (the DateNavigator.IsMultiSelect property must be set to true)
The maximum number of dates users can select simultaneously	DateNavigator.MaxSelectionLength
Change the scheduler view based on the selection	SchedulerDateNavigatorStyleSettings.AllowChangeSchedulerView
Update the month part of the selected dates when a user navigates through different months	SchedulerDateNavigatorStyleSettings.AllowUpdateSelectionOnMonthChanged
The maximum number of consecutively selected weeks	SchedulerDateNavigatorStyleSettings.MaxSelectedConsecutiveWeeks
The maximum number of individually selected dates	SchedulerDateNavigatorStyleSettings.MaxSelectedNonConsecutiveDates

Keyboard Navigation

Use the following keys or shortcuts to interact with a DateNavigator control:

Key	Action
← → ↑ ↓	Navigate through dates. Navigate through date headers.
Tab	Moves focus one element forward.
Shift + Tab	Moves focus one element back.
Enter / Space	Applies the date that corresponds to the focused day. Applies the current date when the Today button is focused. Clears the selected date when the Clear button is focused. Opens the corresponding view when the header is focused. Opens the Years view when any range of years is focused. Opens the Months view when a year is focused. Opens the Days view when a month is focused.
Shift + ← / → / ↑ / ↓	Selects multiple dates when the DateNavigator.IsMultiSelect property is enabled.
Ctrl + Enter	Opens the Months view when a day is focused. Opens the Years view when a month is focused. Opens the Range of Years view when a year is focused.
Ctrl + ← / → / ↑ / ↓	Moves focus without selecting a different date when the DateNavigator.IsMultiSelect property is enabled.
Ctrl + Space	Toggles the selection of the focused date without deselecting other dates when the DateNavigator.IsMultiSelect property is enabled.