Bootstrap 模式窗口中的完整日历视图不正确

gopyfrb3 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(146)

我正在开发一个Web应用程序，我已经集成了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>
document.addEventListener('DOMContentLoaded', function(){
    var calendarUI = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarUI,{
    });
    calendar.render();
});</script>

当我打开它时，我有以下视图：

而且当我调整窗口大小时，它神奇地修复了（任何调整大小的操作都有效，甚至打开开发人员工具）

有没有什么想法，什么可能是错误的？也许这个日历不是设计用于模态？

twitter-bootstrap

来源：https://stackoverflow.com/questions/74210232/fullcalendar-view-is-bad-in-modal-window

1条答案

按热度按时间

bq9c1y661#

据我理解，这个问题是这样的：当fullCalendar呈现时，它根据包含它的元素判断它的大小。因此，如果日历所在的模态是以隐藏的方式开始的，那么它的大小实际上为零。因此，您需要确保在模态显示之前不呈现日历，这样它就可以根据模型可见时的尺寸来计算大小。如果模态被隐藏然后再次显示，则呈现日历。
幸运的是，bootstrap提供了“showed”事件，您可以从中处理和调用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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 模式窗口中的完整日历视图不正确

1条答案

相关问题

热门标签

最新问答