gpt4 book ai didi

javascript - Bug Bootstrap 4 和 fullcalendar.js - bootstrap 4 模式中的 fullcalendar

转载 作者:太空宇宙 更新时间:2023-11-04 06:25:51 25 4
gpt4 key购买 nike

我将 fullcalendar.js 与 Bootstrap 4 模态一起使用。

当我点击它时,我有一个 bootstrap4 按钮,一个带有 fullcalendar 组件的模态显示。

但是当它第一次加载时我得到这个:

enter image description here

但是当我点击按钮时,下一个/上一个按钮工作正常

enter image description here

那么我该如何解决。

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">&times;</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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com