Wrap Calendar Views

Environment

Product

Calendar for Blazor

Description

How to make the multiview Calendar wrap to multiple rows when the months do not fit?

How to use columns and rows for the Blazor Calendar multi-month feature?

Solution

1. Set a Class to the <TelerikCalendar> component.
2. Use the custom CSS class to set a flex-flow: row wrap; CSS style to .k-hstack as a descendant selector.
3. (optional) Use the custom CSS class to apply a fixed width.

Wrapping Calendar Views

<h1>Calendar View Wrapping</h1>

<h2>Fixed Width</h2>

<TelerikCalendar Views="4"
                 View="CalendarView.Month"
                 Class="multi-wrap width500">
</TelerikCalendar>

<h2>Flexible Width</h2>

<TelerikCalendar Views="4"
                 View="CalendarView.Month"
                 Class="multi-wrap">
</TelerikCalendar>

<style>
    .width500 {
        width: 500px;
    }

    .multi-wrap .k-hstack {
        flex-flow: row wrap;
    }
</style>

See Also

• Calendar MultiView
• Disable Calendar Weekends
• Hide Calendar Weekends