[Calendrier] plages horaires cliquables

Version imprimable

26/07/2011, 11h37
City-zen

[Calendrier] plages horaires cliquables

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.
26/07/2011, 11h55
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.
26/07/2011, 18h03
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.

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

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"> </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>

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; ?>

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>

27/07/2011, 14h01
Benjamin Delespierre

Tu as bien chargé la librairie jQuery dans le head de ta page ?
27/07/2011, 14h42
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.

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>

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?

27/07/2011, 15h58
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.

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);

Citation:

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>

27/07/2011, 16h17
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.

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...

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  <style type="text/css" media="screen"> #plages td { background-color: #0f0; cursor: pointer; } #plages td.clicked { background-color: #f00; } </style>  <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">  </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).

27/07/2011, 17h30
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...

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.

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

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 ?

28/07/2011, 10h56
City-zen

Oui je connais le modèle MVC mais c'est vrai que j'ai pas encore vraiment la méthodologie et le réflexe pour le mettre en place.

J'ai pas vraiment compris l’intérêt du bout de code que tu m'as fourni.

C'est un exemple de couplage HTML / PHP.

Selon toi qu'est ce qui est plus propre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> bla bla bla <?php if ($condition) { echo "<span>blablabla</span>"; } ?> </html> // ou <html> bla bla bla <?php if ($condition): ?> <span>bla bla bla</span> <?php endif ?> </html>
Dans le premier cas, l'indentation deviens (très) vite un casse-tête. De plus, si tu as un IDE comme Eclipse ou NetBeans, la coloration syntaxique permet une meilleure lisibilité avec le deuxième type de code.

My 2 cents.

28/07/2011, 11h46
City-zen

Ha ok j'avais pas compris ça.
Merci du coup de pouce.
28/07/2011, 16h11
City-zen

Est-ce que tu aurais déjà créé une connexion avec un google calendar?

J'ai importé Zend.

Je me perd un peu dans les include et les requires dont j'ai besoin.

Également dans mon choix d'authentification (ClientAuth, AuthSub).

Etant donné que je veux seulement créé une connexion avec le calendar afin d'enregistrer et d'extraire des donnés et que ça soit ouvert à tout les clients sans authentification.

Après niveau manip pour faire ça, je pense avoir trouvé ce qu'il me faut.
29/07/2011, 11h29
Benjamin Delespierre

Non et d'ailleurs je n'utilise pas Zend, j'ai mes propres outils ;)
29/07/2011, 14h02
City-zen

Haha très très fort merci quand même.
29/07/2011, 14h04
Benjamin Delespierre

Citation:

Envoyé par City-zen

Haha très très fort merci quand même.

J'ai pas compris 8O
29/07/2011, 15h05
City-zen

Je disais que tu es très fort par rapport au fait que tu ai créé tes propres outils.

Sinon pour Zend ça fonctionne, ça sent la fin!!!

Le seul petit problème que je vais rencontrer, c'est comment rendre "picked" un td en fonction de son time. Si le lundi à 10h la plage est prise, je le vois grace au info que je récupère du calendar mais comment à partir de cette info et du time correspondant puis-je rendre le td picked?
01/08/2011, 09h10
Benjamin Delespierre

Avec une bête comparaison d'intervale lors de la construction du tableau, tu mets les classes picked là ou il faut.
01/08/2011, 14h54
City-zen

En PHP je vois pas comment faire à part un if dans chaque TD ce qui serait vraiment pas top je pense comme méthode.

Je pense qu'il doit y avoir une manière bien plus efficace en Javascript mais mes limites dans ce langage me bloquent encore une fois...
01/08/2011, 15h15
Benjamin Delespierre

Citation:

Envoyé par City-zen

En PHP je vois pas comment faire à part un if dans chaque TD ce qui serait vraiment pas top je pense comme méthode.

La génération de ton tableau se fait bien à partir d'une boucle non ? Dans ce cas, c'est pas plus mal de tester les valeurs pour poser les classes aux bons endroits au moment de sa construction.

Non, ça n'est plus une boucle.

Voilà à quoi ressemble le code maintenant.

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
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
 
if (isset($_POST["time"])) {
require_once 'Zend/Loader.php';
require_once 'Zend/Gdata/Calendar.php';
Zend_Loader::loadClass('Zend_Gdata'); 
Zend_Loader::loadClass('Zend_Gdata_Query'); 
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
 
$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
$user = "*********@gmail.com";
$pass = "*********";
 
// Create an authenticated HTTP client
$client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $service);
 
