简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS ne se charge pas dans le calendrier complet lors du passage à l'onglet
P粉738676186
P粉738676186 2023-09-06 15:33:32
0
2
419

J'ai un panneau de liste d'onglets et le dernier onglet utilise le calendrier complet

Et il y a ce problème, en passant sur l'onglet, le css du calendrier ne se charge pas, mais si je passe à un autre mois du calendrier lui-même, le css se met à fonctionner

Ma version de calendrier est la 5.7.2, je n'ai pas observé de tel problème pour la version 3, quel pourrait être le problème ?

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; }

P粉738676186
P粉738676186

répondre à tous (2)
P粉262926195
P粉2629261952023-09-07 12:42:37 2 plancher

Exécutez'shown.bs.tab'上调用您的函数après que

votre code apparaisse dans cet onglet 
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
Comme+0
Ajouter une réponse
    P粉904191507
    P粉9041915072023-09-07 10:55:49 1 plancher

    Il semble que votre calendrier se charge pendant le chargement de la page, mais le CSS n'est pas appliqué car l'élément du calendrier est masqué à ce moment-là. Vous pouvez déplacer la charge du calendrier lorsque vous cliquez sur un onglet et spécifier un intervalle plus petit, par exemple 500 millisecondes. Essayez le code ci-dessous

    Comme+0
    Ajouter une réponse
      Sujets populaires
      Plus>
      Articles populaires
      Tutoriels populaires
      Plus>
      Tutoriels associés
      Recommandations populaires
      Derniers cours
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！