New to Telerik UI for Blazor? Download free 30-day trial

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();
    }
}

See Also

In this article