Skip to main content

Date Navigator

  • 3 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.

DateNavigator

Add the Date Navigator

The DateNavigator is a standalone control. To use it with the Scheduler, add the DateNavigator to your application and use the SchedulerDateNavigatorStyleSettings.Scheduler property to bind it to the SchedulerControl. See the example below.

    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 How to: Create the Scheduler with the DateNavigator topic for a step-by-step tutorial.

Date Types

The DateNavigator control includes the following date types:

Type Property Description
Disabled Date DisabledDates Gets or sets a collection of dates that users cannot select.
Focused Date FocusedDate Gets or sets the date in a calendar that has focus.
Holiday Holidays Gets or sets a collection of custom holidays.
Selected Date SelectedDates Gets or sets a collection of dates that are selected within 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 a cell’s appearance for each state, use the Appearance property.

Customize the Date Navigator

Display Settings

The table below lists the properties that affect the 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

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

Behavior Settings

The table below lists the properties that affect the DateNavigator behavior. Use the DateNavigator.StyleSettings property to specify the 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 the 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

See Also