Javascript 未在Boostrap 4选项卡中加载FullCalendar

我使用的是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>

任命

document.addEventListener（'DOMContentLoaded'，function（）{
var calendarButton=document.getElementById（'calendarButton'）；
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
主题系统：“引导”，
headerToolbar：{
右图：“listWeek”
},
活动：[
{约会中约会的百分比%}
{
标题：“{{appointment.name}}”，
开始：“{{appointment.start}}”，
结束：{{appointment.end}}，
},
{%endfor%}
]
});
calendarButton.addEventListener（'click'，e=>{
calendar.render（）；
});
});

---

单击第二个选项卡后如何加载日历？

我通过延迟日历的呈现找到了解决方法。如果有人觉得有帮助，可以用

setTimeout（（）=>{calendar.render（）}，1）

替换上面代码中的日历