New to Telerik UI for Blazor? Start a free 30-day trial
Century Cell Template
The Century Cell Template controls what the calendar will render in the <td> element for each decade in the Century view that lists the decades.
The template receives the DateTime corresponding to its cell start year.
Mark some decades on the calendar century view
@* This example highlights certain decades *@
<TelerikCalendar @bind-Date="@startDate" @bind-View="@theView">
<CenturyCellTemplate>
<span style="color: @( ShouldHighlight(context.Year) ? "red" : "inherit" )">
@(context.Year)s
</span>
</CenturyCellTemplate>
</TelerikCalendar>
@code{
DateTime startDate { get; set; } = new DateTime(2021, 4, 1);
CalendarView theView { get; set; } = CalendarView.Century;
List<int> yearsWithEvents { get; set; } = new List<int>() { 2020, 2021, 2055 };
bool ShouldHighlight(int decadeStart)
{
for (int i = 0; i < 10; i++)
{
if(yearsWithEvents.Contains(decadeStart + i))
{
return true;
}
}
return false;
}
}