Aller au contenu
Télécharger Firefox 2

Afficher un calendrier, en PHP et CSS

Calendrier PHP/CSS mEga (mEga-Box), m'a inspiré pour ce petit billet dans lequel je vous propose un petit script pour générer un calendrier en PHP et le mettre en page en CSS.

Présentation

Dans mon exemple j'ai séparé le code en un fichier index principal et trois fichiers à inclure (string.inc.php, calendrier.inc, calendrier.css). Le calendrier généré ne contient pas de tableau mais une liste d'éléments.

string.inc.php contient des fonctions de gestion de chaines:

     // fonctions utiles, $valeur représente une date au format AAAA-MM-JJ
     function getSecond($valeur) {
          return substr($valeur, 17, 2);
     }

     function getMinute($valeur) {
          return substr($valeur, 14, 2);
     }

     function getHour($valeur) {
          return substr($valeur, 11, 2);
     }

     function getDay($valeur)     {
          return substr($valeur, 8, 2);
     }

     function getMonth($valeur)     {
          return substr($valeur, 5, 2);
     }

     function getYear($valeur) {
          return substr($valeur, 0, 4);
     }

     function monthNumToName($mois) {
          $tableau = Array("", "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Septembre", "Octobre", "Novembre", "Décembre");
          return (intval($mois) > 0 && intval($mois) < 13) ? $tableau[intval($mois)] : "Indéfini";
     }

calendrier.inc.php, contient le script générant le calendrier:

     // Fonction pour afficher le calendrier
     function showCalendar($periode) {
          $leCalendrier = "";
          // Tableau des valeurs possibles pour un numéro de jour dans la semaine
          $tableau = Array("0", "1", "2", "3", "4", "5", "6", "0");
          $nb_jour = Date("t", mktime(0, 0, 0, getMonth($periode), 1, getYear($periode)));
          $pas = 0;
          $indexe = 1;

          // Affichage du mois et de l'année
          $leCalendrier .= "\n\t<h2>&raquo; " . monthNumToName(getMonth($periode)) . " " . getYear($periode) . "</h2>";
          // Affichage des entêtes
          $leCalendrier .= "
          <ul id=\"libelle\">
               \t<li>L</li>
               \t<li>M</li>
               \t<li>M</li>
               \t<li>J</li>
               \t<li>V</li>
               \t<li>S</li>
               \t<li>D</li>
          </ul>";
          // Tant que l'on n'a pas affecté tous les jours du mois traité
          while ($pas < $nb_jour) {
               if ($indexe == 1) $leCalendrier .= "\n\t<ul class=\"ligne\">";
               // Si le jour calendrier == jour de la semaine en cours
               if (Date("w", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode))) == $tableau[$indexe]) {
                    // Si jour calendrier == aujourd'hui
                    $afficheJour = Date("j", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode)));
                    if (Date("Y-m-d", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode))) == Date("Y-m-d")) {
                         $class = " class=\"itemCurrentItem\"";
                    }
                    else {
                         // 1 est toujours vrai => on affiche un lien à chaque fois
                         // A vous de faire les tests nécessaire si vous gérer un agenda par exemple
                         if (1) {
                              $class = " class=\"itemExistingItem\"";
                              $afficheJour = "<a href=\"\">" . Date("j", mktime(0, 0, 0, getMonth($periode), 1 + $pas, getYear($periode))) . "</a>";
                         }
                         else {
                              $class = "";
                         }
                    }
                    // Ajout de la case avec la date
                    $leCalendrier .= "\n\t\t<li$class>$afficheJour</li>";
                    $pas++;
               }
               //
               else {
                    // Ajout d'une case vide
                    $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
               }
               if ($indexe == 7 && $pas < $nb_jour) { $leCalendrier .= "\n\t</ul>"; $indexe = 1;} else {$indexe++;}
          }
          // Ajustement du tableau
          for ($i = $indexe; $i <= 7; $i++) {
               $leCalendrier .= "\n\t\t<li>&nbsp;</li>";
          }
          $leCalendrier .= "\n\t</ul>\n";

          // Retour de la chaine contenant le Calendrier
          return $leCalendrier;
     }

