Use Calendar Templates in a DatePicker
Environment
| Product | DatePicker for Blazor, DateInput for Blazor, Calendar for Blazor, AnimationContainer for Blazor, Button for Blazor |
Description
How to use calendar month cell template (MonthCellTemplate) with the TelerikDatePicker? I need to modify color and font size of enabled and disabled dates inside the Calendar.
Solution
At the time of writing (UI for Blazor version 2.29), the DatePicker does not expose Calendar templates. However, it is possible to achieve the desired result with a combination of a few components:
The only difference to a DatePicker is that the Calendar will not hide automatically when the user clicks outside the popup. The user will need to click on the icon button, or select a date. To improve the experience, you can add a "close" button inside the AnimationContainer or close it with JavaScript.
The components are wrapped in a container with a position:relative style. This is needed to align the AnimationContainer popup position to the DateInput.
Create a DatePicker with separate DateInput, Button, Calendar and AnimationContainer
TelerikDateInput:
<div class="picker-wrapper">
<TelerikDateInput @bind-Value="@DateValue" />
<TelerikButton OnClick="@ToggleCalendar" Icon="@SvgIcon.Calendar" Class="picker-button" />
<TelerikAnimationContainer @ref="@CalendarContainer" Class="picker-popup k-calendar">
<div class="close-button"><TelerikButton OnClick="@ToggleCalendar" Icon="@SvgIcon.X" /></div>
<TelerikCalendar Value="@DateValue" ValueChanged="@CalendarValueChanged"></TelerikCalendar>
</TelerikAnimationContainer>
</div>
<style>
/* align the calendar popup position to the date input */
.picker-wrapper {
display: inline-block;
position: relative;
white-space: nowrap;
}
/* move the popup button over the DateInput */
.picker-button {
margin-left: -34px;
border-left-width: 0;
position: relative;
z-index: 1;
}
/* remove the Calendar border, as we apply one to the AnimationContainer with k-calendar */
.picker-popup > .k-calendar {
border-width: 0;
}
/* align the close button to the right */
.close-button {
text-align: right;
}
/* make the button look like an icon */
.close-button > .k-button {
border: 0;
height: auto;
margin-bottom: 0;
padding-bottom: 0;
background: none transparent;
}
</style>
@code {
private DateTime DateValue { get; set; } = DateTime.Now;
private TelerikAnimationContainer CalendarContainer { get; set; } = null!;
async Task CalendarValueChanged(DateTime newDate)
{
DateValue = newDate;
await ToggleCalendar();
}
async Task ToggleCalendar()
{
await CalendarContainer.ToggleAsync();
}
}