Intégrez le calendrier des évènements à votre site
Abonnez-vous à notre page FacebookSuivez-nous sur TwitterSuivez-nous sur Google+ Flux RSS Ajoutez le calendrier des évènements à votre agenda

Intégrez le calendrier des évènements à votre site

Par Lenwë » 08 Déc 2011, 15:38 » guide, évènement, intégration, calendrier, code

Intégrez le calendrier des évènements à votre siteVous 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 !
Annonces officielles de Warcraft People.

Modérateur: Rédacteurs

Intégrez le calendrier des évènements à votre site

Messagede Lenwë » 08 Déc 2011, 15:38

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émo

Voici un exemple d'intégration très simple : ajax_calendar/demo_fr.html

Ce widget ne fait appel qu'à des fonctions très basiques, il est compatible avec tous les navigateurs.

Intégration du calendrier

Dans 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.

Personnalisation

Voici 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 !
Avatar de l’utilisateur
Lenwë
Site Admin
 
Messages: 1739
Inscription: 25 Aoû 2010, 18:29
Localisation: Nantes
BattleTag: Lenwe#2483

Retourner vers Warcraft People

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

  • Utilisez l'adresse suivante pour accéder au calendrier des évènements depuis d'autres applications. Copiez l'adresse et collez-la dans n'importe quelle application de type agenda prenant en charge le format iCal.
cron