Calendrier plages horaires cliquables

[City-zen]

Bonjour,

Au lieu de vous expliquer longuement ce que je cherche à faire, je vous invite à regarder l'exemple que j'ai trouvé provenant d'un site de réparation de smartphone, tablettes etc.

http://www.phoneglass.fr/reparation/atelier.html

Descendre en bas de la page.

J'aimerais savoir si un code JavaScript de ce type à déjà était mis en place par l'un d'entre vous?

Merci d'avance.

[Benjamin Delespierre]

Non mais je ne vois rien de bien méchant à faire: un coup d'ajax pour aller de mois en mois et un évènement pour le click sur une plage horaire de réservation.

[City-zen]

Merci de ta réponse,

Je pense qu'on est loin d'avoir le même niveau^^

J'ai essayé de reproduire la mise en forme de l'exemple que j'ai donné dans un tableau html, dans lequel seul les dates en début de ligne varient tout les jours. La première ligne de chaque colonne correspond à une heure. Le reste du tableau ne contient que des images. Lors du clique sur une image, je pourrais récupérer toutes les infos dont j'ai besoin (date et heure).

Je ne compte pas permettre le changement de mois.

Par contre j'aimerais savoir comment mis prendre en Ajax pour permettre simplement à la personne de pouvoir cliquer à plusieurs endroit différents et de récupérer seulement les valeurs du créneau choisi lors de la validation.

Je pense utiliser la méthode POST pour récupérer les données.

Désolé de te déranger avec des questions aussi simples mais je réalise actuellement mon premier site.

[Benjamin Delespierre]

Ah d'accord, on peut pas dire que tu aies choisi la facilité pour débuter

Qu'a cela ne tienne: une solution simple consiste à faire porter sur les cellules (td) de ton tableau un timestamp (qui correspond à la date / heure) dans un attribut arbitraire. Ensuite, au clic sur cette cellule, cette donnée sera lue et insérée en tant que champ masqué dans un formulaire. Ainsi, l'utilisateur pourra cliquer autant de plages horaires qu'il veut.

Voici à quoi ça peut ressembler avec du jQuery:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table id="plages">
  <tr>
     <td time="1311697530">&nbsp;</td>
     ...
  </tr>
  ...
</table>
<script type="text/javascript">
$('#plages td').click(function () {
  var timtestamp = $(this).attr('time');
  $('#formulaire').append('<input type="hidden" name="h[]" value="' + timestamp + '" />');
});
</script>

[City-zen]

Encore merci pour ta réponse.

J'essaie actuellement de la mettre en place.

Je viens de réaliser que je vais rencontrer un autre problème concernant les dates.

Est-ce qu'il est possible d'exclure les Dimanches?

J'étais parti sur la gestion des dates suivante:

Code :

1
2
3
4
5
6
7
8
 
		<?php
				$demain_secondes = time() + (3600 * 24 * 4);
 
				$dateDuJour = $jour[date("w",$demain_secondes)]." ".date("d",$demain_secondes)." ".$mois[date("n",$demain_secondes)]." ".date("Y",$demain_secondes);
 
				echo $dateDuJour;
		?>

[City-zen]

J'ai testé ce que tu m'as passé.
J'ai passé le input en type text pour faire des tests.

Il ne s'affiche pas et rien ne se passe lors du clique. Il doit manquer quelque chose d'évident que tu n'as pas précisé.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<table  id="plages">
 
	<tr>
		<td time="1311697530">
			<img src="images/vert.png"/>
		</td>
        </tr>
 
</table>
 
 
	<script type="text/javascript">
		$('#plages td').click(function () {
		  var timtestamp = $(this).attr('time');
		  $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
		});
	</script>
 
<form id="formulaire">
</form>

[Benjamin Delespierre]

Tu as bien chargé la librairie jQuery dans le head de ta page ?

[City-zen]

Oui elle est dans la page index qui appel les autres par un require.

Je l'utilise pour l'instant pour faire des showcases.

[Benjamin Delespierre]

Il y avait une typo dans le code JS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="plages">
	<tr>
		<td time="1311697530">Click Me</td>
	</tr>
</table>
<form id="formulaire">
</form>
 
<script type="text/javascript">
	$('#plages td').click(function () {
	  var timestamp = $(this).attr('time');
	  $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
	});
</script>

