Date Navigation in WPF Calendar (CalendarEdit)

18 Feb 20257 minutes to read

This section explains navigation between day, month or year mode in CalendarEdit control.

You can easily navigate to the day, month or year or decade modes by clicking the CalenderEdit header.

Navigation between day, month or year modeNavigate using header

You can easily navigate to the day, month or year or decade modes by pressing the Alt with Up or Down arrow keys. If you will press the Alt + Up arrow key combination, it will navigate from dates to month, year and then decade mode. If you will press Alt + Down arrow key combination, it will navigate from decade to year, month and then dates mode.

For example, if you will start navigation from month mode, it will be move to next or previous mode as follows,

Multiple dates selected by key navigation in CalendarEdit

Change animation time for calendar mode navigation

If you want to change the animation time for navigate to the day, month or year mode by clicking the CalenderEdit header, set value to ChangeModeTime property. The default value of ChangeModeTime property is 300.

<syncfusion:CalendarEdit ChangeModeTime="0"
                         Name="calendarEdit" />
calendarEdit.ChangeModeTime = 0;

Navigation between day, month or year modes animation time is changed

Here, ChangeModeTime property value is 0. So. navigation between day, month or year mode is done without any animation delay.

NOTE

View Sample in GitHub

Custom appearance of header

You can change the background and foreground of the CalendarEdit header by using the HeaderBackground and HeaderForeground properties. The default value of HeaderBackground is Lavender and HeaderForeground is Dark SlateGray.

<syncfusion:CalendarEdit HeaderBackground="Green"
                         HeaderForeground="Yellow"
                         Name="calendarEdit" />
calendarEdit.HeaderBackground = Brushes.Green;
calendarEdit.HeaderForeground = Brushes.Yellow;

CalendarEdit headers background and foreground is changed

NOTE

View Sample in GitHub

You can navigate to the previous or next month by clicking on the Previous-Next navigation buttons in the header. You can also navigate to the previous or next month by scrolling the mouse or pressing the Alt + (Left or Right) key combination. If you want to change the animation time for navigate to the previous or next month, set value to FrameMovingTime property. The default value of FrameMovingTime property is 300.

<syncfusion:CalendarEdit FrameMovingTime="0"
                         Name="calendarEdit" />
calendarEdit.FrameMovingTime = 0;

Navigation between next and previous months animation time is changed

Here, FrameMovingTime property value is 0. So. navigation between next and previous month is done without any animation delay.

NOTE

View Sample in GitHub

Custom UI for previous and next navigation buttons

You can customize the previous and next navigation buttons by using the PreviousScrollButtonTemplate an NextScrollButtonTemplate properties.

<Window.Resources>
    <!--Template for Next Buttons in Calendar Control -->
    <ControlTemplate x:Key="nextScrollButtonTemplate">
        <Border>
            <Button Command="syncfusion:CalendarEdit.NextCommand" >
                <Button.Content>
                    <Image Source="Images/1.png"
                           Height="16" Width="16"
                           VerticalAlignment="Center" />
                </Button.Content>
            </Button>
        </Border>
    </ControlTemplate>
    
    <!--Template for Previous Buttons in Calendar Control -->
    <ControlTemplate x:Key="previousScrollButtonTemplate">
        <Border>
            <Button Command="syncfusion:CalendarEdit.PrevCommand">
                <Button.Content>
                    <Image Source="Images/2.png"
                           Height="16" Width="16"
                           VerticalAlignment="Center" />
                </Button.Content>
            </Button>
        </Border>
    </ControlTemplate>
</Window.Resources>

<Grid>
    <syncfusion:CalendarEdit PreviousScrollButtonTemplate="{StaticResource previousScrollButtonTemplate}" 
                             NextScrollButtonTemplate="{StaticResource nextScrollButtonTemplate}"
                             Name="calendarEdit" 
                             Width="200" Height="200"/>
</Grid>

Custom UI for previous and next navigation buttons

NOTE

View Sample in GitHub

Change navigation direction

You can change previous or next month navigation direction to either Horizontal or Vertical by using the MonthChangeDirection property. The default value of MonthChangeDirection property is Horizontal.

<syncfusion:CalendarEdit MonthChangeDirection="Vertical"
                         Name="calendarEdit" />
calendarEdit.MonthChangeDirection = AnimationDirection.Vertical;

Navigation between next and previous months animation direction changed to vertical

NOTE

View Sample in GitHub

Touch support for CalendarEdit

Swipe support is provided for the calendar. When you swipe from right to left over the calendar, it moves to the next month. When you swipe from left to right over the calendar, it moves to the previous month.

Touch support for Calendar

NOTE

View Sample in GitHub