// Create an instance of the Calendar service
$service = new Zend_Gdata_Calendar($client);
$cal = new Zend_Gdata_Calendar($client);
    $service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
    $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $service);
    $service = new Zend_Gdata_Calendar($client);
 
    $eventURL = "https://www.google.com/calendar/feeds/phoneglasstoulouse%40gmail.com/private-7ee50cdf1fabe5ab581d44d425059c0a/basic";
 
 
 
    // Create a new entry using the calendar service's magic factory method
    $event= $service->newEventEntry();
 
    // Populate the event with the desired information
    // Note that each attribute is crated as an instance of a matching class
    $event->title = $service->newTitle("My Event");
    $event->where = array($service->newWhere("Mountain View, California"));
    $event->content =
        $service->newContent(" This is my awesome event. RSVP required.");
 
    // Set the date using RFC 3339 format.
    $durée = 30;
 
    $min_fin = split("[:T]", $_POST["time"]);
    $min= $min_fin[2] + $durée; 
    $h=$min_fin[1];
    if ($min>=60){
    	$min=$min-60;
    	$h=$h+1;	
    }
    $time_fin = $min_fin[0]."T".$h.":".$min.":".$min_fin[3].":".$min_fin[4];
    echo $time_fin;
    $when = $service->newWhen();
    $when->startTime = $_POST["time"];
    $when->endTime = $time_fin;
    $event->when = array($when);
 
    // Upload the event to the calendar server
    // A copy of the event as it is recorded on the server is returned
    $newEvent = $service->insertEvent($event);
}
 
<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");
$mois_nbr = array("","01","02","03","04","05","06","07","08","09","10","11","12");
date_default_timezone_set('Europe/Paris');
 
$now = time();
$then = strtotime('+8 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);
	$format_heur[] = date("Y",$current)."-".$mois_nbr[date("n",$current)]."-".date("d",$current)."T";
 
} while (($current = strtotime('+1 days', $current)) && $current <= $then);
 
