Controlling the Display & Selection in the Calendar Component

The Telerik Calendar component isn’t limited to displaying just months – the component also lets the user select individual years, months, or days. And, with a little bit of code, you can control which level the control operates at.

The TelerikCalendar component in Telerik UI for Blazor gives the user lots of navigation options – and you don’t have to do anything. But, if you do want to write some code, you can make it a lot easier for your users to find the date they want.

In my previous post, I showed how I would use the TelerikCalendar component in a rich UI, created by integrating multiple Telerik components. However, there’s some additional functionality around picking dates that I need for my case study (which is displaying detailed information about a customer) that this post will cover.

Navigating to the Date You Want

By default, the calendar control displays a single month – you pick that month through the Value attribute of the <TelerikCalendar> element. Displaying a date in the calendar can be as simple as adding this element to your page:

<TelerikCalendar Value="@currentCustomer.SignUpDate" />

In my case study, however, the date I’m binding to is the date that the customer joined the company’s loyalty program – which could be some time in the distant past. Forcing the user to page through multiple months to get to the date they want would be cruel.

Fortunately, the TelerikCalendar component handles this. If the user clicks on the month and year displayed in the calendar’s upper left corner, the TelerikCalendar automatically switches into a view that displays the months in the year (and the date shown in the upper left-hand corner switches to showing just the year). The user can then click on the “month of their choosing” to get back to the display of the days in the month. Alternatively, the user can click on the year in the upper left corner and get a display of years, allowing them to move quickly into the distant path or future.

But wait, there’s more!

Selecting the Month or Year You Want

The calendar element also has a BottomView attribute that allows you to control the user’s selection. If you set the BottomView to CalendarView.Month then, in the view listing all the months, clicking on a month name doesn’t display the dates for the month. Instead it allows the user to select that month. Similarly, if you set the BottomView to CalendarView.Year then, when the calendar is displaying a list of years, the user can select a year.

As that discussion implies, if you want to take advantage of the BottomView attribute, you also need to control what view the calendar is currently using: day, month, or year. You can control that display through the View attribute. Putting both of those attributes together, this element would display a list of months in the year and allow the user to select a month:

<TelerikCalendar View="CalendarView.Year"
                 BottomView="CalendarView.Year"
                 Value="@currentCustomer.SignUpDate" />

So, by managing the View and BottomView attributes, you could create a UI with multiple, linked calendar components that would allow the user to select:

1. a year in the first component
2. a month in the second component for that year
3. a specific date in a third component for that year and month

The best part is that you don’t even need three copies of the component: using the component’s Navigate() method, you can set the View in one line of code and use another line of code to set the BottomView, giving the user the ability to set the selection level they want.

To do that, you first need to access the calendar component from code so you can call its Navigate() method. That requires you to rewrite your element to bind it to a field or property in your code with Blazor’s ref attribute. You also need to bind the BottomView to a field or property.

The resulting element that displays the initial list of years would look something like this:

<TelerikCalendar @ref="calendar"
                 View="CalendarView.Decade"
                 BottomView="@selectionMode"
                 Date="@currentCustomer.SignUpDate" />

Next, you need three buttons to let the user pick between selecting years, months, or days:

<TelerikButton OnClick="@SetViewToShowYears">Select Year</TelerikButton>
<TelerikButton OnClick="@SetViewToShowMonths">Select Month</TelerikButton>
<TelerikButton OnClick="@SetViewToShowDaysInMonth">Select Day</TelerikButton>

In your code section, you need to set up the fields or properties to hold the references you use in your calendar (including initializing the field or property that drives the BottomView). In my case, I decided to use fields so my code looks like this:

@code {
  private TelerikCalendar calendar;
  private CalendarView selectionMode = CalendarView.Decade;

  // ...
}

The three methods called from my buttons all look very much alike: They use the Navigate() method to change the current view and then set the BottomView to that level. The only interesting issue is that the Navigate() method requires that you pass a date that will become the calendar’s currently selected date. In my scenario, I don’t want to override any date the user has selected, so I just pass the date in the calendar’s Value property, which will be the last date the user selected.

The three methods look like this (and are sufficiently similar that they should probably be collapsed into a single method that accepts a parameter):

private void SetViewToShowYears()
{
  calendar.Navigate(calendar.Value, Telerik.Blazor.CalendarView.Decade);
  selectionLevel = CalendarView.Decade;
}

private void SetViewToShowMonths()
{
  calendar.Navigate(calendar.Value, Telerik.Blazor.CalendarView.Year);
  selectionLevel = CalendarView.Year;
}

private void SetViewToShowDays()
{
  calendar.Navigate(calendar.Value, Telerik.Blazor.CalendarView.Month);
  selectionLevel = CalendarView.Month;
}

By the way, as I mentioned in my earlier post, the TelerikCalendar component has Min and Max attributes that let you control how far in the past or into the future the user is allowed to select dates. All these views honor those limits by not letting the user page past the limits and disabling dates outside the range if the view displays them.

One caveat, though: This column is written with one of the Blazor previews so (as with any preview technology) things may be “quirky” and they’ll almost certainly change before they get into production. Personally, I can’t wait.