我正在使用 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>
单击第二个选项卡后如何加载日历?