Le calendrier intégrable est un petit widget en javascript dont vous pouvez personnaliser l'apparence avec une feuille de style pour qu'il s'intègre parfaitement au design de votre site.
DémoVoici un exemple d'intégration très simple :
ajax_calendar/demo_fr.htmlCe widget ne fait appel qu'à des fonctions très basiques, il est compatible avec tous les navigateurs.
Intégration du calendrierDans la partie
<head>, ajoutez la feuille de style :
- Code: Tout sélectionner
<link href="http://www.warcraftpeople.com/ajax_calendar/calendar.css" rel="stylesheet" type="text/css" />
Vous pourrez par la suite personnaliser l'apparence du calendrier pour qu'il s'adapte parfaitement au design de votre site en surchargeant les règles de cette feuille de style. Vous pouvez aussi la télécharger puis la modifier.
Dans la partie
<body>, ajoutez le code suivant à l'endroit précis où vous voulez insérer le calendrier :
- Code: Tout sélectionner
<div id="myWoWCalendar" class="WoWECalendar"></div>
Enfin, il ne reste plus qu'à insérer le code Javascript. Il est vivement recommandé de le mettre tout à la fin de votre page, juste
avant la balise fermante </body> pour éviter que ce dernier ne bloque l'affichage de votre page pendant son chargement.
- Code: Tout sélectionner
<script type="text/javascript" src="http://www.warcraftpeople.com/ajax_calendar/calendar.js"></script>
<script type="text/javascript">
var wowCalendar = new WoWEventsCalendar('myWoWCalendar', {lang: 'fr', timezone: 'Europe/Paris', tooltipAnchor: 'left'});
</script>
Le premier paramètre du constructeur est l'attribut id du <div> de votre calendar. Le second paramètre est un hashtable acceptant 3 paramètres, tous optionnels :
- lang : La langue dans laquelle le calendrier est affiché. Les valeurs acceptées sont 'fr' (Français, par défaut) et 'en' (Anglais)
- timezone : Il s'agit du fuseau horaire à utiliser pour l'affichage des horaires. Par défaut, c'est celui de Paris ('Europe/Paris') qui est utilisé.
- tooltipAnchor : Point d'ancrage des tooltips. Valeurs acceptées : 'left' ou 'right'. Si votre calendrier est placé du côté gauche de la page, mettez 'left', 'right' s'il est placé à droite.
PersonnalisationVoici la liste conseillée des règles CSS à surcharger pour changer la couleur des liens :
- Jour du mois en cours sans évènement : div.WoWECalendar table td div.day a
- Jour du mois en cours avec évènement : div.WoWECalendar table td.event div.day a
- Jour du mois suivant/précédent : div.WoWECalendar table td.otherMonth div.day a
- Aujourd'hui : div.WoWECalendar table td.today div.day a
- Mois précédent/suivant : div.WoWECalendar .nav a
- Lien du footer : div.WoWECalendar .footer a
Vous aurez peut-être besoin d'ajuster la hauteur minimale du calendrier pendant son chargement. Pour cela, utilisez la règle
div.WoWECalendar .days :
- Code: Tout sélectionner
div.WoWECalendar .days {
min-height: 10em;
_height: 10em;
}
Le paramètre non standard
_height est utilisé par les anciennes versions d'Internet Explorer qui ne reconnaissent pas
min-height.
Si les tooltips s'affichent en dessous du calendrier, vous devrez spécifier un z-index explicitement :
- Code: Tout sélectionner
#wowett {
z-index: 1000;
}
Voilà, je pense que tout a été dit. Si vous avez des questions, n'hésitez pas à demander dans ce topic !
Vous avez un blog sur World of Warcraft ou vous administrez un forum de guilde ? Ce guide vous explique comment intégrer le calendrier des évènements à votre site web en seulement quelques minutes et ainsi promouvoir l'activité communautaire dans World of Warcraft !
de Lenwë » 08 Déc 2011, 15:38 
