FullCalendar 未在 Boostrap 4 选项卡中加载

Question

我正在使用 Bootstrap 4 选项卡，在第二个选项卡上我想使用该FullCalendar库显示日历。我使用的 FullCalendar 版本是5.2.0. 如果日历显示在第一个选项卡上，它就可以正常工作，因为它没有隐藏；但是，当它是第二个选项卡的一部分时，它不会加载。我试图通过在用户单击第二个选项卡时触发 JavaScript 事件单击来解决此问题。基本上，我尝试在用户单击选项卡后呈现日历，但没有成功。这是我的代码：<!-- Tabs --><div class="container-fluid">    <div class="container-fluid">        <ul class="nav nav-tabs">            <li class="nav-item">                <a class="nav-link active" data-toggle="tab" href="#today">Today</a>            </li>            <li class="nav-item">                <a class="nav-link" id="calendarButton" data-toggle="tab" href="#week">Week</a>            </li>        </ul>    </div></div><!-- Tabs Content --><div class="tab-content">    <!-- Appointments -->    <div class="tab-pane container" id="today">        <p> Appointments </p>    </div>    <!-- Weekly Calendar -->    <div class="tab-pane container" id="week">        <div class="container-fluid" id="calendar"></div>    </div></div><script>    document.addEventListener('DOMContentLoaded', function() {        var calendarButton = document.getElementById('calendarButton');        var calendarEl = document.getElementById('calendar');        var calendar = new FullCalendar.Calendar(calendarEl, {          themeSystem: 'bootstrap',          headerToolbar: {            right: 'listWeek'          },          events: [                        {% for appointment in appointments %}                        {                            title: "{{ appointment.name}}",                            start: '{{ appointment.start }}',                            end: '{{ appointment.end }}',                        },                        {% endfor %}                   ]        });        calendarButton.addEventListener('click', e => {            calendar.render();        });    });</script>单击第二个选项卡后如何加载日历？

Answer 1

我设法通过延迟日历的呈现找到了解决方法。如果有人觉得它有帮助，要显示日历，您可以calendar.render()在我上面的代码中将其替换为setTimeout(() => {calendar.render()}, 1).