[City-zen]

Parfait ça marche, merci beaucoup.

Une idée sinon pour gérer les dates et exclure les dimanches.

La première ligne correspond à a date du jour et les lignes suivantes les jours qui suivent.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
				$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
 
				$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
 
$demain_secondes = time() + (3600 * 24);
if  (date("d",$demain_secondes)=="Dimanche"){
     $demain_secondes = $demain_secondes + (3600 * 24);
}
				$dateDuJour = $jour[date("w",$demain_secondes)]." ".date("d",$demain_secondes)." ".$mois[date("n",$demain_secondes)]." ".date("Y",$demain_secondes);
 
				echo $dateDuJour;

Ceci doit marcher.
Mais n'y a t'il pas plus simple?

[City-zen]

Petit hic.

Le append me crée autant de input que de click.

J'aimerais que ça ne fasse que modifier le contenu du input.

[Benjamin Delespierre]

Quelque chose du style:

Code :

1
2
3
4
5
6
7
8
9
10
11
date_default_timezone_set('Europe/Paris');
 
$now = time();
$then = strtotime('+28 days', $now); // dans 4 semaines
 
$current = $now;
do {
  if (date('D', $current) == 'Sun') // ou Dim selon la locale
    continue;
  echo "Date: " . date('D d/m/Y', $current) . '<br />';
} while (($current = strtotime('+1 days', $current)) && $current <= $then);

[Benjamin Delespierre]

Envoyé par City-zen

Petit hic.

Le append me crée autant de input que de click.

J'aimerais que ça ne fasse que modifier le contenu du input.

Mets ça:

Code :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
	$('#plages td').click(function () {
	  var timestamp = $(this).attr('time');
          if (!$('#formulaire input[value="' + timestamp + '"]').length)
	    $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
          else
            $('#formulaire input[value="' + timestamp + '"]').remove();
	});
</script>

[City-zen]

Bon ben tout marche niquel.

J'ai de quoi faire.

J’espère ne plus rencontrer de problème.

Merci, je mettrai la version finale en ligne.

[City-zen]

Déjà un petit soucis...

Code :

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
	$('#plages td').click(function () {
	  var timestamp = $(this).attr('time');
          if (!$('#formulaire input[value="' + timestamp + '"]').length)
	    $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
          else
            $('#formulaire input[value="' + timestamp + '"]').remove();
	});
</script>

Ce code permet de supprimer le champ si la personne reclick sur au meme endroit ce qui est très bien.
Mais lorsqu'il clique ailleurs cela continue de créer un nouveau champ.
Je n'ai pas trouvé comment on modifier simplement la valeur.
Je suis très mauvais en JS comme tu peux le voir...

[Benjamin Delespierre]

Ah j'avais pas du tout compris ça, je croyais que tu voulais permettre la sélection de plusieurs plages horaires...

Du coup c'est bateau comme problème:

Code :

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
 
<!-- a mettre dans le head -->
<style type="text/css" media="screen"> 
#plages td {
  background-color: #0f0;
  cursor: pointer;
}
 
#plages td.clicked {
  background-color: #f00;
}
</style>
 
<!-- a mettre dans la page -->
<table id="plages">
  <tr>
    <td time="123">xxx</td>
    <td time="456">yyy</td>
    <td time="789">zzz</td>
  </tr>
</table>
<form action="...">
   <input type="hidden" id="time" value="" />
   <input type="submit" value="Réserver" />
</form>
<script type="text/javascript">
<!--
$(function () {
  $('#plages td').click(function () {
     $('#plages td').removeClass('clicked');
     $(this).toggleClass('clicked');
     $('#time').val( $(this).attr('time') );
  });
});
//-->
</script>

Tout bêtement.

Note que cette façon de former des tableaux n'est pas XHTML compliant. Normalement, tu dois créer les sections thead, tfoot et tbody (dans cet ordre).

[City-zen]

Excellent,

Cette fois c'est exactement ce que je recherchais.

Il me reste plus qu'à faire le lien avec l'API google agenda pour enregistrer les plages sélectionnées et empêcher de cliquer sur les plages horaires prisent.

Je sais pas si ça va être plus simple...

[Benjamin Delespierre]

Tu peux emêcher les utilisateurs de cliquer sur une plage horaires en modifiant comme ça:

Code :

