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

Header Template

The <HeaderTemplate> allows you to customize the header of the calendar. If the application defines this template, the component will not render any of the built-in buttons and labels in the header area.

The example below is using a Calendar reference and methods.

Use custom rendering in the Calendar header

<TelerikCalendar @bind-Value="@CalendarValue" @bind-Date="@CalendarDate">

        <TelerikButton OnClick="@GoToPrevious" Icon="@SvgIcon.ArrowLeft" Title="Go to Previous Month"></TelerikButton>
        <TelerikButton OnClick="@SelectToday">Today</TelerikButton>
        <TelerikButton OnClick="@GoToNext" Icon="@SvgIcon.ArrowRight" Title="Go to Next Month"></TelerikButton>

        <TelerikSvgIcon Icon="@SvgIcon.ParameterDateTime" /> @CalendarValue.ToShortDateString()


@code {
    DateTime CalendarValue { get; set; } = DateTime.Now;
    DateTime CalendarDate { get; set; } = DateTime.Now;

    void GoToPrevious()
        CalendarDate = CalendarDate.AddMonths(-1);

    void SelectToday()
        CalendarValue = DateTime.Today;
        CalendarDate = DateTime.Today;

    void GoToNext()
        CalendarDate = CalendarDate.AddMonths(1);

See Also

In this article