Saya mempunyai panel senarai tab dan tab terakhir menggunakan kalendar penuh
Dan ada masalah ini, apabila beralih ke tab, css kalendar tidak dimuatkan, tetapi jika saya beralih ke bulan lain kalendar itu sendiri, css mula berfungsi
Versi kalendar saya ialah 5.7.2, saya tidak melihat masalah sedemikian untuk versi 3, apakah masalahnya?
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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jalankan
kod anda muncul dalam tab ini'shown.bs.tab'上调用您的函数selepasvar 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.readyNampaknya kalendar anda sedang dimuatkan semasa pemuatan halaman, tetapi css tidak digunakan kerana elemen kalendar disembunyikan pada masa itu. Anda boleh mengalihkan beban kalendar apabila tab diklik dan menentukan selang yang lebih kecil, seperti 500 milisaat. Cuba kod di bawah