Stacking Calendar Vertically Instead of Horizontally

[Alex]

Hello,

 

I am wondering if there is any way to customize the DateRangePicker to allow for it to have the two calendar months stacked vertically when it is opened. I am looking to use the range picker in a sidebar on my page and it would fit much better vertically than the default horizontal. 

 

Thank you

[Alex]

Ended up Solving it myself. 

 

.k-calendar-view.k-calendar-monthview{
        display:grid;
        grid-template-columns: [column1-start] 80% [column1-end column2-start] 10%;
        grid-column-gap: 100px;
    }

    .k-content.k-month{
        grid-column-start: 1;
        grid-column-end: 1;
    }

    .k-calendar-range .k-calendar-view{
        white-space:normal;
    }

 

Using these styles I achieved the desired look. The calendar pop up from the DateRangePicker is stacked vertically in the initial month view and then also when you swap to the year and century? views it is stacked vertically to fit in a sidebar.

[Teya]

Hello Alex,

The calendars within the DateRangePicker are horizontally stacked because the flex-direction of their wrapper is set to row. Thus, I would suggest changing the flex-direction to column:

.k-calendar.k-calendar-range:not(.k-calendar-infinite) .k-calendar-view {
   flex-direction: column;
}

I have created the following live example where you can see the implementation of the suggested solution:

https://dojo.telerik.com/uYoKefoX


Generally speaking, the display: grid works as well in this case in most browsers, but it is not really well supported in IE:

https://caniuse.com/#feat=css-grid

This is why changing the flex-direction seems to be the more suitable approach.

I hope this helps.


Regards,
Teya
Progress Telerik