Ошибка Bootstrap 4 и fullcalendar.js - полный календарь внутри модема начальной загрузки 4 - PullRequest
Новая
       26

Ошибка Bootstrap 4 и fullcalendar.js - полный календарь внутри модема начальной загрузки 4

0 голосов
/ 10 марта 2019

Я использую 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;
}

1 Ответ

1 голос
/ 11 марта 2019

Работает, если я создаю объект после того, как модал открывается в первый раз.

// app.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)
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...