Générer un calendrier

**SpaceFrog** · 25/01/2017, 17h03

Que de souvenirs ...
https://www.developpez.net/forums/d8...drier-v3-beta/

**philippef** · 25/01/2017, 17h53

Le "display:none" concerne l'entête du calendrier :

Code html :

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

1
2
3
4
5
<div id="entete" >
	<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
	<input type='text' name='an'  class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
	<input type='button' name='bouton' value='>' onclick='javascript:next(gen),Njours(gen)'; class='boutonCal'>
</div>

le code css qui lui est affecté

Code css :

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

#entete {width:12.57em;display:none;}

l'entête s'affiche avec le bouton d'affichage

Code html :

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

<input type="button" name="voir_cal" value="cal" class='boutonCal' onclick="afficher_cal(),voir('entete')";>

la fonction pour voir l'entête du calendrier

Code :

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

1
2
3
function voir(id){
	document.getElementById('entete').style.display = 'inline';
}

Par contre depuis que j'ai fait les modifications de la fonction afficher_cal(), la table avec les jours et les dates ne s'affiche plus.
Quand je fais F12 voilà ce que j'obtiens:

"Uncaught ReferenceError: calendrier is not defined
at afficher_cal (script.js:109)
at HTMLInputElement.onclick ((index):101)"

la ligne 110 correspond à :

Code :

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

if (!calendrier) {

à quelle endroit je dois définir cette variable ?
merci

**philippef** · 26/01/2017, 16h53

Bonjour,

Je reprends mon calendrier
Le code ci-dessous fonctionne correctement : le calendrier s'affiche, le jour du mois est en gras et les cellules non utilisées sont colorisées.

Pour terminer ce projet il me reste deux problèmes à résoudre que je ne sais pas faire :
1/ J'ai besoin de récupérer la valeur de la cellule sur un clic
2/ j'ai 2 pages contenant une table et le problème est que si je mets le calendrier sur ces pages, mes tables vont être effacées.

l'entête du calendrier qui affiche le mois et l'année avec les 2 boutons pour le mois précédent et le mois suivant. Cela aussi marche sans problème

Code html :

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

1
2
3
4
5
<div id="entete" >
	<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
	<input type='text' name='an'  class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
	<input type='button' name='bouton' value='>' onclick='javascript:next(gen),Njours(gen)'; class='boutonCal'>
</div>

et le code du calendrier qui s'affiche juste en dessous

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
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
'use strict';
 
function afficher_cal(){
 
	var existingTable = document.querySelector('table');
	if (existingTable) existingTable.parentElement.removeChild(existingTable);
 
	var ladate = new Date();	
	var ladatedujour = ladate.getDate();// la date du jour
	var lemois = ladate.getMonth() + 1;
	var i, c;
	var row, td, th, cell; 
	var table = document.createElement('table');
//
// création des têtes de colonnes
//
	var thead = table.createTHead();
	row = thead.insertRow();
	var nomsJours = [ 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di' ];
	for (i = 0; i < 7; i++) {
		td = document.createElement('td'); // malheureusement, il n’y a pas de méthode insert pour les th(remarque de Watilin)
		td.textContent = nomsJours[i];
		td.scope = 'col'; // optionnel, pour l’accessibilité (remarque de Watilin)
		row.appendChild(td);
	}
//
// 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();
// la première ligne du tableau
	row = tbody.insertRow();
	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;
			}
			if ((i < 7) && (c === lastD)){ // on met de la couleur dans les dernières cellules du tableau
				cell = row.insertCell();
				cell.textContent = '';
				cell.classList.add('couleurvide');
			}
		}
	}		
	document.body.appendChild(table);
}

Merci de m'aider pour terminer ce calendrier

**NoSmoking** · 28/01/2017, 15h39

Une seule chose à la fois

1/ J'ai besoin de récupérer la valeur de la cellule sur un clic

Il te faut mettre un écouteur sur la table, cela s'appelle de la délégation d'événement.
Exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Click on table</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana, sans-serif;
  background: #FFF;
}
#main {
  max-width: 60em;
  margin: auto;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0.5em;
  border: 1px solid #888;
}
</style>
</head>
<body>
<div id="main">
  <h1>Clic on <code>&lt;table&gt;</code></h1>
  <table id="la_table">
    <tr>
      <td>Lig #1 Col #1</td>
      <td>Lig #1 Col #2</td>
    </tr>
    <tr>
      <td>Lig #2 Col #1</td>
      <td>Lig #2 Col #2</td>
    </tr>
    <tr>
      <td>Lig #3 Col #1</td>
      <td>Lig #3 Col #2</td>
    </tr>
    <tr>
      <td>Lig #4 Col #1</td>
      <td>Lig #4 Col #2</td>
    </tr>
  </table>
