Ajouter un calendrier

obtenir ces boutons

Ajouter un calendrier sur un blog





On peut ajouter un calendrier avec les jours fériés et les numéros de semaine, dans une des colonnes d'un blog. Toutes les couleurs et présentations peuvent être adaptées facilement par chacun.

Le calendrier proposé présente 7 avantages :
- les semaines commencent le lundi, et pas le dimanche (comme aux États-Unis) ;
- la présentation des jours de week-end est différente ;
- le numéro de la semaine figure à droite : 52 ou 53 semaines par an (53 en 2015) ;
- les jours fériés sont affichés en rouge et identifiés en passant le curseur de la souris au-dessus ;
- toute la présentation et les couleurs peuvent être modifiées dans la première partie du code ;
- le calendrier existe en français ;
- le calendrier n'ajoute pas de publicité sur le blog.

Le code nécessaire figure plus loin sur cette page.

* * * * *

On peut aussi ajouter dans chaque blog une page contenant un "Calendrier perpétuel" qui affiche le calendrier pour l'année en cours ou TOUTES les années à partir de 1583 (année d'instauration du calendrier grégorien).

Cette page fera partie intégrante du blog et est disponible en plusieurs couleurs assorties à la plupart des blogs.

La manière de procéder est expliquée sur cette page.

* * * * *
Pour ajouter un calendrier avec les jours fériés et les numéros de semaine, dans une des colonnes d'un blog, il suffit d'ajouter le code suivant dans un gadget HTML/Javascript :
<div style="margin-top:10px;margin-left:10px;">
<style type="text/css">
.mois {
background-color:#7C8B9B;
color:white;
}
.joursdelasemaine,.joursdelasemainelundi {
background-color:#7C8B9B;
color:white;
width:12px;
}
.jours,.jourscolonne1 {
background-color: #DAE9F8;
color:black;
}
.jourswe {
background-color: #C7DAED;
color:black;
}
.datedujour{
background-color: red;
color:white;
font-weight : bold;
}

.calendrier {width:185px;border:1px black solid;line-height:15px;}
.mois {
font:bold 13px verdana;
padding: 3px 2px;
border:1px white solid;
border-bottom:none;
}
.joursdelasemaine,.joursdelasemainelundi {
font:11px verdana;
padding: 1px 2px 2px 2px;
border:1px white solid;
border-left:none;
}

.jours,.jourscolonne1,.jourswe, .datedujour {
font-size: 11px;
font-family:arial;
padding: 0px 5px;
height:16px;
border:1px white solid;
border-top:none;
border-left:none;
}
.joursdelasemainelundi, .jourscolonne1 {
border-left:1px white solid;
}
</style>
<script src='https://sites.google.com/site/rvdmarcrailcatrain/home/calendrier.js' type='text/javascript'/>
</script>
<script type="text/javascript">
var jourencours=new Date()
var moisencours=jourencours.getMonth()+1
var anneeencours=jourencours.getFullYear()
document.write(creationcalendrier(moisencours ,anneeencours, "calendrier", "mois", "joursdelasemaine", "jours", "jourswe", 0,"datedujour","jourscolonne1","joursdelasemainelundi"));</script>
</div>
<div style="clear:both;margin-left:58px;font-size:13px;">
<a href="http://calendrier2000.blogspot.com/" target="_blank">Toute l'année</a></div>

Si on veut en plus, comme ci-dessus, ajouter le calendrier du mois suivant, il suffit d'ajouter le code suivant :

<div style="clear:both;margin-top:3px;margin-left:10px;">
<script type="text/javascript">
var jourencours=new Date();
var moisencours=jourencours.getMonth()+2;
var anneeencours=jourencours.getFullYear();
if (moisencours==13){moisencours=1;anneeencours=anneeencours+1};
document.write(creationcalendrier(moisencours ,anneeencours, "calendrier", "mois", "joursdelasemaine", "jours", "jourswe", 0,"datedujour","jourscolonne1","joursdelasemainelundi"));
</script></div>
<div style="clear:both;">
</div>

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog

* * * * *
Toute la présentation et les couleurs peuvent être modifiées dans la première partie du code.

Une version verte du calendrier peut être visualisée ici.

Une version blanche du calendrier peut être visualisée ici.

Une version brune du calendrier peut être visualisée ici.

D'autres exemples seront présentés prochainement.

* * * * *
CALENDRIER BELGE

Pour afficher un calendrier avec les jours fériés belges, il suffit, dans le code, de remplacer :
https://sites.google.com/site/rvdmarcrailcatrain/home/calendrier.js
par:
https://sites.google.com/site/rvdmarcrailcatrain/home/calendrier-belge.js

* * * * *
On peut aussi, comme sur ce site (dans la colonne de gauche), ajouter un lien "Calendrier du mois" qui donne accès aux calendriers du mois en cours et du suivant, en ajoutant au blog un gadget HTML/JavaScript.


Le code nécessaire est le suivant :
<center><a href="javascript:void(0)" alt="france info" title="" onclick="window.open('http://infos-blogger.blogspot.be/2011/12/calendriers.html','','top=300,left=0,width=210,height=330,scrollbars=no');">Calendrier du mois</a></center>
</script>


Rappel : comment ajouter un gadget HTML/JavaScript sur un blog

5 commentaires:

Albadeva a dit…

Bonjour.
J´ai inséré un calendrier google dans un gadget et tout fonctionne bien sauf la fenêtre émergente des événement introduit que je n´arrive pas a dimensionner correctement.
En live avec 'firebug' cela marche mais je ne sais pas ou mettre le code dans le template.
Merci pour toute aide apportée.
Pat.

Albadeva a dit…
Ce commentaire a été supprimé par l'auteur.
Meiser a dit…

Bonjour.
Je n'utilise pas ce calendrier-là. Il suffit de poser la question dans le forum blogger pour trouver un autre utilisateur.


Albadeva a dit…

Merci quand même pour votre travail formidable, votre site est une mine d´or.
Pat.

Théo B a dit…

Bonjour, j'aimerais savoir comment ajouter un calendrier blanc s'il vous plait