切換到選項卡時，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 毫秒。嘗試下面的程式碼