CSS not loading in fullcalendar when switching to tab

Question

I have a tab list panel, the last tab uses the full calendar and there is this problem, when switching to a tab, the css for the calendar is not loading, but if I switch to another month in the calendar itself, the css starts working My calendar version is 5.7.2, for version 3 I did not observe such issue, what could be the problem? vardata=[];$(document).ready(function(){varcalendarEl=document.getElementById('ca

P粉262926195 · Answer

Call your function on 'shown.bs.tab' Your code runs after this tab is shown

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

 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


















  
    
    
    
  


  Home
  Profile

P粉904191507 · Answer

It 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

CSS not loading in fullcalendar when switching to tab

reply all(2)I'll reply