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">
    <HeaderTemplate>

        <TelerikButton OnClick="@GoToPrevious" Icon="arrow-60-left" Title="Go to Previous Month"></TelerikButton>
        <TelerikButton OnClick="@SelectToday">Today</TelerikButton>
        <TelerikButton OnClick="@GoToNext" Icon="arrow-60-right" Title="Go to Next Month"></TelerikButton>

        <TelerikIcon Icon="parameter-date-time" /> @CalendarValue.ToShortDateString()

    </HeaderTemplate>
</TelerikCalendar>

@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