Bootstrap手风琴压扁内容

Question

我已经在一个bootstrap 3手风琴中放置了一个fullcalendar，由于某种原因，日历没有显示在它的全高度并被压扁。为什么会这样，希望如何解决？

Here is a demo

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();
    });

});

<强>之前：

<强>后：