我有一个选项卡列表面板，最后一个选项卡使用完整日历
并且存在这样的问题，当切换到选项卡时，日历的 css 未加载，但是如果我切换到日历本身的另一个月份，则 css 开始工作
我的日历版本是5.7.2，对于版本3我没有观察到这样的问题，可能是什么问题？
2
958var data = [];
$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev',
center: 'title',
right: 'next'
},
editable: false,
contentHeight: 705,
events: data
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 20px auto;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
在
'shown.bs.tab'上调用您的函数您的代码在此选项卡显示后运行var data = []; var calendarEl = document.getElementById('nav-calendar-tab'); $(document).ready(function () { calendarEl.addEventListener('shown.bs.tab', function (event) { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', headerToolbar: { left: 'prev', center: 'title', right: 'next' }, editable: false, contentHeight: 705, events: data }); calendar.render(); }) });//end of document.ready看起来您的日历正在页面加载期间加载，但 css 未应用，因为日历元素当时被隐藏。您可以在单击选项卡时移动日历负载，并指定一个较小的时间间隔，例如 500 毫秒。尝试下面的代码
<script> var data = []; $(document).ready(function () { $("#nav-calendar-tab").on("click", function () { setTimeout(function () { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', headerToolbar: { left: 'prev', center: 'title', right: 'next' }, editable: false, contentHeight: 705, events: data }); calendar.render(); }, 500); }); });//end of document.ready </script>