</div>
<script>
var oTable = document.querySelector('#la_table');
oTable.onclick = function (e) {
  var oElem = e.target;
  if ( 'TD' === oElem.tagName){
    alert( oElem.textContent);
  }
};
</script>
</body>
</html>

**philippef** · 30/01/2017, 10h43

Merci NoSmoking.
A force de chercher j'avais trouvé la solution suivante

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
24
25
26
//placé à la fin de la fonction affiche_cal() qui affiche le calendrier
   var table = document.getElementById("tableCal");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                tableText(this);
            };
        }
    }
}
function tableText(tableCell) {
	var lejourD = tableCell.textContent;
	var lemoisD = parseInt(document.gen.mois_encours.value);
	var lanneeD = parseInt(document.gen.annee.value);
	var ladatedebut;
	if (lejourD < 10) lejourD = '0'+lejourD;
	if (lemoisD < 10) lemoisD = '0'+lemoisD;
	ladatedebut = lejourD +'/'+lemoisD+'/'+lanneeD;
 
	document.gen.debut.value = ladatedebut; // insertion de la date de début de disponibilité
 
 
        document.gen.fin.value = ladatefint;
 
}

mais je vais y mettre ta solution qui est plus courte.

j'ai deux boutons pour pouvoir afficher le calendrier et à écrire une date de début et une date de fin

Code html :

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

1
2
3
4
5
Sélectionnez vos dates de disponibilités<br /><br />
		Date de début : <INPUT type="text" name="debut" value="" size=9em> 
			<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonB" onclick="afficher_cal(),voir('entete')";><br /><br />
		Date de fin :	 <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
			<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonE" onclick="afficher_cal(),voir('entete')";><br />

actuellement j'écris la date par défaut dans l'input de la date de début car je n'arrive pas à récupérer l'id des boutons. ou plus exactement si je créer une fonction avec l'id en argument je ne sais pas quoi en faire

Après il me reste encore le problème de la fonction affiche_cal() qui efface l'autre table en dur sur ma page.

**philippef** · 30/01/2017, 13h15

Alors voilà, j'ai trouvé la solution pour ne pas effacer l'autre tableau en dur sur ma page.

Il ne me plus que le problème de récupérer l'id du bouton cliqué pour écrire dans l'input correspondant.

Code html :

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

1
2
3
4
Date de début : <INPUT type="text" name="debut" value="" size=9em> 
			<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonB" onclick="boutonclique('buttonB'),afficher_cal(),voir('entete')";><br /><br />
Date de fin :	 <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
			<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonE" onclick="boutonclique('buttonE'),afficher_cal(),voir('entete')";><br />

les fonctions

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
24
25
26
27
...
   var table = document.getElementById("tableCal");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                tableText(this);
            };
        }
    }
}
 
function boutonclique(id){
	var idbouton = id;
//	alert(idbouton);
}
// pour le moment j'écris la date dans debut par défaut 
function tableText(tableCell) {
	var lejourD = tableCell.textContent;
	var lemoisD = parseInt(document.gen.mois_encours.value);
	var lanneeD = parseInt(document.gen.annee.value);
	var ladatedebut;
	if (lejourD < 10) lejourD = '0'+lejourD;
	if (lemoisD < 10) lemoisD = '0'+lemoisD;
	ladatedebut = lejourD +'/'+lemoisD+'/'+lanneeD;
	document.gen.debut.value = ladatedebut;
}

Merci pour la fin de mon calendrier

**NoSmoking** · 30/01/2017, 19h51

Il ne me plus que le problème de récupérer l'id du bouton cliqué pour écrire dans l'input correspondant.

Même si il y a plus simple c'est bien ce que tu fais !

**philippef** · 31/01/2017, 10h22

Une dernière chose :

Comme je l'ai dit j'ai 2 boutons qui affichent le calendrier. Le premier me sert à afficher une date dans un input quand on clique sur le calendrier et le 2è bouton sert à afficher aussi une date dans un autre input.
Pour le moment le 2è bouton est caché. Il s'affiche juste après le clic sur le calendrier et le 1er bouton ne s'affiche plus.

