Display Full Year in MultiViewCalendar
Environment
Product | Progress® Kendo UI® MultiViewCalendar for jQuery |
Description
How can I set the Kendo UI MultiViewCalendar to display a 3 X 4 column matrix to show all the months?
Solution
The Kendo UI MultiViewCalendar can be configured into a 3 X 4 full year view by setting a defined width to its wrapper.
<div id="multiViewCalendar" />
#multiViewCalendar {
width: 1100px;
}
Then, modify the calendar's view to adapt to the width.
.k-calendar-view {
flex-flow: row wrap;
display: flex;
}
<style>
.k-calendar-view {
flex-flow: row wrap;
display: flex;
}
div[data-role="multiviewcalendar"] {
width: 1100px;
}
</style>
<div id="multiViewCalendar" />
<script>
$(document).ready(function () {
$("#multiViewCalendar").kendoMultiViewCalendar({
selectable: "range",
depth: "month",
showViewHeader: true,
views: 12,
value: new Date(2023, 0, 1),
});
});
</script>