Générer un calendrier

**philippef** · 16/01/2017, 14h44

bonjour,

avant de me lancer j'essaie quelque chose de très simple mais ça marche pas !!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function afficher_cal(){
	document.getElementById('madiv').innerHTML = "<table border=1> <tr>";
	document.getElementById('madiv').innerHTML = "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>";
	document.getElementById('madiv').innerHTML = "</tr></table>";
}
</SCRIPT>
 
bouton pour afficher le tableau <input type='button' name='voir_cal' value='calendar' onclick='javascript:afficher_cal()';>
 
<div id="madiv" style="width:15em;height:10em;background-color:yellow;">
 
 
</div>

et comme dirait un chanteur : il est où le problème ?

merci

**Watilin** · 16/01/2017, 15h00

Utilise l’inspecteur avec la touche F12 et je pense que tu verras vite le problème

En principe tu devrais voir que ta div contient seulement </tr></table>. C’est parce que chacune de tes déclarations .innerHTML = … écrase la précédente.

Pour corriger le problème, construis une chaîne avec + et passe-la en une seule fois à innerHTML.

Code :

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

1
2
3
4
5
function afficher_cal() {
  document.getElementById('madiv').innerHTML = "<table border=1> <tr>" + 
    "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>" +
    "</tr></table>";
}

Ou mieux, utilise la méthode insertAdjacentHTML.

Et supprime le "javascript:" de ton onclick. C’est une syntaxe obsolète et ça fonctionne sans.

**Watilin** · 16/01/2017, 15h39

En bonus, la version « propre », c’est-à-dire où les codes HTML, JS et CSS sont bien séparés.

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Philippef</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  Bouton pour afficher le tableau
  <input type="button" name="voir_cal" value="calendar">
  <div id="madiv"></div>
</body>
</html>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
@charset "utf-8";
 
#madiv { width: 15em;
         height: 10em;
         background-color: yellow;
}
#madiv table { border-width: 1px;
               border-style: outset;
}
#madiv th, #madiv td { border-width: 1px;
                       border-style: inset;
}

Code JS :

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
'use strict';
 
var madiv;
 
function afficher_cal() {
  madiv.innerHTML = '';
 
  var table = document.createElement('table');
  var row = table.insertRow();
  var cell;
  for (var i = 1; i <= 7; i++) {
    cell = row.insertCell();
    cell.textContent = i;
  }
 
  madiv.appendChild(table);
}
 
document.addEventListener('DOMContentLoaded', function () {
  madiv = document.getElementById('madiv');
 
  document.querySelector('input[name="voir_cal"]')
    .addEventListener('click', afficher_cal);
});

**philippef** · 16/01/2017, 16h21

Merci beaucoup !!
j'étais et suis encore loin de tout ça !!
mon but c'est de créer un calendrier cliquable.
j'avais récupéré un code mais bien sur ça ne marche pas.
j'ai donc complété ce code pour pouvoir changer les mois. Bien sur ce n'est pas ce qu'il y a de mieux mais ça marche.

le code javascript : permet d'afficher le nom du mois et l'année quand on clique sur les boutons "<" et ">"

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
 
