Fit calendar to container

Question

I'm trying to make the fullcalendar fitting on the container without success. I've been modifying contentHeight, height and aspectRatio without results.

contentHeight:'auto' is working fine if container is not bigger than the content, displaying scrollbars.

Best calendar configuration I got looks like:

$('#calendar').fullCalendar({
   header: {
            left: '',
            center: '',
            right: ''
        },
    defaultView:'agendaWeek',
    contentHeight:'auto',       //auto
    slotDuration: '00:60:00',        
});

If I get dynamically the size and I set it:

$('#calendar').fullCalendar({
       header: {
                left: '',
                center: '',
                right: ''
            },
        defaultView:'agendaWeek',
        contentHeight:766,     //specific height instead of auto
        slotDuration: '00:60:00',        
    });

The calendar expands, but only the last row, displaying an ugly last row like instead of increasing each row to fit the content. It looks like the following:

Is it possible to 'maximize' the calendar to fit the container?

I did a plnkr where you can reproduce/fork it.

Note: I can't resize the container and the container height is dynamic.

I'm working with 2.3.2 version, but it's the same with all other versions I tested.

Answer 1

Alright, building on Mario's answer I've corrected the bug.

Basically:

• create the calendar
• get the size
• add the size as a CSS rule
• destroy the FC
• recreate the FC so it initializes with the correct sizes

This isn't the most elegant solution, but it will work. If you are loading external events, make sure not to load them in the first FC you create.

var createFC = function () {
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaWeek',
        contentHeight: 'auto',
        defaultDate: '2015-02-12',
        //contentHeight:766, //This fit the content expanding only last row
        slotDuration: '00:60:00',
        events: [{
            title: 'From 7 to 17... Not aligned properly',
            start: '2015-02-12 07:00:00',
            end: '2015-02-12 17:00:00'
        }, ]

    });
}
//Adds a css style sheet
addGlobalStyle = function (css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) {
        return;
    }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

createFC(); //Create the first FC

//Calculate size
var bottomDifference = $('#container')[0].getBoundingClientRect().bottom - $('.fc-slats')[0].getBoundingClientRect().bottom;
var currentHeight = $(".fc-slats > table").css("height");
var newHeight = parseInt(currentHeight) + bottomDifference;
//$( ".fc-slats > table" ).css( "height", newHeight );
addGlobalStyle(".fc-slats > table {height:" + newHeight + "px}");

//Destroy the fullcalendar
$('#calendar').fullCalendar('destroy');
//Create it again, this time with the correct CSS rules on init
createFC();

plnkr Demo

Answer 2

Add the following and you'll get the desired display:

.fc-slats table{
      height: 800px ;
    }

To make it adjust dynamically you'd need to get the height of the container and reset.

 $( window ).resize(function() {
   var newHeight = $('#container').height();
   $( ".fc-slats > table" ).css( "height", newHeight );
});

Answer 3

Improving @BrianMcAuliffe answer.

It's neccessary to add to .fc-slats > table the height of the difference at bottom, so you need to avoid the size of headers, toolbars, custom elements etc, that can vary based on your customize settings or styles. Setting content table height to container height will overflow the container.

The difference at bottom can be obtained like:

var bottomContainerPos = $('#container')[0].getBoundingClientRect().bottom;
var bottomTablePos = $('.fc-slats')[0].getBoundingClientRect().bottom;
var bottomDifference = bottomContainerPos - bottomTablePos ;

And now we can add the difference to the actual height:

 var newHeight = parseInt(currentHeight) + bottomDifference;
 $( ".fc-slats > table" ).css( "height", newHeight );

Still some pixels could appear below due to table borders.

You can check it in this plnkr

Update

When modifying the table style, the slots are still created based on the default row size, so adding events will not be aligned to its hours as you can check adding any event to this proposal. Plnkr to reproduce it with events