echo  '<tr><th>'.$dateDuJour[0].'</th><td time="'.$format_heur[0].'10:00:00.000+02:00">00</td><td time="'.$format_heur[0].'10:20:00.000+02:00">20</td><td time="'.$format_heur[0].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'11:00:00.000+02:00">00</td><td time="'.$format_heur[0].'11:20:00.000+02:00">20</td><td time="'.$format_heur[0].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'12:00:00.000+02:00">00</td><td time="'.$format_heur[0].'12:20:00.000+02:00">20</td><td time="'.$format_heur[0].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'13:00:00.000+02:00">00</td><td time="'.$format_heur[0].'13:20:00.000+02:00">20</td><td time="'.$format_heur[0].'13:40:00.000+02:00">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 time="'.$format_heur[0].'16:00:00.000+02:00">00</td><td time="'.$format_heur[0].'16:20:00.000+02:00">20</td><td time="'.$format_heur[0].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'17:00:00.000+02:00">00</td><td time="'.$format_heur[0].'17:20:00.000+02:00">20</td><td time="'.$format_heur[0].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'18:00:00.000+02:00">00</td><td time="'.$format_heur[0].'18:20:00.000+02:00">20</td><td time="'.$format_heur[0].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[0].'19:00:00.000+02:00">00</td><td time="'.$format_heur[0].'19:20:00.000+02:00">20</td><td time="'.$format_heur[0].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[1].'</th><td time="'.$format_heur[1].'10:00:00.000+02:00">00</td><td time="'.$format_heur[1].'10:20:00.000+02:00">20</td><td time="'.$format_heur[1].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'11:00:00.000+02:00">00</td><td time="'.$format_heur[1].'11:20:00.000+02:00">20</td><td time="'.$format_heur[1].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'12:00:00.000+02:00">00</td><td time="'.$format_heur[1].'12:20:00.000+02:00">20</td><td time="'.$format_heur[1].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'13:00:00.000+02:00">00</td><td time="'.$format_heur[1].'13:20:00.000+02:00">20</td><td time="'.$format_heur[1].'13:40:00.000+02:00">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 time="'.$format_heur[1].'16:00:00.000+02:00">00</td><td time="'.$format_heur[1].'16:20:00.000+02:00">20</td><td time="'.$format_heur[1].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'17:00:00.000+02:00">00</td><td time="'.$format_heur[1].'17:20:00.000+02:00">20</td><td time="'.$format_heur[1].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'18:00:00.000+02:00">00</td><td time="'.$format_heur[1].'18:20:00.000+02:00">20</td><td time="'.$format_heur[1].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[1].'19:00:00.000+02:00">00</td><td time="'.$format_heur[1].'19:20:00.000+02:00">20</td><td time="'.$format_heur[1].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[2].'</th><td time="'.$format_heur[2].'10:00:00.000+02:00">00</td><td time="'.$format_heur[2].'10:20:00.000+02:00">20</td><td time="'.$format_heur[2].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'11:00:00.000+02:00">00</td><td time="'.$format_heur[2].'11:20:00.000+02:00">20</td><td time="'.$format_heur[2].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'12:00:00.000+02:00">00</td><td time="'.$format_heur[2].'12:20:00.000+02:00">20</td><td time="'.$format_heur[2].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'13:00:00.000+02:00">00</td><td time="'.$format_heur[2].'13:20:00.000+02:00">20</td><td time="'.$format_heur[2].'13:40:00.000+02:00">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 time="'.$format_heur[2].'16:00:00.000+02:00">00</td><td time="'.$format_heur[2].'16:20:00.000+02:00">20</td><td time="'.$format_heur[2].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'17:00:00.000+02:00">00</td><td time="'.$format_heur[2].'17:20:00.000+02:00">20</td><td time="'.$format_heur[2].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'18:00:00.000+02:00">00</td><td time="'.$format_heur[2].'18:20:00.000+02:00">20</td><td time="'.$format_heur[2].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[2].'19:00:00.000+02:00">00</td><td time="'.$format_heur[2].'19:20:00.000+02:00">20</td><td time="'.$format_heur[2].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[3].'</th><td time="'.$format_heur[3].'10:00:00.000+02:00">00</td><td time="'.$format_heur[3].'10:20:00.000+02:00">20</td><td time="'.$format_heur[3].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'11:00:00.000+02:00">00</td><td time="'.$format_heur[3].'11:20:00.000+02:00">20</td><td time="'.$format_heur[3].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'12:00:00.000+02:00">00</td><td time="'.$format_heur[3].'12:20:00.000+02:00">20</td><td time="'.$format_heur[3].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'13:00:00.000+02:00">00</td><td time="'.$format_heur[3].'13:20:00.000+02:00">20</td><td time="'.$format_heur[3].'13:40:00.000+02:00">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 time="'.$format_heur[3].'16:00:00.000+02:00">00</td><td time="'.$format_heur[3].'16:20:00.000+02:00">20</td><td time="'.$format_heur[3].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'17:00:00.000+02:00">00</td><td time="'.$format_heur[3].'17:20:00.000+02:00">20</td><td time="'.$format_heur[3].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'18:00:00.000+02:00">00</td><td time="'.$format_heur[3].'18:20:00.000+02:00">20</td><td time="'.$format_heur[3].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[3].'19:00:00.000+02:00">00</td><td time="'.$format_heur[3].'19:20:00.000+02:00">20</td><td time="'.$format_heur[3].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[4].'</th><td time="'.$format_heur[4].'10:00:00.000+02:00">00</td><td time="'.$format_heur[4].'10:20:00.000+02:00">20</td><td time="'.$format_heur[4].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'11:00:00.000+02:00">00</td><td time="'.$format_heur[4].'11:20:00.000+02:00">20</td><td time="'.$format_heur[4].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'12:00:00.000+02:00">00</td><td time="'.$format_heur[4].'12:20:00.000+02:00">20</td><td time="'.$format_heur[4].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'13:00:00.000+02:00">00</td><td time="'.$format_heur[4].'13:20:00.000+02:00">20</td><td time="'.$format_heur[4].'13:40:00.000+02:00">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 time="'.$format_heur[4].'16:00:00.000+02:00">00</td><td time="'.$format_heur[4].'16:20:00.000+02:00">20</td><td time="'.$format_heur[4].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'17:00:00.000+02:00">00</td><td time="'.$format_heur[4].'17:20:00.000+02:00">20</td><td time="'.$format_heur[4].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'18:00:00.000+02:00">00</td><td time="'.$format_heur[4].'18:20:00.000+02:00">20</td><td time="'.$format_heur[4].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[4].'19:00:00.000+02:00">00</td><td time="'.$format_heur[4].'19:20:00.000+02:00">20</td><td time="'.$format_heur[4].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[5].'</th><td time="'.$format_heur[5].'10:00:00.000+02:00">00</td><td time="'.$format_heur[5].'10:20:00.000+02:00">20</td><td time="'.$format_heur[5].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'11:00:00.000+02:00">00</td><td time="'.$format_heur[5].'11:20:00.000+02:00">20</td><td time="'.$format_heur[5].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'12:00:00.000+02:00">00</td><td time="'.$format_heur[5].'12:20:00.000+02:00">20</td><td time="'.$format_heur[5].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'13:00:00.000+02:00">00</td><td time="'.$format_heur[5].'13:20:00.000+02:00">20</td><td time="'.$format_heur[5].'13:40:00.000+02:00">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 time="'.$format_heur[5].'16:00:00.000+02:00">00</td><td time="'.$format_heur[5].'16:20:00.000+02:00">20</td><td time="'.$format_heur[5].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'17:00:00.000+02:00">00</td><td time="'.$format_heur[5].'17:20:00.000+02:00">20</td><td time="'.$format_heur[5].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'18:00:00.000+02:00">00</td><td time="'.$format_heur[5].'18:20:00.000+02:00">20</td><td time="'.$format_heur[5].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[5].'19:00:00.000+02:00">00</td><td time="'.$format_heur[5].'19:20:00.000+02:00">20</td><td time="'.$format_heur[5].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[6].'</th><td time="'.$format_heur[6].'10:00:00.000+02:00">00</td><td time="'.$format_heur[6].'10:20:00.000+02:00">20</td><td time="'.$format_heur[6].'10:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'11:00:00.000+02:00">00</td><td time="'.$format_heur[6].'11:20:00.000+02:00">20</td><td time="'.$format_heur[6].'11:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'12:00:00.000+02:00">00</td><td time="'.$format_heur[6].'12:20:00.000+02:00">20</td><td time="'.$format_heur[6].'12:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'13:00:00.000+02:00">00</td><td time="'.$format_heur[6].'13:20:00.000+02:00">20</td><td time="'.$format_heur[6].'13:40:00.000+02:00">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 time="'.$format_heur[6].'16:00:00.000+02:00">00</td><td time="'.$format_heur[6].'16:20:00.000+02:00">20</td><td time="'.$format_heur[6].'16:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'17:00:00.000+02:00">00</td><td time="'.$format_heur[6].'17:20:00.000+02:00">20</td><td time="'.$format_heur[6].'17:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'18:00:00.000+02:00">00</td><td time="'.$format_heur[6].'18:20:00.000+02:00">20</td><td time="'.$format_heur[6].'18:40:00.000+02:00">40</td><th>&nbsp;</th><td time="'.$format_heur[6].'19:00:00.000+02:00">00</td><td time="'.$format_heur[6].'19:20:00.000+02:00">20</td><td time="'.$format_heur[6].'19:40:00.000+02:00">40</td></tr>';
 
