我将 fullcalendar.js 与 Bootstrap 4 模态一起使用。
当我点击它时，我有一个 bootstrap4 按钮，一个带有 fullcalendar 组件的模态显示。
但是当它第一次加载时我得到这个:
但是当我点击按钮时，下一个/上一个按钮工作正常
那么我该如何解决。
HTML代码
<body>
<div id="content">
<button id="btn-calendar" type="button" class="btn btn-dark" data-toggle="modal" data-target="#modal-calendar"><i class="fas fa-calendar-alt"></i></button>
<div class="modal fade" id="modal-calendar" tabindex="-1" role="dialog" aria-labelledby="modal-calendar-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-calendar-title">Calendar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="calendar"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- script tags -->
</body>
CSS 代码:
* {
margin: 0;
padding: 0;
}
html,
body,
#content {
width: 100%;
height: 100%;
}
#btn-calendar {
margin: 10px;
}
最佳答案
如果我在第一次打开模式后创建对象，它会起作用。
//应用程序.js
$(function() {
var render = () => {
console.log('render after modal is open');
$('#calendar').fullCalendar({
// setup
})
$('.modal').unbind('shown.bs.modal', render)
}
$('.modal').on('shown.bs.modal', render)
})
关于javascript - Bug Bootstrap 4 和 fullcalendar.js - bootstrap 4 模式中的 fullcalendar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55088721/