Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 03 Apr 2026 07:56 by ADMIN
Joel
Created on: 01 Apr 2026 13:15
Category: Calendar
Type: Feature Request
3
Display month name per month in vertically oriented MultiView Calendar
We have a user requirement to display multiple months vertically in a planning tool. Please refer to the attached example. This can be achieved by the MultiView feature of the Calendar component. However, the month names are only displayed on the header by range in which the user may find it difficult to differentiate between the months below. Although an effort was made to customize the header, it is only functional when oriented horizontally.
Attached Files:
1 comment
ADMIN
Dimo
Posted on: 03 Apr 2026 07:56

Hello Joel,

Here is how to achieve the desired appearance now:

https://blazorrepl.telerik.com/mgYoEROB54IvgEfO54

<TelerikCalendar @bind-Date="@CalendarDate"
                 Views="@CalendarViews"
                 Orientation="@CalendarOrientation.Vertical"
                 Class="with-month-labels" />

<style>
    .with-month-labels .k-calendar-table {
        margin-top: 1.8em;
    }

    .with-month-labels .k-calendar-table::before {
        position: absolute;
        top: -1.5em;
        display: block;
        width: 100%;
        text-align: center;
        color: var(--kendo-color-primary);
    }

    @for (int i = 0; i < CalendarViews; i++)
    {
        <text>
            .with-month-labels .k-calendar-monthview .k-calendar-table:nth-child(@(i + 1))::before {
                content: "@CalendarDate.AddMonths(i).ToString("MMMM yyyy")";
            }
            .with-month-labels .k-calendar-yearview .k-calendar-table:nth-child(@(i + 1))::before {
                content: "@CalendarDate.AddYears(i).ToString("yyyy")";
            }
        </text>
    }
</style>

@code {
    private DateTime CalendarDate { get; set; } = DateTime.Today;

    private int CalendarViews { get; set; } = 3;
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category