Sélectionner une page

Nous allons apprendre à créer un calendrier dynamique. il vous permettra d’afficher dès son exécution le mois en cours et d’identifier la date du jour. Vous avez aussi la possibilité de consulter toutes les dates possible grâce aux fonctions suivant et précédant.

Pour commencer, vous aurez d’abord besoin d’avoir les outils suivants qui sont disponible en téléchargement :

installez les sur votre ordinateur et commencez par exécuter easyphp. Ouvrez ensuite l’éditeur de texte « Notepad++ ».. Nous n’allons pas trop nous attarder sur la façon d’utiliser le easyphp.

ETAPE 1 : DÉFINITION DES VARIABLES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php

$year = date("Y");
if(!isset($_GET['month'])) $monthnb = date("n");
else {
$monthnb = $_GET['month'];
$year = $_GET['year'];
if($monthnb <= 0) {
$monthnb = 12;
$year = $year - 1;
}
elseif($monthnb > 12) {
$monthnb = 1;
$year = $year + 1;
}
}
$day = date("w");
$nbdays = date("t", mktime(0,0,0,$monthnb,1,$year));
$firstday = date("w",mktime(0,0,0,$monthnb,1,$year));

ETAPE 2: TRADUCTION DES JOURS EN FRANÇAIS

1
2
3
4
5
6
7
$daytab[1] = 'Lu';
$daytab[2] = 'Ma';
$daytab[3] = 'Me';
$daytab[4] = 'Je';
$daytab[5] = 'Ve';
$daytab[6] = 'Sa';
$daytab[7] = 'Di';

ETAPE 3: INITIALISATION DE LA TABLE DU CALENDRIER

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$calendar = array();

$z = (int)$firstday;
if($z == 0) $z =7;
for($i = 1; $i <= ($nbdays/5); $i++){
for($j = 1; $j <= 7 && $j-$z+1+(($i*7)-7) <= $nbdays; $j++){
if($j < $z && ($j-$z+1+(($i*7)-7)) <= 0){
$calendar[$i][$j] = null;
}
else {
$calendar[$i][$j] = $j-$z+1+(($i*7)-7);
}
}
}

ETAPE 4: TRADUCTION DES MOIS EN FRANCAIS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
switch($monthnb) {
case 1: $month = 'Janvier'; break;
case 2: $month = 'Fevrier'; break;
case 3: $month = 'Mars'; break;
case 4: $month = 'Avril'; break;
case 5: $month = 'Mai'; break;
case 6: $month = 'Juin'; break;
case 7: $month = 'Juillet'; break;
case 8: $month = 'Août'; break;
case 9: $month = 'Septembre'; break;
case 10: $month = 'Octobre'; break;
case 11: $month = 'Novembre'; break;
case 12: $month = 'D&eacute;cembre'; break;
}
?>

 

 

ETAPE 5: LE CALENDRIER LUI MÊME!!!

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
<div id="calendrierMain">

<div id="TopCalendrier">
<span class="linkcal"><a href="index.php?item=<?php echo $item;?>&month=<?php echo $monthnb - 1; ?>&year=<?php echo $year; ?>"> << </a></span>
<span class="headcal"><?php echo($month.' '.$year); ?></span>
<span class="linkcal"><a href="index.php?item=<?php echo $item;?>&month=<?php echo $monthnb + 1; ?>&year=<?php echo $year; ?>"> >> </a></span>
</div>
<?php
echo('<div id="JCalendrier">');
for($i = 1; $i <= 7; $i++){
echo('<div id="JCalContenu">'.$daytab[$i].'</div>');
}
echo('</div>');
for($i = 1; $i <= count($calendar); $i++) {
echo('<div class="LigneJour">');
for($j = 1; $j <= 7 && $j-$z+1+(($i*7)-7) <= $nbdays; $j++){
if($j-$z+1+(($i*7)-7) == date("j") && $monthnb == date("n") && $year == date("Y"))
echo('<div class="currentday"><a href="#">'.$calendar[$i][$j].'</a></div>');
else{
if ( $calendar[$i][$j] == "" ) {
echo ('<div class="jourVide"></div>');
}
else{
$jour = $calendar[$i][$j];
$datecomplete = $year."-".$monthnb."-".$jour;

echo ('<div class="otherDay">'.$calendar[$i][$j].'</div>');

}
}
}
echo('</div>');
}
?>

</div>

Maintenant que notre script php/html est prêt, il ne reste plus qu’a y ajouter un peu de décor avec du CSS.

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
#calendrierMain{
border:1px solid #4e637a;
width:203px;
}
#TopCalendrier{
text-align:center;
background:#000000;
height:25px;
padding-top:5px;
font-weight:bold;
width:203px;
}
#JCalendrier{
background-color:#6c6a6a;
overflow:hidden;
font-weight:bold;
width:203px;}

#JCalContenu{
width:29px;
text-align:center;
float:left;}

.LigneJour{
background-color:#ffffff;
overflow:hidden;
text-align:center;
width:203px;}
.jourVide{
border:1px solid transparent;
width:27px;
float:left;
}
.linkcal a{
color: #FFFFFF;
}
.headcal {
color: #FFFFFF;
}
.currentday{
width:25px;
height:24px;
float:left;
background:#ffffff url('../images/icones/datejour.png') no-repeat;
}
.currentday a{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
.otherDay{
background-color: #ffffff ;
width:29px;
height:25px;
float:left;
font-size:18px;
color:#000000;
}
Code source complet