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

[ProgElecT]

Salut

Il me semble que tu veux ajouter une class à une liste qui n'existe pas.
Il faut déjà initialiser une liste de class avec
document.getElementById("Idx").className = "MaPremClass";,
par la suite, dynamiquement tu peux supprimer des class
document.getElementById("Idx").classList.remove("MaPremClass");,
et/ou en ajouter avec
document.getElementById("Idx").classList.add("MaDeuxiemClass");.

https://developer.mozilla.org/fr/doc...ment/classList

[javatwister]

Salut,

on ne voit pas où tu append tes "td";
en tout cas, au moment où tu appelles document.getElementById(idCell), de fait, l'élément n'existe pas encore;
remplace ta ligne 11 par

Code :

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

cell.classList.add("moisEnCours");

[Jeannot45]

Merci à vous deux de vous êtes penché sur mon problème.
Je m'excuse de n'avoir pu répondre plus tôt... mais comme chacun sait, les retraités sont toujours débordés

Mon problème reste entier. Afin de vous permettre de mieux pénétrer mon esprit confus, je vous joins le code complet de la fonction JS que j'utilise pour générer le calendrier ainsi que les fichiers index.html et styles.css.

Merci pour votre aide.

Fichier JS

Code javascript :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
function generationCalendrier(){
    // appel à la balise "body"
    var body = document.getElementsByTagName("body")[0];
 
      //  creation de <table> et <tbody>
    var tbl = document.getElementById("calendrier");
    var tblBody = document.createElement("tbody"); 
 
    //  Suppression des lignes existantes
    var totalLigneCalendrier = tbl.rows.length;
    if(totalLigneCalendrier>1){
        // var Parent = document.getElementById(tableID);
       for(var compteurLigne = 1; compteurLigne <totalLigneCalendrier ;compteurLigne++){
           tbl.deleteRow(totalLigneCalendrier-compteurLigne);
       }
    }
 
 
    var tabLibelMois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
    // var initJour = ['L', 'M', 'M', 'J','V', 'S', 'D'];
    var compteurJour = 0;
    var compteurVide = 0;
 
    //  Récupération des données du Formulaire
    var moisSaisi = document.getElementById('moisConcerne').value;
    var anneeSaisie = document.getElementById('anneeConcernee').value;
    var dateConcernee = anneeSaisie + "/" + moisSaisi + "/01";
 
    //  Récupération des éléments de la date
    var premierJourMois = new Date(dateConcernee);
    var jourSem = premierJourMois.getDay();
 
    //  Création du tableau des jours Max par mois
    if (anneeSaisie % 4 == 0){
        //  Année Bissextile
        var nbJoursDuMois = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }else{
        //  Année standard
        var nbJoursDuMois = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }
 
    //  Récupération du nombre de jours à traiter dans le calendrier
    var nbJoursEnCours = nbJoursDuMois[moisSaisi];
    var nbJoursPrecedent = nbJoursDuMois[moisSaisi - 1];
 
    document.getElementById('moisReserv').innerHTML = 'Réservation du mois de ' + tabLibelMois[moisSaisi - 1];
    // Creation du tableau
    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).setAttribute("class","moisEnCours");
                document.getElementById(idCell).className="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).classList.replace("moisEnCours","horsMois");
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(nbJoursPrecedent - ((jourSem - 2) - compteurVide));
                    compteurVide ++;
                // Renseigne les jours du mois
                }else if (compteurVide == jourSem && compteurJour == 0){
                    compteurJour = 1
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(compteurJour);
                //  Renseigne les cellules vides pour compléter le calendrier apres le dernier jour du mois
                }else{
                    if (compteurJour == nbJoursEnCours){
                        compteurJour = 1;
                        document.getElementById(idCell).classList.replace("moisEnCours","horsMois");
                    }else {
                        compteurJour++;  
                        if (compteurJour < nbJoursEnCours){
                            document.getElementById(idCell).classList.replace("moisEnCours","horsMois");
                        }
                    }
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(compteurJour);
                // }
            }
 
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
        tblBody.appendChild(row);
    }
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "2");
 
}
 
// function getNbJours(date){
//     return new Date(date.getFullYear(), date.getMonth() + 1, -1).getDate() + 1;
// }

Fichier Index.html

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Essai suppression tableau</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body id="body">
    <h1 id="moisReserv">Réservations</h1>
    <hr>
    <form  action= "" method="get">
        <div>
        <label for = "moisConcerne">Mois Concerné</label>
        <input type = "text"  id="moisConcerne" name="moisConcerne" >
        </div>
        <div>
            <label for = "anneeConcenee">Année concernée</label>
        <input type="text"  id="anneeConcernee" name="anneeConcernee">
        </div>
        <input type="button" value="Générer le Calendrier" onclick="generationCalendrier()">
    </form>
    <!-- Création de l'entete du calendrier' -->
    <table id="calendrier">
        <thead>
            <th>L</th>
            <th>M</th>
            <th>M</th>
            <th>J</th>
            <th>V</th>
            <th>S</th>
            <th>D</th>
        </thead>
    </table>
    <script src ="tableau.js"></script>
</body>
</html>

Fichier CSS

Code CSS :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
h1 {
    text-align: center;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid red;
    text-align: center;
}
 
th, td {
    padding: 5px 10px;
    border: 1px solid #000;
    width: 10px;
    height:10px;
    font-size: small;
}
 
th {
    background-color: aquamarine;
}
 
 
.horsMois{
    background-color: rgb(174, 210, 245);
}
 
.moisEnCours{
    background-color: white;
}
 
#moisReserv{
    color:red;
}
 
.saisie{
    width: 10px;
}

[ProgElecT]

Salut

Salut,

