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

Header Template

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

The example below is using a DateRangePicker reference and methods.

Header template with custom content in the DateRangePicker Calendar header

<TelerikDateRangePicker StartValue="@StartDate"
                        EndValue="@EndDate"
                        Format="dd MMMM yyyy"
                        StartValueChanged="@( (DateTime? newStart) => StartChanged(newStart) )"
                        EndValueChanged="@( (DateTime? newEnd) => EndChanged(newEnd) )"
                        Min="@MinDate" Max="@MaxDate"
                        @ref="@Picker">
    <HeaderTemplate>
        <span>
            <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>
        </span>
        <span style="padding-right: .6em;">
            <TelerikSvgIcon Icon="@SvgIcon.ParameterDateTime" /> Showing
            <strong>
                @ViewDate.Month/@ViewDate.Year - @ViewDate.AddMonths(1).Month/@ViewDate.AddMonths(1).Year
            </strong>
        </span>
    </HeaderTemplate>
</TelerikDateRangePicker>

@code {
    TelerikDateRangePicker<DateTime?> Picker { get; set; }

    DateTime? StartDate { get; set; } = DateTime.Now;
    DateTime? EndDate { get; set; } = DateTime.Now.AddDays(10);

    DateTime MinDate = new DateTime(1990, 1, 1, 0, 0, 0);
    DateTime MaxDate = new DateTime(2029, 12, 31, 0, 0, 0);

    DateTime ViewDate { get; set; } = DateTime.Now;

    void StartChanged(DateTime? newStart)
    {
        StartDate = newStart;

        if (newStart.HasValue)
        {
            ViewDate = newStart.Value;
        }
        else
        {
            ViewDate = DateTime.Now;
        }
    }

    void EndChanged(DateTime? newEnd)
    {
        EndDate = newEnd;
    }

    void GoToPrevious()
    {
        ViewDate = ViewDate.AddMonths(-1);
        Picker.NavigateTo(ViewDate, CalendarView.Month);
    }

    void SelectToday()
    {
        ViewDate = DateTime.Now;
        Picker.NavigateTo(ViewDate, CalendarView.Month);
    }

    void GoToNext()
    {
        ViewDate = ViewDate.AddMonths(1);
        Picker.NavigateTo(ViewDate, CalendarView.Month);
    }
}
In this article