blazor-docs/knowledge-base/calendar-views-wrap.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Wrap Calendar Views	How to wrap Calendar views to several lines (rows) when they don't fit horizontally.	how-to	How to Wrap Calendar Views to Multiple Rows	calendar-kb-views-wrap		calendar	1585064, 1617097	kb

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]({%slug components/calendar/overview%}#styling-and-appearance) 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.

caption 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]({%slug components/calendar/multiview%})
• [Disable Calendar Weekends]({%slug calendar-kb-disable-weekends%})
• [Hide Calendar Weekends]({%slug calendar-kb-hide-weekends%})