diff --git a/knowledge-base/calendar-kb-customize-multiview-header.md b/knowledge-base/calendar-kb-customize-multiview-header.md new file mode 100644 index 0000000000..6862a52ff6 --- /dev/null +++ b/knowledge-base/calendar-kb-customize-multiview-header.md @@ -0,0 +1,79 @@ +--- +title: Customize Month Headers in MultiView Calendar +description: Learn how to display the month name above each view in a MultiView Calendar using a custom header template and CSS in Telerik UI for Blazor. +type: how-to +page_title: How to Customize Month Headers in Telerik UI for Blazor MultiView Calendar +slug: calendar-kb-customize-multiview-header +tags: telerik, blazor, calendar, multiview +res_type: kb +ticketid: 1672888 +--- + +## Environment + + + + + + + + +
ProductCalendar for Blazor
+ +## Description + +How to customize the header of a MultiView Calendar to display the month name above each month view? + +## Solution + +To display the month name above each view in a MultiView Calendar, use the [`HeaderTemplate`]({%slug calendar-templates-header%}) of the TelerikCalendar and apply custom CSS for styling for label positioning. The following example demonstrates how to achieve this customization. Note that the suggested approach is applicable only for `Horizontal` Calendar `Orientation`. + +>caption MultiView Calendar with Header Template. + +````CSHTML +@using System.Globalization + + + +
+ @for (int i = 0; i < ViewCount; i++) + { + int monthNumber = CalendarValue.Month + i > 12 ? (CalendarValue.Month + i) % 12 : CalendarValue.Month + i; + string month = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(monthNumber); + +
@month
+ } +
+
+
+ + + +@code { + private int ViewCount { get; set; } = 3; + private DateTime CalendarDate { get; set; } = DateTime.Today; + private DateTime CalendarValue { get; set; } = DateTime.Today; + private CalendarView CalendarView { get; set; } = CalendarView.Month; +} +```` + +## See Also + +* [Calendar Overview](https://docs.telerik.com/blazor-ui/components/calendar/overview) +* [Calendar Header Template](https://docs.telerik.com/blazor-ui/components/calendar/templates/header-template) +* [Calendar Views](https://docs.telerik.com/blazor-ui/components/calendar/views)