Discussion :

[Jeannot45]

Bonjour,

Je souhaite créer un calendrier perpétuel (style des calendriers que l'on trouve sur toutes les pages du WEB ... )
Donc, toutes les cellules contiennent un nombre correspondant au quantième du jour.


Je sais que je dois pouvoir trouver des modèles sur le net mais je pense qu'il s'agit là d'un bon exercice.

Venons en au problème :
Je crée donc le calendrier sans problème:


Par contre la difficulté apparait quand je veux changer la couleur des cellules contenant les dates hors du mois courant (C'est à dire avant le 1 et après le 30 ou 31)
Le tableau est créé dynamiquement (ci dessous extrait du code)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 for (var compteurLigne = 0;compteurLigne < 6; compteurLigne++){
        // creation des lignes du tableau
        var row = document.createElement("tr");
 
        for (var CompteurCell=0; CompteurCell < 7; CompteurCell++){
                //  Création du corps du calendrier
                var cell = document.createElement("td");
                var idCell = "" + compteurLigne + CompteurCell;
                cell.setAttribute("id", idCell);
                document.getElementById(idCell).classList.add("moisEnCours");
 
                //  Renseigne les jours précédant le 1er  du mois
                if(compteurVide != jourSem -1){
                    if(jourSem == 0){
                        jourSem = 7;
                    }
                    //  Colorie le fond de la cellule en gris
                    document.getElementById(idCell).className = "horsMois";
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(nbJoursPrecedent - ((jourSem - 2) - compteurVide));
                    compteurVide ++;
...

J'ai créé un fichier CSS contenant deux styles : horsMois et moisEnCours
je crée un id composé du n° de ligne et du n° de colonne pour chaque cellule du tableau (pour la suite du travail ...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
                var cell = document.createElement("td");
                var idCell = "" + compteurLigne + CompteurCell;
                cell.setAttribute("id", idCell);

le problème se pose quand je veux ajouter la class à la cellule affin de pouvoir la modifier par la suite suivant son contenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById(idCell).classList.add("moisEnCours");

le débogueur m'affiche toujours la même erreur :

Cannot read properties of null (reading 'classList')

Auriez vous une idée qui pourrait me débloquer ?
Merci à tous ceux qui se pencheront sur mon problème