Je voudrai que le calendrier ne soit plus affiché après le clic sur une cellule.
Merci de me dire comment faire.

code au moment du clic sur les boutons

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
24
25
26
27
28
 
function tableText(tableCell,obj) {
var inputId = obj.id //l'id du bouton cliqué
if (inputId === '1'){
	var lejourD = tableCell.textContent;
	var lemoisD = parseInt(document.gen.mois_encours.value);
	var lanneeD = parseInt(document.gen.annee.value);
	var ladatedebut;
	if (lejourD < 10) lejourD = '0'+lejourD;
	if (lemoisD < 10) lemoisD = '0'+lemoisD;
	ladatedebut = lejourD +'/'+lemoisD+'/'+lanneeD;
	document.gen.debut.value = ladatedebut;
	document.gen.bouton1.style.display = 'none';
	document.gen.bouton2.style.display = 'inline';
}
else if (inputId === '2'){
	var lejourE = tableCell.textContent;
	var lemoisE = parseInt(document.gen.mois_encours.value);
	var lanneeE = parseInt(document.gen.annee.value);
	var ladatefin;
	if (lejourE < 10) lejourE = '0'+lejourE;
	if (lemoisE < 10) lemoisE = '0'+lemoisE;
	ladatefin = lejourE +'/'+lemoisE+'/'+lanneeE;
	document.gen.fin.value = ladatefin;
 
}
 
}

**NoSmoking** · 04/02/2017, 15h17

Pour le moment le 2è bouton est caché. Il s'affiche juste après le clic sur le calendrier et le 1er bouton ne s'affiche plus.

et que fait-on si on c'est trompé ou que l'on veuille modifier notre choix ou que l'on préfère commencer par la fin ou ...

Je voudrai que le calendrier ne soit plus affiché après le clic sur une cellule.

Si je reprend une partie du code que je t'avais mis, il suffit de masquer l'élément

Code :

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

1
2
3
4
5
6
7
8
9
oTable.onclick = function (e) {
  var oElem = e.target;
  if ( 'TD' === oElem.tagName){
    // on fait ce que l'on a à faire avec le résultat
    alert( oElem.textContent);
    // on masque la <table>
    this.style.display = 'none';
  }
};

**philippef** · 04/02/2017, 20h18

Bonjour et merci.
je n'étais pas venu depuis plusieurs jours et j'ai avancé un peu avec beaucoup d'aide car je connais pas du tout jQuery.
En fait je n'ai plus de boutons. L'affichage du calendrier se fait par le clic sur les input
donc voilà le code pour récupérer la valeur sur une cellule

Code :

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

1
2
3
4
5
6
7
		// Lors du clic sur une cellule (td), run cette fonction
		$("#tableCal td").on('click', function () {
			// On récupère la cellule cliquée
			var clickedCell = $(this);
			tableText(clickedCell);
 
		});

dans mon calendrier j'affiche les derniers jours du mois précédent avant le 1er jour du mois à afficher lorsqu'il n'est pas un lundi. Et aussi les premiers jours du mois suivant. le tout pour avoir un calendrier "plus sympa"
ces cellules ont un style particulier

Code css :

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

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;}

Ce dont j'ai besoin c'est récupérer le background-color de ces cellules qui ne correspondent aux jours du mois affiché pour pouvoir afficher un message.
Après je n'ai pas de problème pour cacher le calendrier et l'entête.
Et je vais regarder de plus jQuery. ça a l'air plus simple que javascript.

en attendant merci d'avance d'une répons qui va finaliser mon calendrier.

**NoSmoking** · 05/02/2017, 11h48

Ce dont j'ai besoin c'est récupérer le background-color de ces cellules qui ne correspondent aux jours du mois affiché ...

pourquoi chercher à récupérer la couleur, il te suffit de mettre une classe, mois_precedent et mois_suivant sur les cellules autres que celles du mois courant et lors du click sur le table récupérer la classe de la cellule et donner suite en fonction de celle-ci.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
oTable.onclick = function (e) {
  var oElem = e.target;
  if ( 'TD' === oElem.tagName){
    // on peut faire par exemple
    var classe = oElem.className;
    if( 'mois_precedent' === classe){
      // action particulière
    }
    // ... etc ... la suite
  }
};

Et je vais regarder de plus jQuery. ça a l'air plus simple que javascript.

jQuery c'est du javascript !

Générer un calendrier

JavaScript

Discussions similaires

Partager

Partager