Django: Представление полного календаря плохо работает в модальном окне

Я разрабатываю веб-приложение на Django, и я интегрировал Fullcalendar. Я поместил его в Bootstrap-модал следующим образом:

           <div class="modal" tabindex="-1" role="dialog" id="calendar-modal">
              <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                  <div class="modal-header">
                    <h3 class="modal-title">Booking Calendar</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">
                    <div id="calendar"></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Create</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

Script:

<script>
document.addEventListener('DOMContentLoaded', function(){
    var calendarUI = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarUI,{
    });
    calendar.render();
});</script>

Когда я открываю его, я имею следующий вид: enter image description here

И это волшебным образом исправляется, когда я изменяю размер окна (любое изменение размера работает, даже открытие инструментов разработчика)

enter image description here

Есть идеи, что может быть не так? Может быть, этот календарь не предназначен для использования в модалах?

Насколько я понимаю, проблема заключается в следующем: когда FullCalendar отображается, он оценивает свой размер на основе элемента, в котором он находится. Поэтому, если модальный элемент, в котором находится календарь, начинает скрываться, его размер фактически равен нулю. Поэтому вам нужно убедиться, что вы не отображаете календарь до тех пор, пока модальный элемент не будет показан, чтобы он мог рассчитать размер, основываясь на размерах модального элемента, когда он виден. Вам также придется повторно отображать календарь, если модальное окно будет скрыто, а затем снова показано.

К счастью, bootstrap предоставляет событие "shown" , которое вы можете обработать и вызвать функцию calendar.render(), чтобы календарь отображался каждый раз, когда модальное окно становится видимым:

document.addEventListener("DOMContentLoaded", function () {
  var calendarUI = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarUI, {});

  const myModal = document.querySelector("#calendar-modal");
  myModal.addEventListener("shown.bs.modal", () => {
    calendar.render();
  });
});

Работающая демонстрация: https://codepen.io/ADyson82/pen/PoaqPWd

Вернуться на верх