1
2
3
4
5
// Remplacer 
$('#plages td').click(function () {
 
// par
$('#plages td:not(.picked)').click(function () {

Avec l'exemple ci-dessus:

Code :

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
<!-- a mettre dans le head -->
<style type="text/css" media="screen"> 
#plages td {
  background-color: #0f0;
  cursor: pointer;
}
 
#plages td.clicked {
  background-color: #f00;
}
 
#plages td.picked {
  background-color: orange;
}
</style>
 
<!-- a mettre dans la page -->
<table id="plages">
  <tr>
    <td time="123">xxx</td>
    <td time="456" class="picked">yyy</td>
    <td time="789">zzz</td>
  </tr>
</table>
<form action="...">
   <input type="hidden" id="time" value="" />
   <input type="submit" value="Réserver" />
</form>
<script type="text/javascript">
<!--
$(function () {
  $('#plages td:not(.picked)').click(function () {
     $('#plages td').removeClass('clicked');
     $(this).toggleClass('clicked');
     $('#time').val( $(this).attr('time') );
  });
});
//-->
</script>

Attention: cette manip ne te dispense pas des vérifications d'usage à faire en PHP.

[City-zen]

C'est parfait mais ça va m'obliger à abandonner ma logique de boucle.

Code :

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
 
<table id="plages">
<tr>
	<th></th>
    <th colspan="4">10h</th>
    <th colspan="4">11h</th>
    <th colspan="4">12h</th>
    <th colspan="4">13h</th>
    <th colspan="4">14h</th>
    <th colspan="4">15h</th>
    <th colspan="4">16h</th>
    <th colspan="4">17h</th>
    <th colspan="4">18h</th>
    <th colspan="4">19h</th>
  </tr>
<?php
$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
date_default_timezone_set('Europe/Paris');
 
$now = time();
$then = strtotime('+7 days', $now); // dans 4 semaines
 
$current = $now;
 
do {
  if (date('D', $current) == 'Sun') // ou Dim selon la locale
    continue;
	$dateDuJour = $jour[date("w",$current)]." ".date("d",$current)." ".$mois[date("n",$current)]." ".date("Y",$current);
	echo  '<tr><th>'.$dateDuJour.'</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;</th><td class="picked" time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td>';
} while (($current = strtotime('+1 days', $current)) && $current <= $then);
 
?>
 
 
 
  </tr>
</table>
<form action="...">
   <input type="text" id="time" value="" />
   <input type="submit" value="Réserver" />
</form>
<script type="text/javascript">
<!--
$(function () {
  $('#plages td:not(.picked)').click(function () {
     $('#plages td').removeClass('clicked');
     $(this).toggleClass('clicked');
     $('#time').val( $(this).attr('time') );
  });
});
</script>

Car là ça empêche la réservation tout les jours de 16h à 16h20.

Mais je vais devoir me poser et réfléchir à comment gérer toutes les régles de gestions maintenant (Selon les choix précédents de l'utilisateur, le click pourra parfois sélectionner 2 cases consécutive; les plages horaires prises sur google agenda ne devront pas être cliquables et la validation du choix de plage horaire devra écrire dans le google agenda).

On peut dire que je suis pas rendu^^

En tout cas merci beaucoup parce que sans toi je serais loin d'en être là où j'en suis

[Benjamin Delespierre]

Juste un conseil: tu ne devrais pas mélanger le PHP et le HTML, ça deviens très rapidement le chaos !

Ce qu'il faut que tu fasse c'est séparer les traitements de l'affichage: un script pour recevoir et traiter les données et un autre (une vue) qui se chargera de les afficher. Si tu te sens l'âme d'un guerrier, tu peux commencer à industrialiser tes codes en suivant le formalisme MVC, c'est payant à long terme.

Je te rappelle aussi que tu peux utiliser la totalité des structures de contrôles avec cette syntaxe dans les vues, afin de ne pas se perdre dans les tabulations:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul>
  <?php foreach ($list as $value): ?>
  <li><?=$value?></li>
  <?php endforeach ?>
</ul>
<?php if ($variable == "valeur"): ?>
<span>Cas n°1</span>
<?php elseif ($variable == "autre valeur"): ?>
<p>Cas n°2</p>
<?php else: ?>
<div>Cas n°3</div>
<?php endif ?>

C'est beaucoup plus propre non ?