切换到选项卡时，CSS 未在 fullcalendar 中加载

Question

我有一个选项卡列表面板，最后一个选项卡使用完整日历并且存在这样的问题，当切换到选项卡时，日历的css未加载，但是如果我切换到日历本身的另一个月份，则css开始工作我的日历版本是5.7.2，对于版本3我没有观察到这样的问题，可能是什么问题？vardata=[];$(document).ready(function(){varcalendarEl=document.getElementById('ca

P粉262926195 · Answer

在'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

 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

看起来您的日历正在页面加载期间加载，但 css 未应用，因为日历元素当时被隐藏。您可以在单击选项卡时移动日历负载，并指定一个较小的时间间隔，例如 500 毫秒。尝试下面的代码