How to: Use a Date Navigator in a Scheduling Application

• May 22, 2020
• 2 minutes to read

This document describes how to add the DateNavigator control to a project, associate the date navigator with SchedulerControl, and expose the necessary API in order to customize the behavior and appearance settings of the date navigator.

Add a Date Navigator to a Project

Drag the DateNavigator item from the DX.14.2: Common Controls toolbox tab.

Your XAML may look like following.

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    mc:Ignorable="d"
    d:DesignHeight="528" d:DesignWidth="653" >

    <Grid>
        <dxe:DateNavigator Name="dateNavigator1"
                           HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</UserControl>

Note that you can add a date navigator by overwriting your XAML with this code without dragging the DateNavigator control to the page. However, in this case, you need to manually add references to the following libraries: DevExpress.Data.v14.2, DevExpress.Xpf.Core.v14.2.

NOTE

You can find assembly files at the following location: C:\Program Files (x86)\DevExpress 14.2\Components\Bin\Silverlight.

Bind a Date Navigator to a Scheduler Control

To use a date navigator for selecting dates in a Scheduler Control, use the SchedulerDateNavigatorStyleSettings.SchedulerControl property to specify the SchedulerControl object to be bound to DateNavigator.

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduler"
    mc:Ignorable="d"
    d:DesignHeight="454" d:DesignWidth="763" >

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <dxe:DateNavigator Name="dateNavigator1"
                           VerticalAlignment="Stretch">
            <dxe:DateNavigator.StyleSettings>
                <dxsch:SchedulerDateNavigatorStyleSettings 
                    SchedulerControl="{Binding ElementName=schedulerControl1}"/>
            </dxe:DateNavigator.StyleSettings>
        </dxe:DateNavigator>

        <dxsch:SchedulerControl Name="schedulerControl1" 
                                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                Grid.Column="1" >
        </dxsch:SchedulerControl>
    </Grid>

</UserControl>

As a result, end-users will be enabled to select a specific date, a continuous range of dates, a single week, or multiple weeks within a scheduler by clicking and dragging within the date navigator. Any date selection made in the date navigator will switch the associated scheduler view to the most appropriated display type to show the selected date or date range.

Specify Behavior Settings of the Date Navigator

The DateNavigator class provides a number of members allowing you to specify the behavior and appearance of the date navigator.

For example, customize the date navigator behavior and appearance in the following way.

• Set the DateNavigator.HighlightSpecialDates property to true to mark special days with appointments as bold.
• Set the DateNavigator.ShowTodayButton property to true to force the date navigator to show the Today button.
• Set the DateNavigator.ShowWeekNumbers property to true to display week numbers within the date navigator control.
• Set the DateNavigator.WeekNumberRule property to FirstDay to specify the rule for determining the first week of the year.
• Set the DateNavigator.IsMultiSelect property to true to allow end-users to select several dates at the same.

XAML

<dxe:DateNavigator Name="dateNavigator1"
                   VerticalAlignment="Stretch"
                   HighlightSpecialDates="True"
                   ShowTodayButton="True"
                   ShowWeekNumbers="True"
                   WeekNumberRule="FirstDay" 
                   IsMultiSelect="True">
    <!--...-->
</dxe:DateNavigator>