我已经在一个bootstrap 3手风琴中放置了一个fullcalendar,由于某种原因,日历没有显示在它的全高度并被压扁。为什么会这样,希望如何解决?
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');
});
});
答案 0 :(得分:2)
以下是解决方案:
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();
});
});
<强>之前强>:
<强>后强>: