Navigation and View Mode


  • DisplayDate (DateTime): A date in the current view.
  • MinDate (DateTime): Gets or sets the min date that could be displayed or selected.
  • MaxDate (DateTime): Gets or sets the max date that can be displayed or selected.


  • DisplayDateChanged (ValueChangedEventArgs<object>): Occurs when the selected date is changed. The DisplayDateChanged event handler receives two parameters:
    • The sender argument which is of type object, but can be cast to the RadCalendar type.
    • A ValueChangedEventArgs<object> object which provides both old and new values of the DisplayDate property. The values are of type object, but can be cast to the DateTime type.


First you have to create a RadCalendar control:

<telerikInput:RadCalendar x:Name="calendar"/>



Or in code:

var calendar = new RadCalendar();

Then you can set the properties:

calendar.MinDate = DateTime.Today.AddMonths(-1);
calendar.MaxDate = DateTime.Today.AddMonths(5);
calendar.DisplayDate = DateTime.Today.AddMonths(2);     

Or subscribe to the DisplayDateChanged event:

calendar.DisplayDateChanged += (s,e) =>
    // do something  



  • ViewMode (CalendarViewMode): Gets the current view mode of the calendar (use the TrySetViewMode method to set the current view).
    Here are listed the supported view modes for each platform:
View Mode iOS Android UWP
Year -
Week -
MonthNames -
YearNumbers -
Flow - -


  • ViewChanged (ValueChangedEventArgs<CalendarViewMode>): Occurs when the calendar view mode is changed.
  • TimeSlotTapped (TimeSlotTapEventArgs): Occurs when the end-user taps on a time slot. The TimeSlotTapEventArgs provides StartTime and EndTime properties of type DateTime which define the time slot.


Important: All calendar navigation methods should be called after the native element has been loaded. Here are the events that you can use:

  • NativeControlLoaded (EventArgs): Occurs when the renderer has finished preparing the native control.
  • NativeControlUnloaded (EventArgs): Occurs when the native control is in invalid state.
  • bool TrySetViewMode(CalendarViewMode view, bool isAnimated = true): Tries to set the view mode of the calendar to the specified value. If the view mode is supported, the method returns true, otherwise returns false.
  • bool TryNavigateToUpperView (bool isAnimated = true): Navigates to upper view if possible. Returns true if navigation has been successful, false otherwise.
    • iOS: Month > MonthNames > YearNumbers
    • Android: Month > Year
    • UWP: Month > MonthNames > YearNumbers
  • bool TryNavigateToLowerView (bool isAnimated = true): Navigates to lower view if possible. Returns true if navigation has been successful, false otherwise.
    • iOS: YearNumbers > MonthNames > Month
    • Android: Year > Month
    • UWP: YearNumbers > MonthNames > Month


You need to attach to the NativeControlLoaded event:

var calendar = new RadCalendar();
calendar.NativeControlLoaded += CalendarLoaded;

When the control is loaded, you can change the view mode.

private void CalendarLoaded(object sender, EventArgs args)
    (sender as RadCalendar).TrySetViewMode(CalendarViewMode.Year);
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article