on ne voit pas où tu append tes "td";
en tout cas, au moment où tu appelles document.getElementById(idCell), de fait, l'élément n'existe pas encore;
remplace ta ligne 11 par

Code :

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

cell.classList.add("moisEnCours");

La remarque de javatwister est des plus pertinente.
Mais il n'y a pas que la ligne 11.
J'ai fais la correction dans un fichier HTML qui contient ton JavaScript et ton CSS afin de test.

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="fr"> <!-- AAminimumHTML.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
		<style>
                        /* ********************************************************************************** */
h1 {
    text-align: center;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid red;
    text-align: center;
}
 
th, td {
    padding: 5px 10px;
    border: 1px solid #000;
    width: 10px;
    height:10px;
    font-size: small;
}
 
th {
    background-color: aquamarine;
}
 
 
.horsMois{
    background-color: rgb(174, 210, 245);
}
 
.moisEnCours{
    background-color: white;
}
 
#moisReserv{
    color:red;
}
 
.saisie{
    width: 10px;
}
                </style>
	</head>
<body id="body">
    <h1 id="moisReserv">Réservations</h1>
    <hr>
    <form  action= "" method="get">
        <div>
        <label for = "moisConcerne">Mois Concerné</label>
        <input type = "text"  id="moisConcerne" name="moisConcerne" >
        </div>
        <div>
            <label for = "anneeConcenee">Année concernée</label>
        <input type="text"  id="anneeConcernee" name="anneeConcernee">
        </div>
        <input type="button" value="Générer le Calendrier" onclick="generationCalendrier()">
    </form>
    <!-- Création de l'entete du calendrier' -->
    <table id="calendrier">
        <thead>
            <th>L</th>
            <th>M</th>
            <th>M</th>
            <th>J</th>
            <th>V</th>
            <th>S</th>
            <th>D</th>
        </thead>
    </table>
		<script>
                        'use strict'; // force la déclaration des variables
                        //*********************************************************************************** 
function generationCalendrier(){
    // appel à la balise "body"
    var body = document.getElementsByTagName("body")[0];
 
      //  creation de <table> et <tbody>
    var tbl = document.getElementById("calendrier");
    var tblBody = document.createElement("tbody"); 
 
    //  Suppression des lignes existantes
    var totalLigneCalendrier = tbl.rows.length;
    if(totalLigneCalendrier>1){
        // var Parent = document.getElementById(tableID);
       for(var compteurLigne = 1; compteurLigne <totalLigneCalendrier ;compteurLigne++){
           tbl.deleteRow(totalLigneCalendrier-compteurLigne);
       }
    }
 
 
    var tabLibelMois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
    // var initJour = ['L', 'M', 'M', 'J','V', 'S', 'D'];
    var compteurJour = 0;
    var compteurVide = 0;
 
    //  Récupération des données du Formulaire
    var moisSaisi = document.getElementById('moisConcerne').value;
    var anneeSaisie = document.getElementById('anneeConcernee').value;
    var dateConcernee = anneeSaisie + "/" + moisSaisi + "/01";
 
    //  Récupération des éléments de la date
    var premierJourMois = new Date(dateConcernee);
    var jourSem = premierJourMois.getDay();
 
    //  Création du tableau des jours Max par mois
    if (anneeSaisie % 4 == 0){
        //  Année Bissextile
        var nbJoursDuMois = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }else{
        //  Année standard
        var nbJoursDuMois = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }
 
    //  Récupération du nombre de jours à traiter dans le calendrier
    var nbJoursEnCours = nbJoursDuMois[moisSaisi];
    var nbJoursPrecedent = nbJoursDuMois[moisSaisi - 1];
 
    document.getElementById('moisReserv').innerHTML = 'Réservation du mois de ' + tabLibelMois[moisSaisi - 1];
    // Creation du tableau
    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).setAttribute("class","moisEnCours");
                //document.getElementById(idCell).className="moisEnCours";
                cell.setAttribute("class","moisEnCours");
                cell.className="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).classList.replace("moisEnCours","horsMois");
                    cell.classList.replace("moisEnCours","horsMois");
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(nbJoursPrecedent - ((jourSem - 2) - compteurVide));
                    compteurVide ++;
                // Renseigne les jours du mois
                }else if (compteurVide == jourSem && compteurJour == 0){
                    compteurJour = 1
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(compteurJour);
                //  Renseigne les cellules vides pour compléter le calendrier apres le dernier jour du mois
                }else{
                    if (compteurJour == nbJoursEnCours){
                        compteurJour = 1;
                        //document.getElementById(idCell).classList.replace("moisEnCours","horsMois");
                        cell.classList.replace("moisEnCours","horsMois");
                   }else {
                        compteurJour++;  
                        if (compteurJour < nbJoursEnCours){
                            //document.getElementById(idCell).classList.replace("moisEnCours","horsMois");
                            cell.classList.replace("moisEnCours","horsMois");
                        }
                    }
                    //  Ecrit le quantième du jour
                    var cellText = document.createTextNode(compteurJour);
                // }
            }
 
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
        tblBody.appendChild(row);
    }
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "2");
 
}
 
// function getNbJours(date){
//     return new Date(date.getFullYear(), date.getMonth() + 1, -1).getDate() + 1;
// }
                        //---------------------------------------------------------------------------------------
                </script>
</body>
</html>

Reste que l'analyse des jours n'appartenant pas au mois en cours n'est pas bonne, Jeannot45, je te laisse finir cette partie.

[Jeannot45]

Merci beaucoup.
Je mets en

[NoSmoking]

Bonjour,

Code :

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

1
2
    if (anneeSaisie % 4 == 0){
        //  Année Bissextile

Attention pas seulement !

Entre bien d'autres :

Code :

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

1
2
3
function isLeap(year) {
  return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
}