Calendrier en Javascript

28 Août

Une fois n’est pas coutume et puisqu’en ce moment, ce n’est pas le grand débordement niveau projet et niveau inspiration pour ce blog, voici un site fort fort utile pour tout ceux qui voudraient afficher un calendrier javascript sur leur site.

Très simple d’utilisation, entièrement « personnalisable » aussi bien d’un point de vue style (css) que fonctionnel (de nombreux paramètres sont disponibles)

Et puisque le mieux en général reste de donner un exemple, voici un exemple de ce que ça peut donner.

Et pour l’utiliser c’est très simple, télécharger le fichier javascript ici, il suffira juste que vous l’insériez dans votre page de façon on ne peut plus classique :

<script src=« url_du_fichier_javascript »></script>

Ensuite, il faut (et il suffit) d’insérer un peu de javascript dans vos pages… comme ceci :

Dans un premier temps, vous « initialisez » votre calendrier (et lui spécifier l’id d’un div si besoin (cf ci-dessous ) :

# Javascript
var calendrierSympathique = new CalendarPopup('calendrierMasque');
// Définition du jour de départ du calendrier (Lundi : 1 / Dimanche : 0) [defaut : 0]
calendrierSympathique.setWeekStartDay(1);
// Pour faire un calendrier DropDown (qui ne s'ouvre pas dans une nouvelle fenêtre)
calendrierSympathique.showNavigationDropdowns();
// Le texte utilisé pour Aujourd'hui [defaut : "Today"]
calendrierSympathique.setTodayText("Aujourd'hui");
// Les préfixes des jours de la semaine [Defaut : en anglais]
calendrierSympathique.setDayHeaders("D","L","M","M","J","V","S");
// Les noms des mois [Defaut : en anglais]
calendrierSympathique.setMonthNames("Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre");

Pour finir, vous n’avez plus qu’à appeler votre petit calendrier et à l’afficher et à l’utiliser où bon vous semble !

<div id= »calendrierMasque » style= »position:absolute;visibility:hidden;background-color:#efefef;layer-background-color:#efefef; » name= »calendrierMasque »></div>
<a href= »# » onclick= »calendrierSympathique.select(getElementById(‘date_publication’),’anchordate’,’dd/MM/yyyy’); return false; » name= »anchordate » id= »anchordate »>Voir le calendrier</a>

Et puis bon, comme je suis pas un méchant, je vais citer quand même le créateur de ce chouette calendrier : Matt Kruse (thanks a lot) : http://www.mattkruse.com/javascript/calendarpopup/index.html
Vous y trouverez tout les paramétrages disponibles et de nombreux examples ici : http://www.mattkruse.com/javascript/calendarpopup/


9 Réponses pour “Calendrier en Javascript”

  1. Monique 26 mars 2009 à 22:13 #

    Merci de votre aide !

  2. Francois 12 octobre 2009 à 12:04 #

    Bonjour,

    Merci beaucoup pour ce code

    Mais il y a cependant un léger soucis : dès lors qu’on essaie de changer le mois ou l’année, le calendrier se referme, sans avoir la possibilité de la changer.

    Si vous aviez une solution pour tout ça.. ce serait parfait !!

    Merci !

  3. admin 12 octobre 2009 à 12:17 #

    Bonjour,
    effectivement, j’ai ce genre de problème aussi… (mais sous Firefox uniquement d’ailleurs).

    Pour ma part, j’ai contourné le problème en attendant de trouver mieux :

    J’ai viré le « calendrierSympathique.showNavigationDropdowns(); » pour me contenter d’un calendrier2.showYearNavigation();

    (la navigation des mois et des années se fait via des flèches et non plus via une liste déroulante…

    Je vais essayer de chercher une autre solution/raison au problème.

  4. Francois 12 octobre 2009 à 14:08 #

    Re bonjour,

    Merci beaucoup pour votre réponse, je vais essayer de regarder tout ça..
    Il y a quand même des choses qui m’échappent… impossible de mettre en marche le calendrier de Matt Kruse..
    M’enfin, merci beaucoup pour votre coup de main !

    Une rapide question cependant, savez vous où il serait possible de modifier les couleurs etc de ce calendrier ?

    Merci beaucoup,

    François

  5. admin 12 octobre 2009 à 14:36 #

    Pour les couleurs etc, il suffit de modifier le fichier css http://paul.mouzet.com/wp-content/uploads/2008/08/calendrier.css
    et de l’inclure.

    Quand vous dites « impossible de mettre en marche le calendrier de Matt Kruse. » ? Qu’entendez vous par là ?

  6. Francois 12 octobre 2009 à 14:48 #

    Merci en tous cas pour tout le soin que vous prenez pour me répondre !

    Merci pour la css du calendrier, par contre, je ne vois pas où celle-ci est déclarée dans le code 🙁 Du coup, elle n’entre pas en compte.
    J’ai bien modifié la ligne suivante pour modifier un peu l’aspect global..
    (div id=”calendrierMasque” style=”position:absolute;visibility:hidden;background-color:#efefef;layer-background-color:#efefef;”)

    Pour ce qui est du calendrier de Matt Kruse, j’ai beau faire tests sur test, impossible de le faire fonctionner, tout simplement, bien qu’en suivant scrupuleusement les indications.. (ceci est pour un site de réservation en ligne, j’aurai souhaité des perfectionnements du type début/fin de la réservation, réservation possible que le samedi, etc. choses proposées par ce code..)

  7. Francois 12 octobre 2009 à 14:50 #

    Pour info, si le problème vous intéresse, la page en question se trouve ici :

    http://www.tignes-location.com/F/location-pre-reservation.php

  8. admin 12 octobre 2009 à 15:33 #
    Je n’ai effectivement pas « mis le code » dans l’article.

    Voila où est déclaré le fichier css…

    Il suffit de modifier dedans je pense.

    Pour le reste, c’est bien normal que je réponde. Et puis c’est suffisament rare qu’on s’intéresse à mon modeste blog.

    Bref, pour la liste déroulante des mois et des années, le bug semble avoir été corrigé.
    Je vous invite à re-télécharger le fichier javascript. Normalement cela corrigera le problème.

    Pour autoriser des réservations « que le samedi », il faudra rajouter un petit : calendrierSympathique.setDisabledWeekDays(0,1,2,3,4,6);

    Et donc pour le date-debut/date-fin : http://paul.mouzet.com/wp-content/uploads/2008/08/test.html Voila un exemple.

    Il faudra penser à bien vérifier que la date de départ est bien supérieur à la date d’arrivée…

  9. Francois 12 octobre 2009 à 15:50 #

    Cool cool, merci beaucoup !
    Comme vous l’avez bien deviné, je suis si mauvais en javascript, et programmation tout court !
    Je n’ai pas encore capté où se déclarait le css calendrier.css, mais c’est très bien comme ça pour le moment, ça marche, c’est visible, c’est le principal pour mon client je pense !
    Pour la date supérieure et inférieure, normalement le test est fait, je vais vérifier, et si non le mettre, c’est vrai.
    Merci beaucoup en tous cas !

    je vais aller faire un petit tour ailleur sur votre blog, maintenant que j’ai le temps… 🙂

    Bonne fin de journée et merci beaucoup

    Fançois

Faire un commentaire

*