Fullcalendar: Adjust calendar height to parent div

Question

I'm trying to create a calendar that adjust it's size to the parent div without success. It's working with the Width but not height.

I haven't modified any property of the Fullcalendar lib. I do not want to have fixed height since I want the div/calendar resize to the user screen size.

HTML:

<body>
<div class="div-container">
<div id='calendar'></div>
</div>
</body>

CSS:

.div-container{
width: 90%;
margin: 0 auto;
height: 100px!important;
}

The way FullCalendar is built (with absolutely positioned dynamic elements), you just can't change the height. See this other question about to "shrink" it. You just can play with the width to adjust it. — Louys Patrice Bessette
I've checked that post and no option is working for me :(. I just want to resize the entire div in order to put another items in the page, it's with 100% width 100% height. When I put #calendar{width:50%} it works properly, but not with height — SiliconMachine
Again, you just can't change the height. FullCalendar is dynamically rendered based on the width. The only thing you can do (which may be ugly) is to is set overflow:scroll to the container. — Louys Patrice Bessette

PoDuck PoDuck · Accepted Answer · 2017-11-09T14:55:47

Fullcalendar has a windowResize callback that according to their docs is:

Triggered after the calendar's dimensions have been changed due to the browser window being resized.

Given that, and the fact that it has a height property, if you get the height of the div you are looking for, you should be able to do something like this:

function get_height() {
      return $(window).height();
}

$('#calendar').fullcalendar({
    height: get_height(),
    windowResize:  function(view) {
        $('#calendar').fullCalendar('option', 'height', get_calendar_height());
    },
    [...]

Make sure that the selector you use, in this case $(window) actually has a height, or your calendar won't have any height.

Fullcalendar: Adjust calendar height to parent div

1 Answers