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

#javascript #css #bootstrap-4 #fullcalendar

#javascript #css #bootstrap-4 #полный календарь

Вопрос:

Я использую fullcalendar.js с модальным Bootstrap 4.

У меня есть кнопка bootstrap4, когда я нажимаю на нее, появляется модальный компонент с полным календарем.

Но когда он загружается в первый раз, я получаю это:

введите описание изображения здесь

Но когда я нажимаю на кнопку next / prev, она работает нормально

введите описание изображения здесь

Итак, как я могу это исправить.

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">amp;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. как и где вы инициализируете календарь? Если он уже инициализирован перед открытием модального модуля, то, вероятно, вам нужно выполнить его повторный рендеринг при открытии модального модуля, иначе он рассчитает положение для различных элементов календаря на основе ширины элементов, которые, когда они скрыты, равны 0.

2. Спасибо, я создаю объект только после того, как модальный модуль открыт в первый раз, и он работает.

Ответ №1:

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

//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)
})