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>