jquery - Bootstrap Accordion 压缩内容

Question

我在 bootstrap 3 Accordion 中放置了一个全日历，由于某种原因，日历没有以全高度显示，并且被挤压。这是为什么？我该如何解决它？

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

});

之前:

之后: