From 3b80bcc87f2e40be8068b303841dea962c09b553 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Tue, 10 Dec 2024 13:42:32 +0000 Subject: [PATCH 1/3] Added new kb article calendar-kb-customize-multiview-header --- .../calendar-kb-customize-multiview-header.md | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 knowledge-base/calendar-kb-customize-multiview-header.md 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..4d26f43771 --- /dev/null +++ b/knowledge-base/calendar-kb-customize-multiview-header.md @@ -0,0 +1,98 @@ +--- +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, ui, blazor, calendar, multiview, customization, header, template +res_type: kb +ticketid: 1672888 +--- + +## Environment + + + + + + + + +
ProductCalendar for Blazor
+ +## Description + +I want to customize the header of a MultiView Calendar to display the month name above each 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: + +>caption MultiView Calendar with Header Template. + +````CSHTML +@using System.Globalization; + + + + + + @for (int i = 0; i < ViewCount; i++) + { + var monthNumber = Value.Month + i > 12 ? (Value.Month + i) % 12 : Value.Month + i; + var month = CultureInfo.CurrentCulture.DateTimeFormat.GetAbbreviatedMonthName(monthNumber); +
@month
+ } + + + +@code { + private int ViewCount = 4; + private DateTime StartDate = DateTime.Today; + private DateTime Value = DateTime.Today; + private CalendarView View = CalendarView.Month; + private TelerikCalendar CalendarRef { get; set; } + + private string GetMeetingClass(DateTime date) + { + if (date.Day % 5 == 0) + { + return "meeting"; + } + else if (date.Day % 9 == 0) + { + return "cocktail"; + } + else + { + return ""; + } + } + + private void NavigateToCurrentMonth() + { + CalendarRef.NavigateTo(DateTime.Today, CalendarView.Month); + } + + private void GoToCenturyView() + { + View = CalendarView.Century; + } +} +```` + +## 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) From 964374f1020713324a7b09f74ea6922d32711a4d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:01:43 +0200 Subject: [PATCH 2/3] Polish KB --- .../calendar-kb-customize-multiview-header.md | 97 ++++++++----------- 1 file changed, 39 insertions(+), 58 deletions(-) diff --git a/knowledge-base/calendar-kb-customize-multiview-header.md b/knowledge-base/calendar-kb-customize-multiview-header.md index 4d26f43771..b05641ab5c 100644 --- a/knowledge-base/calendar-kb-customize-multiview-header.md +++ b/knowledge-base/calendar-kb-customize-multiview-header.md @@ -4,7 +4,7 @@ description: Learn how to display the month name above each view in a MultiView 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, ui, blazor, calendar, multiview, customization, header, template +tags: telerik, blazor, calendar, multiview res_type: kb ticketid: 1672888 --- @@ -13,86 +13,67 @@ ticketid: 1672888 - - - - + + + +
ProductCalendar for Blazor
ProductCalendar for Blazor
## Description -I want to customize the header of a MultiView Calendar to display the month name above each view. +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: +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 it is applicable only for a horizontal layout >caption MultiView Calendar with Header Template. ````CSHTML -@using System.Globalization; +@using System.Globalization - - - + @bind-Value="@CalendarValue" + @bind-View="@CalendarView" + Views="@ViewCount"> - @for (int i = 0; i < ViewCount; i++) - { - var monthNumber = Value.Month + i > 12 ? (Value.Month + i) % 12 : Value.Month + i; - var month = CultureInfo.CurrentCulture.DateTimeFormat.GetAbbreviatedMonthName(monthNumber); -
@month
- } +
+ @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 = 4; - private DateTime StartDate = DateTime.Today; - private DateTime Value = DateTime.Today; - private CalendarView View = CalendarView.Month; - private TelerikCalendar CalendarRef { get; set; } - - private string GetMeetingClass(DateTime date) - { - if (date.Day % 5 == 0) - { - return "meeting"; - } - else if (date.Day % 9 == 0) - { - return "cocktail"; - } - else - { - return ""; - } + - private void GoToCenturyView() - { - View = CalendarView.Century; - } +@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) +* [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) From f19db1b413bf8635e552bb26f0b3ccbd9054fa60 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:08:21 +0200 Subject: [PATCH 3/3] Update knowledge-base/calendar-kb-customize-multiview-header.md --- knowledge-base/calendar-kb-customize-multiview-header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/calendar-kb-customize-multiview-header.md b/knowledge-base/calendar-kb-customize-multiview-header.md index b05641ab5c..6862a52ff6 100644 --- a/knowledge-base/calendar-kb-customize-multiview-header.md +++ b/knowledge-base/calendar-kb-customize-multiview-header.md @@ -26,7 +26,7 @@ How to customize the header of a MultiView Calendar to display the month name ab ## 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 it is applicable only for a horizontal layout +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.