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
|
function afficher_cal(){
var ladate = new Date();
var ladatedujour = ladate.getDate();// la date du jour
var lemois = ladate.getMonth() + 1;
var i, c;
var row, td, abbr; cell;
var thead, tbody;
if (!calendrier) {
calendrier = document.createElement('table');
document.body.appendChild(calendrier);
var thead = table.createTHead();
row = thead.insertRow();
var nomsJours = [
{ nomCourt: 'Lun', nomLong: 'Lundi' },
{ nomCourt: 'Mar', nomLong: 'Mardi' },
{ nomCourt: 'Mer', nomLong: 'Mercredi' },
{ nomCourt: 'Jeu', nomLong: 'Jeudi' },
{ nomCourt: 'Ven', nomLong: 'Vendredi' },
{ nomCourt: 'Sam', nomLong: 'Samedi' },
{ nomCourt: 'Dim', nomLong: 'Dimanche' }
]; // https://youtu.be/QF9lUh5XPxo
for (i = 0; i < 7; i++) {
// j’ai repris les th, c’est quand même plus approprié pour des entêtes
th = document.createElement('th');
th.scope = 'col';
abbr = document.createElement('abbr');
abbr.textContent = nomsJours[i].nomCourt;
abbr.title = nomsJours[i].nomLong;
th.appendChild(abbr);
row.appendChild(th);
}
}
// ici, thead existe forcément, mais tbody pas nécessairement
tbody = calendrier.querySelector('tbody');
if (!tbody) {
// s’il n’existe pas, on le crée…
tbody = calendrier.createTBody();
// … et on lui ajoute le gestionnaire d’évènement des <td>
tbody.addEventListener('click', function (event) {
if ('TD' === event.target.tagName) {
console.log(event.target.textContent);
}
});
}
else {
// s’il existe, on le vide
tbody.innerHTML = '';
}
//
// création du contenu
//
var firstD = parseInt(document.gen.premierjourmois.value); //le jour de la semaine lundi=1, mardi=2,... dimanche=0
var lastD = parseInt(document.gen.nbjjs.value); // donne le nombre de jours (et le dernier) jour du mois
lastD = lastD + 1;
var actualMonth = parseInt(document.gen.mois_encours.value); //
c = 1;
var tbody = table.createTBody();
row = tbody.insertRow();
// la première ligne du tableau
if (firstD === 0){ // premier jour du mois un dimanche
for (i = 1; i < 7; i++) {
cell = row.insertCell();
cell.textContent = '';
cell.classList.add('couleurvide');
}
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
else if (firstD === 1){ // premier jour du mois un lundi
for (i = firstD; i < 8; i++) {
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
}
else { // les autres jours de la semaine
for (i = 1; i < firstD; i++) {
cell = row.insertCell();
cell.textContent = '';
cell.classList.add('couleurvide');
}
for (i = firstD; i < 8; i++) {
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
}
// les autres lignes du tableau
for (c = c; c < lastD; c){
row = tbody.insertRow();
for (i = 1; i < 8; i++){
if ( c < lastD){
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
}
}
}
document.addEventListener('DOMContentLoaded', function () {
madiv = document.getElementById('madiv');
document.querySelector('input[name="voir_cal"]')
.addEventListener('click', afficher_cal);
}); |
Générer un calendrier
Répondre avec citation
Ça peut se factoriser si tu utilises la variable 
C'est la chose qui me manque pour finaliser ce calendrier.
Partager