22 juin 2007 - Modifier le Calendrier
lors le calendrier est paramétrable en CSS.
on peut modifier sa présentation, changer les jours, afficher la date du jour et y mettre un fond, tout cela paramétrable directement par CSS, et cerise sur le gâteau, ajouter des images en entête, qui se changent toutes les 7 secondes.
Pour les besoins de l'exemple, j'ai donc créé un fond pour le calendrier (200*300 pixels) et deux images (190*110Pixels).
|
|
Le code: -il se décompose en trois parties:
Une première partie à mettre dans le <head> </head>
Une autre partie après le bloc d'affichage du calendrier
Et enfin une dernière grosse partie dans le CSS
Et commençons, par le CSS, car c'est en fait le plus important
nous avons:
#cadrecalendar qui définit la taille de l'encadrement du calendrier et le fond (N'en pas tenir compte si on ne veut pas de fond)
#imagecalendrier qui permet d'afficher les image en entête du calendrier (N'en pas tenir compte si on ne veut pas d'image)
.jourdicalendar, .jourlucalendar... .joursacalendar qui définissent les 7 jours. (N'en pas tenir compte si on ne veut pas de jours personalisés)
.circlecalendar qui permet de diférencier le jour courant sur le calendrier. (N'en pas tenir compte si on ne veut pas différencier le jour présent )
donc ce code est à recopier dans la feuille de style général, (et si on veut rester cohérent, avant ou après le #calendar, c'est plus facile de tout regrouper)
ensuite le CSS pour le calendrier étant défini...
passons à la déclaration des images (ici la variable imageducalendar) (Ne pas tenir compte si on ne veut pas d'image)
et chargeons le fichier javascript ----.js qui s'occupe de tout mettre en forme.
-Tout cela (le script en entier) est à mettre dans les pages avant </head>
Nota: le script et son fichier *****.js est le seul qui doit toujours être présent dans <head></head>
Maintenant, la partie qui change tout: à insérer juste après les commandes de bloc du calendrier
<CBCalendar><$BlogCalendar$></CBCalendar>
Sur la page d'accueil
Sur les autres pages
afficher_jours("calendar","v") ou afficher_mois("calendar","p") permettent de changer le calendrier et accepte des arguments:
(seul "calendar" n'est pas à modifier)
"" laisse en l'état (équivaut à ne rien faire)
"v" n'affiche que le style (permet de n'afficher que des images définies dans les styles .jourdicalendar...)
"p" affiche les jour (Dim Lun Mar Mer Jeu Ven Sam) avec un fond dans le style défini
"u" Affiche l'initiale (D L M m J V S D) avec un fond dans le style défini.
AfficherImagesCalendar() affiche les images définies dans la variable "imageducalendar" selon un cycle de 7 secondes
(Evidemment, ne pas mettre les commandes des choses que l'on ne veut pas)
donc....
en partant d'un calendrier standard comme
celui-ci en ajoutant dans la feuille de style le code
dans l'entête
et le code javaScript sous les blocs de calendrier
on se retrouve (magique) avec un calendar dans ce genre..
puis
voili, voilà, j'espère qu'il n'est pas trop compliqué.
NB: du 06/09/2007, mon moteur remplace également en date du jour tous les 1..9 des dizaines également... pb que je vais tâcher de régler. dès que j'en ai le temps...