Resizing Calendar

[Alex]

Hello,

I am working with using a DateRangePicker with the calendar section always open and I have it in a sidebar. The problem I am having is that the calendar portion does not resize to fit the space it should be contained within. The multiselect I have in the same div work as expected and size down when the size of the window goes down but the calendar of the DateRangePicker instead stays the same size and starts to cover other elements on the page. Any ideas on how I could make the calendar resize properly?

 

Thanks,

Alex

[Eyup]

Hi Alex,

The input, multiselect and other components are static elements which are affected by their parent container. The Calendar in this case, however, is a pop-up element with position: absolute. It does not get affected by the size of its container:
https://dojo.telerik.com/uJIsoCoH/2

You can manually change its size via javascript or use the jQuery append() or appendTo() methods to engrave it as a static element. Alternatively, you can modify the dojo sample to demonstrate your configuration and send it back to us along with some screenshots or video demonstrating the desired appearance. Then, we can make the requested changes and provide the updated link to you.

Regards,
Eyup
Progress Telerik

[Alex]

Hi Eyup,

 

I ended up just manually changing the size in javascript. On page load and when the page resizes I just call this method. 

This solution accomplishes most of what I was looking for. When the page resizes the calendar portion fits into the div perfectly but the one issue I am having is that after the div gets small enough the calendar starts to get cut off. So as the page gets smaller more and more of the days on the right side of the calendar are no longer visible as the calendar get squished down to fit the div. I have attached an image to hopefully demonstrate what I mean as you can see that all the Saturday dates have been cut off. If you have any ideas for how to work around that otherwise thank you for your response.

 

Thanks,

Alex

01.function SizeItems() {
02.        var calendar = document.querySelectorAll(".k-widget.k-calendar")[0];
03.        var divWidth = document.getElementById("filterArea").offsetWidth;
04.        var btn = document.getElementById("resetFilters");
05.        var animationArea = document.querySelectorAll(".k-animation-container")[0];
06.
07.        calendar.style.width = divWidth + "px";
08.        animationArea.style.width = divWidth + "px";
09.
10.        var calHeight = calendar.offsetHeight;
11.        calHeight += 50;
12.
13.        btn.style.marginTop = calHeight + "px";
14.    }

[Eyup]

Hi Alex,

I'm glad that you've managed to find a solution for this case and thank you for sharing your specific approach with our community.

What I can suggest is since the calendar needs some minimal physical space after all, you can limit it at some point. Even if the user decides to resize the parent to be too small, you can prevent that by implementing a horizontal scroll for example.

Regards,
Eyup
Progress Telerik