blazor-docs/knowledge-base/datepicker-calendar-templates.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Use Calendar Templates in a DatePicker	How to use calendar cell templates with a DatePicker, so that one can style dates	how-to	Use Calendar Cell Templates with a DatePicker	datepicker-calendar-templates		datepicker, dateinput, calendar, template	1543090	kb

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]({%slug calendar-templates-month%}) (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]({%slug calendar-templates-overview%}). However, it is possible to achieve the desired result with a combination of a few components:

• [DateInput]({%slug components/dateinput/overview%}),
• [icon button]({%slug button-icons%})
• [Calendar]({%slug components/calendar/overview%})
• [AnimationContainer]({%slug components/animationcontainer/overview%}).

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]({%slug animationcontainer-kb-close-on-outside-click%}).

The components are wrapped in a container with a position:relative style. This is needed to align the AnimationContainer popup position to the DateInput.

caption 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

• [Hide the AnimationContainer on outside click]({%slug animationcontainer-kb-close-on-outside-click%})