J'ai un panneau de liste d'onglets, le dernier onglet utilise le calendrier complet et il y a ce problème, lors du passage à un onglet, le CSS du calendrier ne se charge pas, mais si je passe à un autre mois dans le calendrier lui-même, le CSS démarre fonctionne La version de mon calendrier est 5.7.2, pour la version 3, je n'ai pas observé un tel problème, quel pourrait être le problème ? vardata=[];$(document).ready(function(){varcalendarEl=document.getElementById('ca

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 <script> var data = []; $(document).ready(function () { $("#nav-calendar-tab").on("click", function () { setTimeout(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(); }, 500); }); });//end of document.ready </script>

CSS ne se charge pas dans le calendrier complet lors du passage à l'onglet-Questions et réponses sur le réseau chinois PHP

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js" integrity="sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js"></script>

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
                                Home
                            </button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
                                Profile
                            </button>
    <button class="nav-link" id="nav-calendar-tab" data-bs-toggle="tab" data-bs-target="#nav-calendar" type="button" role="tab" aria-controls="nav-calendar" aria-selected="false">
                                Calendar
                            </button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
  <div class="tab-pane fade" id="nav-calendar" role="tabpanel" aria-labelledby="nav-calendar-tab">
    <div id="calendar"></div>
  </div>
</div>

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

répondre à tous(2)

P粉2629261952023-09-07 12:42:37 2 plancher

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

votre code apparaisse dans cet onglet

Comme +0

Ajouter une réponse

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