Calendar Navigation

The user can navigate through several different views in a calendar - from a century, to a month. You can control in which view the user starts, the date which the calendar shows initially, how deep the user can go, and to also navigate to a desired date and view with code.

The calendar shows arrows that let the user flip between the adjacent periods. Clicking the Today button at the top navigates to a period in the current view that includes the current date.

For example, if the current date is April 2019, and the current view is the Month view, the user can press the back and forward arrows to go, respectively, to March 2019 and May 2019.

You can control how far the user can go by setting the Min and Max properties.

Previous and Next navigation is enabled by default. You can control the min and max range of dates the user can navigate through

The user starts in April 2019 and can navigate between January 2019 and July 2019.
<br />

<TelerikCalendar @bind-Date="@startDate" @bind-View="@selectedView" Min="@minDate" Max="@maxDate"></TelerikCalendar>
@code {
    DateTime startDate = new DateTime(2019, 4, 1);
    DateTime minDate = new DateTime(2019, 1, 1);
    DateTime maxDate = new DateTime(2019, 7, 31);
    CalendarView selectedView { get; set; } = CalendarView.Month;
}

The result from the code snippet above

Toggle View Details Up and Down

The calendar offers several views that show the user different periods of time:

  • Century
  • Decade
  • Year
  • Month

The user can click on an item in the current view to go to the more detailed view. They can click the current range at the top to navigate to the larger view where navigating bigger portions of time is easier (for example, years, or even decades).

You can control the initial view by setting the View property to a member of the Telerik.Blazor.CalendarView enum as listed above.

You can control how much detail the user can go into by setting the BottomView property to the same enum. Once the user reaches this bottom view, clicking the items selects them and does not navigate to a more detailed view.

Control current view and how deep the user can go

The user starts in the Decade view and can only go down to years.
<br />

<TelerikCalendar BottomView="@CalendarView.Year" @bind-View="@SelectedView"
                 Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler">
</TelerikCalendar>

<br />The selected date is: @selectedDate

@code {
    private DateTime min = new DateTime(2015, 1, 1);
    private DateTime max = new DateTime(2025, 12, 31);
    private CalendarView SelectedView { get; set; } = CalendarView.Decade;
    private string selectedDate = "";

    private void MyValueChangeHandler(DateTime newValue)
    {
        selectedDate = newValue.ToString();
        StateHasChanged();
    }
}

The behavior of the code snippet above

Programmatic Navigation

You can make the Calendar component move to a certain date and view through its Date and View parameters that support two-way binding. The constraints of the min/max and bottom view apply to programmatic navigation as well as to user navigation.

Navigate the Calendar to a date and view programmatically

@* Programmatic Calendar navigation *@

<TelerikCalendar @bind-Date="@startDate" @bind-View="@calendarView"
                 Min="@min" Max="@max">
</TelerikCalendar>
<TelerikButton OnClick="@UpdateView">Update View</TelerikButton>

@code {
    CalendarView calendarView { get; set; } = CalendarView.Month;
    DateTime startDate { get; set; } = new DateTime(2019, 5, 2);

    DateTime min = new DateTime(2015, 1, 1);
    DateTime max = new DateTime(2025, 12, 31);

    protected void UpdateView()
    {
        calendarView = CalendarView.Year;
        startDate = new DateTime(2018, 5, 2);
    }
}

See Also

In this article
Not finding the help you need? Improve this article