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
- Set a
Class
to the<TelerikCalendar>
component. - Use the custom CSS class to set a
flex-flow: row wrap;
CSS style to.k-hstack
as a descendant selector. - (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>