Bootstrap гармошка раздавить содержание

Question

Я поместил полный календарь внутри аккордеона начальной загрузки 3, и по какой-то причине календарь не показывается на полную высоту и сдавливается.Почему это и, надеюсь, как я могу это исправить?

Вот демоверсия

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-10">
            <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Calendar">

            <!-- Collapsible Element HTML -->
            <div id="toggleDemo" class="collapse collapse">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>

jquery

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    //Load Full Calendar
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1)
        }
      ]
    });

    //Accordion
    $(".btn").on( "click", function() {
        $("#toggleDemo").collapse('toggle');
    });
});

Answer 1

Вот решение:

https://codepen.io/creativedev/pen/jKmyvJ

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    //Load Full Calendar
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },

        editable: true,
        events: [{
                title: 'All Day Event',
                start: new Date(y, m, 1)
            }


        ]
    });
    //Accordion
    $(".btn").on("click", function() {
        $("#toggleDemo").collapse('toggle');
        $(window).resize();
    });

});

До :

После :