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. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-content/themes/bueno/includes/theme-comments.php:66 Stack trace: #0 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-content/themes/bueno/includes/theme-comments.php(20): the_commenter_link() #1 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-includes/class-walker-comment.php(174): custom_comment(Object(WP_Comment), Array, 1) #2 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-includes/class-wp-walker.php(145): Walker_Comment->start_el('', Object(WP_Comment), 1, Array) #3 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-includes/class-walker-comment.php(135): Walker->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #4 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-includes/class-wp-walker.php(370): Walker_Comment->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #5 /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-includes/comment-te in /home/users7/f/fki8658/www/WordPress/Paul.mouzet.com/wp-content/themes/bueno/includes/theme-comments.php on line 66