I have a tab list panel and the last tab uses the full calendar
And there is this problem, when switching to the tab, the css of the calendar is not loading, but if I switch to another month of the calendar itself, the css starts working
My calendar version is 5.7.2, I did not observe such a problem for version 3, what could be the problem?
var 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; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Call your function on
'shown.bs.tab'Your code runs after this tab is shownvar 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.readyIt looks like your calendar is loading during page load, but the css is not being applied because the calendar element is hidden at that time. You can move the calendar load when a tab is clicked and specify a smaller interval, such as 500 milliseconds. Try the following code