Utilisation

Il suffit d'appeler la fonction showCalendar() en passant en paramètre le mois et l'année sous la forme YYYY-MM.
Pour le mois en cours:

     echo showCalendar(date("Y-m"));

Ne pas oublier

  • Pour voir la feuille de style, cliquez ici
  • Pour voir l'exemple, cliquez ici
  • La partie archive de ce blog affiche également un calendrier via cette technique. Voir Les archives.

Commentaires


[#1] Commentaire rédigé le Jeudi 20 Janvier 2005 à 15:04 par Olivier Cartagena

Salut Solo, c'est sympa ton calendrier, je vais voir si je l'inclus dans mon site, en tout cas ça me plaît bien, même si j'ai un peu de mal à le configurer (je suis un novice...). La gestion des dates visitées, c'est à partie de BDD? Moi, en tout cas je suis plongé dans le php, je ne sais pas si je réussirai un jour à écrire de vrais scripts (pour l'instant, j'en suis plus à en prendre par ci par là et à comprendre comment ça marche qu'autre chose...). En tout cas, merci à tous les webmasters comme toi pour essayer de nous aider, nous, les débutants, ça serait moins facile sans vous.

[#2] Commentaire rédigé le Jeudi 20 Janvier 2005 à 15:15 par solo

Bonjour Olivier, ce script ne sert effectivement qu'à afficher un calendrier. Si tu veux lui ajouter des fonctionnalités tu devras passer par une base de données MySQL par ex.

Bon courage dans ton apprentissage et n'hésites pas si tu as des soucis : http://dream.media-box.net

:D A bientôt.

[#3] Commentaire rédigé le Dimanche 13 Mars 2005 à 15:57 par Olivier Cartagena

Bonjour solo, c'est encore moi Olivier Cartagena. Excuses-moi de t'embêter, en fait je sais pas s'il faut que je poste sur le forum ou ici, c'est au sujet du calendrier. Les dates sont affichées comme liens, est ce possible de les afficher sans links? En effet, j'ai pas encore mis de fonctionnalités dessus (pour l'instant j'en suis incapable...) et si sur firefox et opera, quand on clique sur une des dates, la navigateur se charge de raffraichir la page, sur IE, ça m'envoie sur la page d'index... donc pas terrible comme effet et pour la navigation... j'espère mettre mon site en ligne dans très peu de temps, j'ai mis un lien sur ton site :-)

[#4] Commentaire rédigé le Dimanche 13 Mars 2005 à 21:09 par solo

Tu peux me joindre par mail si tu veux.

Envois moi le script dans l'état dans lequel tu l'utilises et je te le modifierai :)

[#5] Commentaire rédigé le Dimanche 20 Mars 2005 à 05:16 par Olivier

Salut solo... c'est quoi ton mail, je le trouve nulle part sur ton site?... j'ai mis mon site en ligne, y a pas mal de trucs à faire encore, c'est normal mais j'en suis content... :-) Pourras tu y jeter un coup d'oeil un jour où tu en auras le temps, ça me ferait très plaisir d'avoir ton avis, quel qu'il soit... www.pukanina.com
Olivier

[#6] Commentaire rédigé le Lundi 21 Mars 2005 à 09:03 par solo

Salut Olivier,

jvais te contacter via le mail de ton site :)

[#7] Commentaire rédigé le Mercredi 25 Mai 2005 à 14:54 par youte

Merci beaucoup pour ce billet solo. Sache que tu n'aura pas aidé qu'Olivier.
Je recherche ce genre de calendrier depuis un bout de temps mais à part des vieux exemples en javascript auquels je ne comprenais vraiment rien, c'était pas vraiment la joie...
Merci encore.

[#8] Commentaire rédigé le Jeudi 26 Mai 2005 à 10:34 par mere-teresa

Pile ce que je cherchais : un calendrier léger, simple à mettre en place, avec CSS externe et gestion des noms de mois (donc on peut l'enrichir d'autres langues).

Bref : la base !

[#9] Commentaire rédigé le Mardi 31 Mai 2005 à 19:05 par Olivier Sackhouse

Bravo! Simple, facile à comprendre, à modifier et très fonctionnel!

[#10] Commentaire rédigé le Vendredi 17 Juin 2005 à 10:51 par Rémi

Salut Solo,

Tout d'abord, merci pour ton calendrier que j'aimerais intégrer sur mon site. Cependant, comme je suis encore débutant:(, je n'arrive pas à l'adapter aux besoins de mon site. Peut-être que tu pourrais me donner un coup de main???
En fait, j'aimerais avoir la possibilité de passer d'un mois à l'autre via un formulaire comme tu le fais dans la ta page : http://www.sutekidane.net/labo/php/calendrier/inde... Le problème c'est que je n'arrive pas à avoir le "vrai" code source de cette page.
Et en plus, j'aimerais qu'il n'y ait pas de lien sur les dates antérieures à la date du jour.
Est-ce possible? Si oui, peux-tu me donner de l'aide?
Encore merci car sans des gens comme toi, les débutants resteraient débutants.
A bientot j'espère

[#11] Commentaire rédigé le Samedi 09 Juillet 2005 à 17:37 par antoine

bonjour
comme tu le dis j'ai inclus les 2 fichiers PHP et la feuille CSS par un link .... mais il y a des messages d'errur qui s'afichent : Warning: main(calendrier.inc): failed to open stream: No such file or directory in c:\documents and settings\antoine.portable\mes documents\test php\calendrier.php on line 3

Warning: main(): Failed opening 'calendrier.inc' for inclusion (include_path='.;C:/Program Files/EasyPHP1-8\php\pear\') in c:\documents and settings\antoine.portable\mes documents\test php\calendrier.php on line 3

ainsi que le contenu du premier fichier qui s'affiche
merci encore pour ce code qui est super

[#12] Commentaire rédigé le Mercredi 14 Septembre 2005 à 16:17 par Snid

Salut

j'ai réalisé un agenda perso online complet en php, si vous voulez voir ce que ca donne c'est ici: http://www.yemen.sup.fr


[#13] Commentaire rédigé le Vendredi 16 Septembre 2005 à 13:55 par pierre

Bonjour,
Tout d'abord, merci de partager ton savoir.
Je suis vraiment débutant, mais j'ai pu faire fonctionner ton calendrier. J'ai néanmoins dû rajouter 'list-style: none;' sur #libelle li et .ligne li.
J'aurais une question à te poser:
En glissant le pointeur de la souris sur une journée du calendrier, comment puis-je récupérer la valeur du jour concerné dans une variable ?
Merci d'avance,

[#14] Commentaire rédigé le Vendredi 16 Septembre 2005 à 14:16 par solo

Bonjour Pierre,

je te conseille de poser ta question sur http://dream.media-box.net ou http://forum.alsacreations.com

On se fera un plaisir de répondre à ta question :)

[#15] Commentaire rédigé le Samedi 24 Septembre 2005 à 12:35 par Anthony

Bonjour c'est exactement ce que je cherchais un calendrier tout modifiable lol. Mais euh... Quelquun pourrait maider pour linclure dans mon site svp? jai de gros pb avec le php

[#16] Commentaire rédigé le Samedi 18 Février 2006 à 17:04 par Winny

Bonjour à tous,

ben oui encore un novice qui aimerais utiliser ce Script... ::lol j'aimerais utiliser ceci dans mon site également, problème c'est que le code s'affiche et non le calendrier c'est marrant mais je ne vois pas ce que j'ai raté :o. est il possible de me transférer ou de m'expliquer un chti peu?

merci beaucoup!

[#17] Commentaire rédigé le Mercredi 22 Février 2006 à 17:01 par Grégoire

Il faut que le code soit compris entre "<?php" et "?>" pour qu'il soit interprété comme du PHP (sans les guillemets). Sinon c'est envoyé au client directement, comme du HTML statique.

[#18] Commentaire rédigé le Jeudi 23 Février 2006 à 17:51 par Viper82

euh... ouaip bien bien sympa ce ptit script, enfin j'ai surtout regarder la démo, est c pile poil sk'il me faut, chuis en train de mettre en place un blog perso, simili dot clear en terme de présentation, mais complètement codé par moi, et j'avoue, j'ai pas trop envie d'avoir a me faire chier a coder le calendrier...

donc ce sript m'as l'air bien...

Si, je ne sais pas si le bug est connu... mon site meurt avant 2038 car a partir de janvier 2038 le script bug.... c louche, j'ai pas vraiment essxayer de voir si je trouvais une solution, mais si vous pouviez m'en dire un peu plus, je me met un ptit signé sur cette page, si l'auteur, pouvais me contacter par mail pour m'en dire un peu plus long ??

ce serais très très sympa :)

[#19] Commentaire rédigé le Samedi 11 Mars 2006 à 11:02 par Viper82

Merci pour ce tit script, je vient de l'intégrer sur mon Blog,

L'utilisation de list est vraiment optimale pour la validation W3C :) c super!!

petit commentaire... j'ai ajouté une limitation sur la date...

SI année supérieur à 2037 alors on n'affiche pas le bouton pour aller a une date supérieur... ca evite le bug car date() en php ne va pas plus loin que le 19/01/2038 voila voila :p

mais merci bcp!!

[#20] Commentaire rédigé le Samedi 11 Mars 2006 à 19:21 par Picsou

Limité à 2038 ?
Serait ce une prémonition :p

[#21] Commentaire rédigé le Samedi 25 Mars 2006 à 12:57 par dani

ça marche pas !:|

[#22] Commentaire rédigé le Vendredi 31 Mars 2006 à 12:20 par Viper82

mais, si, ca marche très bien :)

pour l'histoire de date, c'est la fonction php Date() qui se termine en 2038.... Youpi :)

[#23] Commentaire rédigé le Jeudi 27 Avril 2006 à 23:25 par Manu

Salut!

J'ai essayé de reprendre ton script car il me paraissait très intéressant mais impossible d'afficher quoi que ce soit.
Je dois m'être trompé en incluant les différents fichiers mais pourtant je ne vois pas où... :|
Pourrais-tu être un peu plus précis concernant cette inclusion stp?
Merci beaucoup

[#24] Commentaire rédigé le Jeudi 11 Mai 2006 à 08:17 par madjid

je dois developer un calendrier en php avec possibilité d'éffectuer des réservations avec le jou en cour surligné quand on clique sur une lien ne page s'ouvre etl'on peut sélectionner les horraires de réservation, il faut que la personne entre sont nom rénomemail numéro de tel.
pourriez vous m'aidez.
Cordialement

[#25] Commentaire rédigé le Lundi 15 Mai 2006 à 19:53 par Viper82

Je pense que le script est relativement bien fait... et l'optimisation du truc n'est pas franchement compliquée....

a toi de jouer ;-)

L'ajout de commentaire a été désactivé pour ce billet.

Trackbacks

Pisteurs vers ce billet (trackbacks entrant)

Il n'y a pas encore de pisteurs pour ce billet.

Pistés par ce billet (trackbacks sortant)

Il n'y a pas encore de pisteurs effectué par ce billet.


A propos du billet

Avatar de Thanh

Raccourcis

Rechercher un billet

Sous Rubriques

Photo Pif

Photopif