Bonjour, j'utilise FullCalendar JS 5.10.0, tout fonctionne niquel, mais sur mon site j'ai un système de page sans rechargement (avec des display block et none sur des div).

Le problème survient si je suis sur une "autre page" que je redimensionne et qu'ensuite je retourne sur la page où il y a le FullCalendar. Ce me fait un affichage très étrange et si je viens à redimensionner à nouveau la page, il reprend son apparence normal.

Quelqu'un saurait d'où ça peut venir ? Merci d'avance

Affichage normal :


Affichage étrange : 

-
Edité par Kévin_ 26 octobre 2021 à 10:54:18

Salut,

Vérifie ton DOM entre les deux passages de page.

S'il n'est pas parfaitement identique, c'est là qu'est ton problème, sinon, c'est peut-être quelque part dans ton CSS.

Sans vouloir m'avancer, je doute que ça soit un problème purement JS.

Aide toi de la console pour comparer les deux états, c'est la seule chose à faire.

-
Edité par BrainError 26 octobre 2021 à 12:56:58

Pas de soucis, côté JS (surtout que ça le fait que s'il y a un redimensionnement de fenêtre), ça me fait pas ce problème avec mes autres pages non plus, j'en déduis donc que ça vient du css de FullCalendar , comment je pourrais régler ce problème ?

Tu as ça en ligne quelque part pour y jeter un œil ?

Impossible de t'aider sans accès au code...

J'intègre le calendrier comme ca :

<link rel="stylesheet" href="libraries/FullCalendar-5.10.0/lib/main.css" />

<!-- Planning -->
<div id="display1">
    <div id='calendar' style="padding: 10px;"></div>
</div>

<script src="libraries/FullCalendar-5.10.0/lib/main.js"></script>
<script type="text/javascript" src="script/admin.js"></script>

et dans mon script "admin.js" j'initialise comme ca :

function setCalendar() {
    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        eventDidMount: function(info) {
            tippy(info.el, {
                content:  info.event.extendedProps.description,
                placement: 'top',
                trigger: 'mouseenter'
            });
        }
    });
    calendar.setOption('locale', 'fr');
    calendar.render();

    $.ajax({
        url: "private/linkDBajax.php?param=2",
        type: "GET",
        dataType: "json",
    })
    .done(function(response) {
        response.forEach(elt => {
            calendar.addEvent({
                title: elt[0] + " " + elt[1],
                start: elt[2],
                description: elt[3] + "\n" + elt[4] + "\n Quantité : " + elt[5],
                allDay: false
            });
        });
    })
    .fail(function() {
        window.alert("Une erreur est survenue !");
        document.location.reload();
    });
}

Apres concernant le css, j'utilise le "main.css" de FullCalendar, il fait 1400 ligne, donc si t'en a besoin, je pense qu'il serait plus simple que tu télécharge le fichier  : https://github.com/fullcalendar/fullcalendar/releases/download/v5.10.0/fullcalendar-5.10.0.zip

Edit :

En jouant sur l'affichage avec 

z-index: 1; opacity: 1; height: auto;
/* et */
z-index: 0; opacity: 0; height: 0px;

/* au lieu de  */

display: block;
/* et */
display: none;

Cela règle le problème, cependant les éléments ne sont pas réellement "cachés" du coup ils prennent de la place. Et comme on peut le voir sur ce screen, on peut scroll bien en dessous du planning car les éléments "cachés" occupent cette place. Une idée de comment résoudre ce problème ?


Edit :

Bon bah il semblerait que j'ai réussi à régler tous mes problèmes pour l'instant. En jouant sur l'affichage avec le code ci-dessous, je n'ai plus le problème d'affichage avec FullCalendar et je n'ai plus des éléments qui prennent de la place alors qu'ils sont censés être "cachés".

z-index: 1; opacity: 1; height: auto; overflow : visible;
/* et */
z-index: 0; opacity: 0; height: 0px; overflow : hidden;

-
Edité par Kévin_ 26 octobre 2021 à 17:37:12