我在模态中显示完整日历时出错

Question

嗨，我试图在引导模式内设置一个全日历，但它显示自己在左上角受到限制，我看不到任何东西，但是当我调整屏幕大小时，它会发生变化并显示完美，我不知道为什么，我也尝试过在模式之外执行它并且效果完美，你们中有人对这个问题有任何提示吗？

 <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Holidays</h5>
                        <button type="button" class="btn btn-secondary" id="closeCalendarModal">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="calendar"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

$(document).ready(function() {

            var token = $('meta[name="csrf-token"]').attr('content');
            $(".calendarmodal").click(function(e) {
                e.preventDefault();

                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth'
                });
                calendar.setOption('locale', 'es');
                calendar.render();

                $("#calendarModal").modal("toggle");

            });
});

#calendarModal .modal-dialog {
            max-width: 70%;
            /* Ajusta el ancho máximo según tus necesidades */
        }

        #calendarModal .modal-content {
            width: 100%;
            height: 100%;
            max-height: 80vh;
            /* Ajusta la altura máxima según tus necesidades */
        }

我尝试将模态置于外部和内部，应用CSS样式并使用javascript和jquery进行初始化

Answer 1

您正在渲染日历（calendar.render()），然后模态可见。

我通常不使用 Bootstrap，但如果您阅读有关模式的文档，您可以看到有一个名为“shown.bs.modal”的事件，当模式向用户显示时会触发该事件。

$('#myModal').on('shown.bs.modal', function (e) {})

所以我建议您的代码首先调用模态，一旦显示模态就渲染日历。

$(document).ready(function() {

        var token = $('meta[name="csrf-token"]').attr('content');
        $(".calendarmodal").click(function(e) {
            e.preventDefault();

            $("#calendarModal").modal("toggle");

        })
});

$('#myModal').on('shown.bs.modal', function (e) {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.setOption('locale', 'es');
    calendar.render();
})

如果有帮助请告诉我。

Answer 2

添加设置超时：

const button = document.getElementById("button");
        button.addEventListener("click", function () {
                ...
                });
                setTimeout(() => {
                    calendar.render();
                }, "500");;
            });