个人中心
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
文章推荐： c++ - 在 C/C++ 应用程序中使用 Fortran90 模块
文章推荐： java - 来自 Netty 5.x 处理程序的同步调用(阻塞)
文章推荐： java - Hibernate 实体中的映射外键
文章推荐： java - 如何为 XMLGregorianCalendar 编写 GWT CustomSerializer？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com