?>    
 
</table>
<form action="calendrier" method="post">
   <input type="text" id="time" name="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>

01/08/2011, 16h43
Benjamin Delespierre

Code:

echo '<tr><th>'.$dateDuJour[0].'</th><td time="'.$format_heur[0].'10:00:00.000+02:00">00</td><td time="'.$format_heur[0].'10:20:00.000+02:00">20</td><td time="'.$format_heur[0].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'11:00:00.000+02:00">00</td><td time="'.$format_heur[0].'11:20:00.000+02:00">20</td><td time="'.$format_heur[0].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'12:00:00.000+02:00">00</td><td time="'.$format_heur[0].'12:20:00.000+02:00">20</td><td time="'.$format_heur[0].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'13:00:00.000+02:00">00</td><td time="'.$format_heur[0].'13:20:00.000+02:00">20</td><td time="'.$format_heur[0].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[0].'16:00:00.000+02:00">00</td><td time="'.$format_heur[0].'16:20:00.000+02:00">20</td><td time="'.$format_heur[0].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'17:00:00.000+02:00">00</td><td time="'.$format_heur[0].'17:20:00.000+02:00">20</td><td time="'.$format_heur[0].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'18:00:00.000+02:00">00</td><td time="'.$format_heur[0].'18:20:00.000+02:00">20</td><td time="'.$format_heur[0].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[0].'19:00:00.000+02:00">00</td><td time="'.$format_heur[0].'19:20:00.000+02:00">20</td><td time="'.$format_heur[0].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[1].'</th><td time="'.$format_heur[1].'10:00:00.000+02:00">00</td><td time="'.$format_heur[1].'10:20:00.000+02:00">20</td><td time="'.$format_heur[1].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'11:00:00.000+02:00">00</td><td time="'.$format_heur[1].'11:20:00.000+02:00">20</td><td time="'.$format_heur[1].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'12:00:00.000+02:00">00</td><td time="'.$format_heur[1].'12:20:00.000+02:00">20</td><td time="'.$format_heur[1].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'13:00:00.000+02:00">00</td><td time="'.$format_heur[1].'13:20:00.000+02:00">20</td><td time="'.$format_heur[1].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[1].'16:00:00.000+02:00">00</td><td time="'.$format_heur[1].'16:20:00.000+02:00">20</td><td time="'.$format_heur[1].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'17:00:00.000+02:00">00</td><td time="'.$format_heur[1].'17:20:00.000+02:00">20</td><td time="'.$format_heur[1].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'18:00:00.000+02:00">00</td><td time="'.$format_heur[1].'18:20:00.000+02:00">20</td><td time="'.$format_heur[1].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[1].'19:00:00.000+02:00">00</td><td time="'.$format_heur[1].'19:20:00.000+02:00">20</td><td time="'.$format_heur[1].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[2].'</th><td time="'.$format_heur[2].'10:00:00.000+02:00">00</td><td time="'.$format_heur[2].'10:20:00.000+02:00">20</td><td time="'.$format_heur[2].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'11:00:00.000+02:00">00</td><td time="'.$format_heur[2].'11:20:00.000+02:00">20</td><td time="'.$format_heur[2].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'12:00:00.000+02:00">00</td><td time="'.$format_heur[2].'12:20:00.000+02:00">20</td><td time="'.$format_heur[2].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'13:00:00.000+02:00">00</td><td time="'.$format_heur[2].'13:20:00.000+02:00">20</td><td time="'.$format_heur[2].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[2].'16:00:00.000+02:00">00</td><td time="'.$format_heur[2].'16:20:00.000+02:00">20</td><td time="'.$format_heur[2].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'17:00:00.000+02:00">00</td><td time="'.$format_heur[2].'17:20:00.000+02:00">20</td><td time="'.$format_heur[2].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'18:00:00.000+02:00">00</td><td time="'.$format_heur[2].'18:20:00.000+02:00">20</td><td time="'.$format_heur[2].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[2].'19:00:00.000+02:00">00</td><td time="'.$format_heur[2].'19:20:00.000+02:00">20</td><td time="'.$format_heur[2].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[3].'</th><td time="'.$format_heur[3].'10:00:00.000+02:00">00</td><td time="'.$format_heur[3].'10:20:00.000+02:00">20</td><td time="'.$format_heur[3].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'11:00:00.000+02:00">00</td><td time="'.$format_heur[3].'11:20:00.000+02:00">20</td><td time="'.$format_heur[3].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'12:00:00.000+02:00">00</td><td time="'.$format_heur[3].'12:20:00.000+02:00">20</td><td time="'.$format_heur[3].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'13:00:00.000+02:00">00</td><td time="'.$format_heur[3].'13:20:00.000+02:00">20</td><td time="'.$format_heur[3].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[3].'16:00:00.000+02:00">00</td><td time="'.$format_heur[3].'16:20:00.000+02:00">20</td><td time="'.$format_heur[3].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'17:00:00.000+02:00">00</td><td time="'.$format_heur[3].'17:20:00.000+02:00">20</td><td time="'.$format_heur[3].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'18:00:00.000+02:00">00</td><td time="'.$format_heur[3].'18:20:00.000+02:00">20</td><td time="'.$format_heur[3].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[3].'19:00:00.000+02:00">00</td><td time="'.$format_heur[3].'19:20:00.000+02:00">20</td><td time="'.$format_heur[3].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[4].'</th><td time="'.$format_heur[4].'10:00:00.000+02:00">00</td><td time="'.$format_heur[4].'10:20:00.000+02:00">20</td><td time="'.$format_heur[4].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'11:00:00.000+02:00">00</td><td time="'.$format_heur[4].'11:20:00.000+02:00">20</td><td time="'.$format_heur[4].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'12:00:00.000+02:00">00</td><td time="'.$format_heur[4].'12:20:00.000+02:00">20</td><td time="'.$format_heur[4].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'13:00:00.000+02:00">00</td><td time="'.$format_heur[4].'13:20:00.000+02:00">20</td><td time="'.$format_heur[4].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[4].'16:00:00.000+02:00">00</td><td time="'.$format_heur[4].'16:20:00.000+02:00">20</td><td time="'.$format_heur[4].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'17:00:00.000+02:00">00</td><td time="'.$format_heur[4].'17:20:00.000+02:00">20</td><td time="'.$format_heur[4].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'18:00:00.000+02:00">00</td><td time="'.$format_heur[4].'18:20:00.000+02:00">20</td><td time="'.$format_heur[4].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[4].'19:00:00.000+02:00">00</td><td time="'.$format_heur[4].'19:20:00.000+02:00">20</td><td time="'.$format_heur[4].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[5].'</th><td time="'.$format_heur[5].'10:00:00.000+02:00">00</td><td time="'.$format_heur[5].'10:20:00.000+02:00">20</td><td time="'.$format_heur[5].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'11:00:00.000+02:00">00</td><td time="'.$format_heur[5].'11:20:00.000+02:00">20</td><td time="'.$format_heur[5].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'12:00:00.000+02:00">00</td><td time="'.$format_heur[5].'12:20:00.000+02:00">20</td><td time="'.$format_heur[5].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'13:00:00.000+02:00">00</td><td time="'.$format_heur[5].'13:20:00.000+02:00">20</td><td time="'.$format_heur[5].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[5].'16:00:00.000+02:00">00</td><td time="'.$format_heur[5].'16:20:00.000+02:00">20</td><td time="'.$format_heur[5].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'17:00:00.000+02:00">00</td><td time="'.$format_heur[5].'17:20:00.000+02:00">20</td><td time="'.$format_heur[5].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'18:00:00.000+02:00">00</td><td time="'.$format_heur[5].'18:20:00.000+02:00">20</td><td time="'.$format_heur[5].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[5].'19:00:00.000+02:00">00</td><td time="'.$format_heur[5].'19:20:00.000+02:00">20</td><td time="'.$format_heur[5].'19:40:00.000+02:00">40</td></tr><tr><th>'.$dateDuJour[6].'</th><td time="'.$format_heur[6].'10:00:00.000+02:00">00</td><td time="'.$format_heur[6].'10:20:00.000+02:00">20</td><td time="'.$format_heur[6].'10:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'11:00:00.000+02:00">00</td><td time="'.$format_heur[6].'11:20:00.000+02:00">20</td><td time="'.$format_heur[6].'11:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'12:00:00.000+02:00">00</td><td time="'.$format_heur[6].'12:20:00.000+02:00">20</td><td time="'.$format_heur[6].'12:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'13:00:00.000+02:00">00</td><td time="'.$format_heur[6].'13:20:00.000+02:00">20</td><td time="'.$format_heur[6].'13:40:00.000+02:00">40</td><th> </th><th>  </th><th>  </th><th>  </th><th> </th><th>  </th><th>  </th><th>  </th><th> </th><td time="'.$format_heur[6].'16:00:00.000+02:00">00</td><td time="'.$format_heur[6].'16:20:00.000+02:00">20</td><td time="'.$format_heur[6].'16:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'17:00:00.000+02:00">00</td><td time="'.$format_heur[6].'17:20:00.000+02:00">20</td><td time="'.$format_heur[6].'17:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'18:00:00.000+02:00">00</td><td time="'.$format_heur[6].'18:20:00.000+02:00">20</td><td time="'.$format_heur[6].'18:40:00.000+02:00">40</td><th> </th><td time="'.$format_heur[6].'19:00:00.000+02:00">00</td><td time="'.$format_heur[6].'19:20:00.000+02:00">20</td><td time="'.$format_heur[6].'19:40:00.000+02:00">40</td></tr>';

C'est un gag ??

Pourquoi tu ne fais pas générer ça dans la boucle ?
01/08/2011, 17h15
City-zen

Faire une boucle pour chaque jours me pose pas de problème.
Par heure non plus.
Mais gérer la ligne entière avec les cases vides, je vois pas comment mis prendre...

J'ai fais ça de la façon suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 for ($i=0; $i<8; $i++) { echo '<tr><th>'.$dateDuJour[$i].'</th>'; for ($j=10; $j<20; $j++) { if ($j==14 OR $j==15){ echo '<th>  </th><th>  </th><th>  </th><th> </th>'; } else{ for ($k=00; $k<80; $k=$k+20) { if ($k==60){ echo '<th> </th>'; } else { echo '<td time="'.$format_heur[$i].$j.':'.$k.':00.000+02:00">'.$k.'</td>'; } } } } echo '</tr>'; }
Je ne sais pas si c'est le plus propre possible.

Mais il y a un petit soucis concernant la variable $k qui doit avoir comme première valeur '00' et qui se simplifie en '0'.

Est-ce obligatoire de faire un if $k=0 $k='00' à l'intérieur de la boucle.