Discussion :

[laurentSc]

Bonjour,

je tente d'utiliser le calendrier qui était présenté ici. Par contre, évidemment, je souhaite le modifier et l'un de mes besoins est d'afficher tous les jours du mois (ainsi que les quelques jours du mois précédent et du mois suivant) sur une seule ligne sachant que je souhaite le présenter pour toute une liste de personnes (dont les noms s'afficheront en première colonne) et que donc sur chaque ligne, je voudrais faire apparaître le mois entier.
Voici ce que je voudrais :

Je mets ici le code html et le css correspondant du calendrier récupéré (code source affiché car au départ, c'est du PHP) :

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
 <p class="calendar-head">July&nbsp;2015</p>    <ul class="calendar-line calendar-week">
		<li>LU</li>
		<li>MA</li>
		<li>ME</li>
		<li>JE</li>
		<li>VE</li>
		<li>SA</li>
		<li>DI</li>
	</ul>    <ul class="calendar-line">
        <li class="calendar-ext-day">29</li>
        <li class="calendar-ext-day">30</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul class="calendar-line">
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    <ul class="calendar-line">
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
    <ul class="calendar-line">
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
    </ul>
    <ul class="calendar-line">
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li class="calendar-ext-day">1</li>
        <li class="calendar-ext-day">2</li>
        <li class="calendar-ext-day">3</li>
        <li class="calendar-ext-day">4</li>
        <li class="calendar-ext-day">5</li>
        <li class="calendar-ext-day">6</li>
        <li class="calendar-ext-day">7</li>
        <li class="calendar-ext-day">8</li>
        <li class="calendar-ext-day">9</li>
    </ul>

Code css :

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
.calendar-line
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	clear: both;
}
 
.calendar-line li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 30px;
	float: left;
	text-align: center;
}
 
.calendar-week li
{
	background-color: #60B0D7;
	color: #FFF;
}
 
.calendar-ext-day
{
	color: #CCC;
}

Je n'ai pas fait beaucoup d'essais ne sachant pas quoi toucher...

[Invité]

Bonjour,

Qui dit affichage tabulaire dit <table>.

Donc, commence par construire le code HTLM correspondant.

[laurentSc]

J'ai imaginé une conception qui construit une table html mais avec du PHP :

Pour un mois donné :
liste des membres : table $liste_membre
déterminer combien de jours du mois précédent à afficher et combien de jours du mois suivant
déterminer le jour de la semaine (lundi à dimanche) auquel correspond le premier jour à afficher

Code php :

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

1
2
3
4
5
6
7
8
9
10
 
<table>
 
<?php // ligne des jours de la semaine
$num = count($liste_membre);
for ($i = 0; $i < $num; $i++) {
?>
<tr><td><span><?php echo $liste_membre[$i];?></span></td><?php for ($j=0;$j<$nbjours;$j++) { ?><td><span><?php echo $day[$j];?></span></td><?php } ?></tr>
<?php } ?>
</table>

[laurentSc]

Mon idée afin de modifier le moins possible le code existant serait de construire un tableau html avec cette structure :

Code html :

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

1
2
3
4
5
6
 
<table>
<tr><td>Membre 1</td><td>calendrier sur une seule ligne</td></tr>
<tr><td>Membre 2</td><td>calendrier sur une seule ligne</td></tr>
...
</table>

Si c'est possible, la liste des membres s'obtiendra par une requête SQL et l'affichage du calendrier devrait être possible avec le code actuel en le modifiant juste pour que tout tienne en une seule ligne. J'ai donc essayé de modifier le code pour qu'il ne s'affiche que sur une seule ligne ; selon moi, cette gestion est faite par ce code :

Code php :

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

1
2
3
4
5
6
		// Test s'il faut une nouvelle ligne ou pas
		if ($newLine % 7 == 0)
		{
			echo '    </ul>'."\n".'    <ul class="calendar-line">'."\n";
			$countLine++;
		}

et que donc si je remplace % 7 par %31 (ou plus), ça va le faire, sauf que ça ne change rien. Suis-je sur la bonne voie ? Et si oui, où est-ce que je me trompe ?

[Invité]

Bonjour,

1/ il faut purement et simplement supprimer :

Code php :

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

1
2
3
4
5
6
		// Test s'il faut une nouvelle ligne ou pas
		if ($newLine % 7 == 0)
		{
			echo '    </ul>'."\n".'    <ul class="calendar-line">'."\n";
			$countLine++;
		}

2/ 1 membre <--> 1 calendrier :
Il faudra penser à identifier chaque ligne (et cases des calendriers) en fonction de chaque id_membre.

[laurentSc]

Tu as raison pour le point 1 (il faut le faire), mais ça ne suffit pas car si on ne fait que ça, ça ne change rien ; j'ai pensé qu'il y avait peut-être en plus du CSS à modifier et j'ai tout de suite trouvé quoi : l'identifiant "calendar" avait une largeur (width: 210px;) et il faut aussi la virer et c'est justement l'identifiant du div qui contient le calendrier...

et concernant le point 2, j'ai déjà une table "users" avec un champ "id_user", donc dans la table calendar_event du script

Code sql :

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

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS `calendar_event` (
  `event_id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
  `event_date` date NOT NULL,
  `event_time` time NOT NULL,
  `event_name` varchar(100) COLLATE utf8_bin NOT NULL,
  `event_text` text COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`event_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=12 ;

je pense rajouter un champ "id_user" ; comme ça les événements seront liés à une personne :

Code php :

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

1
2
3
4
5
	$sql = '
		SELECT event_date, event_time, event_name, event_text
		FROM calendar_event
		WHERE event_date = :date and id_user=:id_user
	';

j'essaie cela et je dis si ça marche...

[Invité]

Fais simple : commence avec un seul id_user.

[laurentSc]

Je ne saisis pas bien : un seul id_user, donc probablement celui de la table users, mais pour que les calendriers soient nominatifs, ne fait-il pas en mettre un dans la table calendar-event ?

[Invité]

Je voulais dire :

1/ essaie déjà d'afficher une ligne de calendrier pour 1 utilisateur, avec son id_user et ses événements à lui.

Ensuite, lister toutes les lignes est simple (ça tu sais faire).


2/ Comme tu l'as compris, il faut en effet ajouter un champ id_user dans la table calendar_event.

[laurentSc]

Bon, j'ai directement mis plusieurs users, mais chacun a son calendrier sur une seule ligne avec ses propres événements !

Il me reste des problèmes, mais c'est hors sujet, donc si besoin, une autre discussion.

Code php :

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

1
2
3
4
5
6
7
8
9
 
	$sql="SELECT prenom,nom,id_user FROM user";
	$qid=$bdd->query($sql)
	echo "<table>";
	while ($members=$qid->fetch(PDO::FETCH_ASSOC)) {
		// Récupère les jour où il y a des évènements
		$event = getEventsDate($_month, $_year,$members['id_user']);
		echo '<tr><td><div class="width_half">'.$members['prenom']." ".$members['nom']."</div></td><td>";
                etc // affichage du calendrier