function next(gen){
	var numero = parseInt(document.gen.mois_encours.value);
	var numerofin = 12;
	var an = parseInt(document.gen.annee.value);
	if (numero < numerofin){
		var numero = ++numero ;
		document.gen.mois_encours.value= +numero;
	}
	else if (numero = numerofin){
		document.gen.mois_encours.value= 1;
		var an = ++an ;
		document.gen.annee.value= +an;
		numero = 1;
	}
	var le_mois =["","janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
	var valeur = le_mois[numero];
	document.gen.an.value= valeur.concat(' ').concat(+an);
}
function previous(gen){
	var numero = parseInt(document.gen.mois_encours.value);
	var numerofin = 12;
	var an = parseInt(document.gen.annee.value);
	if (numero > 1){
		var numero = --numero ;
		document.gen.mois_encours.value= +numero;
	}
	else if (numero = numerofin){
		document.gen.mois_encours.value= 12;
		var an = --an ;
		document.gen.annee.value= +an;
		numero = 12;
	}
	var le_mois =["","janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
	var valeur = le_mois[numero];
	document.gen.an.value= valeur.concat(' ').concat(+an);
}
function le_jour(el){
	var day = el.innerHTML;
	var month = document.gen.mois_encours.value;
	var year = document.gen.annee.value;
	if ((day < 10) && (month < 10)){ 
		document.gen.date_selected.value = '0'+day +'/' +'0' +month +'/' +year;
		document.gen.date_selected_en.value = +year +'-' +'0' +month +'-' +'0' +day;
	}
	else if ((day < 10) && (month > 9)){ 
		document.gen.date_selected.value = '0'+day +'/' +month +'/'+year;
		document.gen.date_selected_en.value = +year +'-' +month +'-' +'0'  +day;
	}
	else if ((day > 9) && (month < 10)){ 
		document.gen.date_selected.value = +day +'/' +'0' +month +'/'+year;
		document.gen.date_selected_en.value = +year +'-' +'0' +month +'-'+day;
	}
	else {
		document.gen.date_selected.value = +day +'/' +month +'/'+year;
		document.gen.date_selected_en.value = +year +'-'+month +'-'+day;
	}
}
function Njours(gen){
	var mois_js = parseInt(document.gen.mois_encours.value);
	var anne_js = parseInt(document.gen.annee.value);
	target = new Date(anne_js,mois_js,0);
	nbJour = target.getDate(); // donne le nombre de jours dans le mois sélectionné
	document.gen.nbjjs.value = nbJour;
}

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
 
<?php
$jour = date('d');
$mois = date('m');
$anne = date('Y');
$mois_fr = Array("", "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
list($nom_jour, $jour, $mois, $annee) = explode('/', date("w/d/n/Y"));
?>
<FORM NAME="gen" >
<!---
mois en cours  <INPUT type="text" name="mois_encours" value= "<?php echo $mois; ?>"><br />
année <INPUT type="text" name="annee" value="<?php echo $anne;?>"><br />
nb jours dans le mois <input type="text" name ="nbjjs" value="<?php echo $nbjour;?>"><br />
date pour bdd <INPUT type="text" name="date_selected_en" value=""><br /><br />--->
 
Votre date <INPUT type="text" name="date_selected" value=""><br />
<!---################################################################################################ --->
<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
 
<table border =1 style="border-collapse:collapse;font-family:verdana;width:12.4em;">
	<tr><td><input type='button' name='bouton' value='<' onclick='javascript:previous(gen),Njours(gen)'; style='cursor:pointer;'></td>
	<td><input type='text' name='an'  style='text-align:center;border:none;' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'></td>
	<td><input type='button' name='bouton' value='>' onclick='javascript:next(gen),Njours(gen)'; style='cursor:pointer;'></td></tr>
</table>
<!--- la ligne contenant les jours de la semaine --->
<table border =1 style="border-collapse:collapse;font-family:verdana;font-size:0.84em;width:12.4em">
	<tr><td class='plein'>Lun</td><td class='plein'>Mar </td><td class='plein'>Mer </td><td class='plein'>Jeu </td><td class='plein'>Ven </td><td class='plein'>San </td><td class='plein'>Dim </td></tr>

et enfin le tableau des jour du calendrier. Le problème c'est qu'il est écrit en php !! Je voudrais avoir le même résultat mais avec javascript. J'ai regarder depuis xx jours je n'y arrive pas

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
 
<?php
for ($i = 1; $nbjour >= $i; $i++){
	$p = cal_to_jd(CAL_GREGORIAN, $mois, $i, $anne); // formater jour
	$jourweek = jddayofweek($p); // jour de la semaine
	if($i == $nbjour){  //si c'est le dernier jour du mois
		if($jourweek == 1){	//si c'est un lundi on ouvre une ligne
			echo "<tr>";
		}
		if ($i == $jour){
			echo "<td class='plein' onclick='javascript:le_jour(this)';><b>".$i."</b></td></tr>"; // on écrit la date en gras
		}
		else {
			echo "<td class='plein' onclick='javascript:le_jour(this)';>".$i."</td></tr>"; 
		}
	}
	else if($i == 1){ // si c'est le premier jour du mois
		echo "<tr>"; //  on ouvre la ligne
		if($jourweek == 0){  // si c'est un dimanche 
			$jourweek = 7; // on affecte 7 à la variable $jourweek
		}
		for($b = 1 ;$b != $jourweek; $b++){  // on ajoute les cases vides devant le premier jour tant que la variable $b < à 7
			echo "<td class='vide'></td>";
		}
		echo "<td class='plein' onclick='javascript:le_jour(this)';>".$i."</td>";
		if($jourweek == 7){ // si le jour est un dimanche on ferme la ligne
			echo "</tr>";
		}
	}
	else{
		if($jourweek == 1){ // si le jour de la semaine est un lundi on ouvre une ligne
			echo "<tr>";
		}
		if ($i == $jour){ // si $i = la date du jour on écrit la date en gras
			echo "<td class='plein' onclick='javascript:le_jour(this)';><b>".$i."</b></td>";
		}
		else { //si la variable $i # de la date du jour on ne met pas en gras
			echo "<td class='plein' onclick='javascript:le_jour(this)';>".$i."</td>";
		}
		if($jourweek == 0){ // si c'est un dimanche on ferme la ligne
			echo "</tr>";
		}
	}
}
?>
</table>
</FORM>
</div>

un peu (beaucoup !) d'aide m'irai bien
(ne pas trop croire l'attribut que l'on me donne !!)

**Watilin** · 17/01/2017, 03h16

Waaaah… J’ai mis un moment à comprendre à quoi sevaient ces appels à cal_to_jd et jddayofweek

Rassure-toi, pour obtenir le numéro du jour dans la semaine en JavaScript, c’est bien plus simple : c’est une méthode de l’objet Date : getDay.

Le reste du script PHP est facile à convertir je pense, je vais te laisser chercher un peu. Tu peux recourir à la méthode innerHTML que tu utilises déjà, ou sa variante plus efficace insertAdjacentHTML dont je t’ai déjà parlé. Ou sinon tu peux utiliser les méthodes du DOM, notamment :

Tu peux voir un exemple d’utilisation de ces méthodes dans le code « propre » que je t’ai donné.

**philippef** · 17/01/2017, 11h02

J'ai regardé du coté de getDate.
Comme je veux faire un tableau des jours du mois quand on clique j'ai besoin de récupérer la valeur du premier jour du mois.
Pour le moment j'ai ceci dans la fonction pour avoir le nombre de jour du mois et le numéro du jour de la semaine du mois

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function Njours(gen){
	var mois_js = parseInt(document.gen.mois_encours.value);
	var anne_js = parseInt(document.gen.annee.value);
	target = new Date(anne_js,mois_js,0);
	nbJour = target.getDate(); // donne le nombre de jours dans le mois sélectionné
	document.gen.nbjjs.value = nbJour;
	var madate = new Date("Feb-1-2017");
	var nJour = madate.getDay();
	document.gen.premierjourmois.value = nJour;
}

je pense être sur la piste et je continue de chercher !!

Générer un calendrier

JavaScript

Vue hybride

Discussions similaires

Partager

Partager