In my previous post, I combined several Telerik Blazor UI components to create a rich form with minimal effort. In the page I created, I used the DateInput component to handle displaying and accepting the date a customer signed up to our company's loyalty program. That's not very graphical (but it was easy). In this post, I'm going to upgrade to the TelerikCalendar component.


Before I begin looking at my options, though: If you (a) followed those previous posts, and (b) upgraded to Preview 6 of Blazor… well, there have been some changes. Most of the changes are the result of Microsoft standardizing the names of Blazor directives that appear as attributes on the elements that represent Blazor components. Those attribute names are all prefixed with an @ sign (i.e. ref becomes @ref, onclick becomes @onclick, ondblclick becomes @ondblclick, and so on). These changes are just part of a move on the Blazor team's move to standardize attribute names, reduce some redundancy in how these are used, and support some additional functionality to be added in the future.

The native attributes on the components' elements (the attributes defined by Telerik) do not, however, get an @ prefix. However, if you are setting those attributes to some code or binding them to a field or property, the value for the attribute does need to be prefixed with an @ symbol. If this sounds confusing… well, I have lots of examples in this post. But there's also an easy way to tell as you're typing in code: If you type in an attribute name and it doesn't appear in boldface, prefix it with an @ symbol; if the attribute name doesn't require an @ symbol, prefix the value you're binding the attribute to (except for those occasions where you really are just setting the attribute to some string value).

In addition, if you want to appear hip and happening, in your .razor file you can change @functions to @code (my code worked equally well with either). The announcement of Preview 6 describes some additional changes, not all of which I was able to get to work.

You should also make sure that you're using the latest version of the Telerik UI for Blazor components (I'm using 1.2). This version, among other changes, takes advantage of some bug fixes to Blazor that enable the ValueChanged event on the TelerikCalendar component.

Editor's Note: Since the time of writing, Telerik UI for Blazor 1.3 has been released, with new features and no breaking changes. You can see everything that's new here.

Displaying Dates

The TelerikCalendar provides a full graphical calendar that allows the user to select dates and, by default, page through months to find the date they want. The component has Max and Min attributes that let you control how far the user can page into the future and the past (the calendar also automatically disables dates outside the Min and Max range in displayed months). By default, only one month is displayed at a time, but you can override that by setting the Views attribute to the number of months you want to display on the screen at a time.

Of course, I want to display the user's sign up date when the calendar is first displayed. For that, I can use the component's Value attribute. This means that displaying a date in the TelerikCalendar can be as simple as adding this markup to your page:

<TelerikCalendar Min="@DateTime.Now.AddMonths(-1)"
                 Value="@currentCustomer.SignUp" />

And that would be fine if all I wanted to do was display the customer's signup date. But I want to give the user the ability to select a new date.

Retrieving Dates

You have two (2) options when it comes to retrieving a date the user has selected. If you don't intend to edit the date, then you can bind the component to a field or property using Blazor's @bind-Value attribute. While the Value attribute binds the data in one direction, @bind-Value implements two-way databinding, allowing you to pick up the date the user has selected.

Switching to @bind-Value gives this HTML (notice that, when using Blazor attributes as opposed to the Telerik component's attributes, the @ sign moves out from between the double quotes and onto the attribute name):

<TelerikCalendar Min="@DateTime.Now.AddMonths(-1)"
                 @bind-Value="currentCustomer.SignUp" />

However, if you'd prefer to take some action as soon as the user selects a date, you'll want to use Telerik's ValueChanged event and tie the event to some method in your code. Your method will automatically be passed the new, selected value date the user clicks on it. Your markup would look like this:

<TelerikCalendar Min="@DateTime.Now.AddMonths(-1)"
                 ValueChanged="@SignUpDateChanged" />

And the code to catch the new value would look like this:

private void SignUpDateChanged(DateTime newDate)
  DateTime d =  newDate;

As attractive as this option is, it does have one drawback: You can't combine the ValueChanged attribute with the @bind-Value or Value attributes. Using @bind-Value with ValueChanged generates a compile-time error; using Value with ValueChanged (at least in my testing) seems to prevent the calendar component from highlighting the date the user selects (an issue that, assuming it doesn't just reflect a problem with my testing, will probably be addressed in a later release of either Blazor or the Telerik components).

There's a great deal more to say about the calendar (it supports, for example, multiple views at the year, month, and day level) which I'll discuss in my next blog post.

Peter Vogel
About the Author

Peter Vogel

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter also writes courses and teaches for Learning Tree International.

Related Posts


Comments are disabled in preview mode.