New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Highlighting Dates in the MultiViewCalendar
Updated on Oct 28, 2025
Environment
| Product | Telerik UI for ASP.NET MVC MultiViewCalendar |
Description
How can I highlight some of the dates in the Telerik UI for ASP.NET MVC MultiViewCalendar?
Solution
You can use the following approach:
- Pass a template to the
MonthTemplateIdoption of the MultiViewCalendar. - The dates that will be highlighted are specified in the
Datesconfiguration option of the MultiViewCalendar. This way they will be accessible in the template throughdata.dates. - The template is evaluated for each day, so this allows checking whether the day matches any of the dates in the
Datesconfiguration. If a match is found, the day is wrapped in a div with classcustom-day. - Add custom CSS to customize the appearance of the days that have the
custom-dayclass.
Razor
<script id="monthTemplate" type="text/x-kendo-template">
# var match = false;#
# for (var i = 0; i < dates.length; i++) { #
#if(data.date.getTime() == dates[i].getTime()){#
# match = true; #
# break; #
#}#
# } #
<div class="#=match == true ? 'custom-day' : ''#">#=data.value #</div>
</script>
@(Html.Kendo().MultiViewCalendar()
.Name("MultiViewCalendar")
.Views(12)
.ShowViewHeader()
.Start(CalendarView.Month)
.Depth(CalendarView.Month)
.Selectable("single")
.Depth(CalendarView.Month)
.Footer(false)
.Value(DateTime.Now)
.Min(new DateTime(2021, 1, 1))
.Max(new DateTime(2021, 12, 31))
.Dates(new List<DateTime>()
{
new DateTime(2021, 2, 10),
new DateTime(2021, 2, 17),
new DateTime(2021, 2, 24),
new DateTime(2021, 3, 3),
new DateTime(2021, 3, 10),
new DateTime(2021, 3, 17),
new DateTime(2021, 3, 24),
new DateTime(2021, 3, 31)
//...additional dates...
})
.MonthTemplateId("monthTemplate")
)
<style>
.custom-day {
background-color: sandybrown;
width: 38.84px;
height: 38.84px;
border-radius: 4px;
margin-top: -8px;
margin-left: -8px;
text-align: inherit;
vertical-align: middle;
padding-top: 8px;
}
.k-calendar-range .k-month td.k-selected .custom-day {
background-color: transparent;
}
</style>