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 DatePicker reference and methods.
Header template with custom content in the DatePicker Calendar header
<TelerikDatePicker @bind-Value="@PickerValue" @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" /> @ViewDate.Month / @ViewDate.Year
</span>
</HeaderTemplate>
</TelerikDatePicker>
@code {
TelerikDatePicker<DateTime> Picker { get; set; }
DateTime PickerValue { get; set; } = DateTime.Now.AddMonths(-2);
DateTime ViewDate { get; set; } = DateTime.Now.AddMonths(-2);
void GoToPrevious()
{
ViewDate = ViewDate.AddMonths(-1);
Picker.NavigateTo(ViewDate, CalendarView.Month);
}
void SelectToday()
{
PickerValue = DateTime.Today;
Picker.Close();
}
void GoToNext()
{
ViewDate = ViewDate.AddMonths(1);
Picker.NavigateTo(ViewDate, CalendarView.Month);
}
}