Calendrier d'événements (interface du calendrier) - nschonni/wet-boew GitHub Wiki
Responsable de projet : Stephane Berube (@berubs)
Le but de cette fonctionnalité est de fournir une interface pour parcourir une liste chronologique d'événements.
Cette fonctionnalité peut être utilisée pour afficher une liste d'événements sous forme de calendrier
- Ajouter un élément div à la page Web avec un attribut class contenant "wet-boew-calendar-events" et une classe unique (e.g.:
<div class="wet-boew-calendar-events unique-class"></div>
).
Note: votre classe unique doit être la dernière dans la liste de classes. - Inclure dans l’élément div une liste ordonnée des événements (élément ol) en utilisant la structure suivante pour chaque événement :
- L’élément de liste doit commencer par un élément d’en-tête (de h2 à h6, selon le contexte de la page).
- L’élément d’en-tête doit inclure un lien vers la description de l’événement, avec le titre de l’événement comme hyperlien.
- La date de l’événement doit être fournie dans un élément time en HTML5 contenu au sein d’un élément de paragraphe (à la suite de l’élément d’en-tête). La date à afficher est contenue dans l’élément time et une date de norme ISO-8601 (p. ex., 2010-03-11) est indiquée dans l’attribut datetime.
- Ajouter un deuxième élément div à la page Web avec une valeur d’attribut à identification contenant votre classe unique ci-haut (e.g.:
<div id="unique-class"></div>
). Cela permettra de maintenir en place l’interface de calendrier.
<div id="calendar1"></div> <div class="wet-boew-eventscalendar calendar1"> <ol> <li> <section> <h4><a href="http://www.canada.gc.ca">Événement de seul-jour</a></h4> <p><time datetime="2011-03-11">11 mars 2011</time></p> <p>Description de l'événement</p> </section> </li> <li> <section> <h4><a href="http://www.canada.gc.ca">Événement sur plusieurs jours</a></h4> <p><time datetime="2011-03-22">22 mars 2011</time> à <time datetime="2011-04-26">26 avril 2011</time></p> <p>Description de l'événement</p> </section> </li> </ol> </div>
Dans cette méthode, le calendrier lien avec les détails de l'événement. Ceci est utilisé quand un événement a des liens multiples.
<div id="calendar2"></div> <div class="wet-boew-eventscalendar event-anchoring calendar2"> <ol> <li> <section> <h4>Événement de seul-jour</h4> <p><time datetime="2011-03-11">11 mars 2011</time></p> <p>Description de l'événement</p> <p>Liens:</p> <ul> <li><a href="http://www.canada.gc.ca">Événement de seul-jour - Lien 1</a></li> <li><a href="http://www.canada.gc.ca">Événement de seul-jour - Lien 2</a></li> </ul> </section> </li> <li> <section> <h4>Événement sur plusieurs jours</h4> <p><time datetime="2011-03-22">22 mars 2011</time> to <time datetime="2011-04-26">26 avril 2011</time></p> <p>Description de l'événement</p> <p>Liens:</p> <ul> <li><a href="http://www.canada.gc.ca">Événement sur plusieurs jours - Lien 1</a></li> <li><a href="http://www.canada.gc.ca">Événement sur plusieurs jours - Lien 2</a></li> </ul> </section> </li> </ol> </div>
Cette option filtre des événements de la liste qui ne sont pas pour le mois actuel. Activez cette option en ajoutant la classe calender-display-onshow
à chaque événement qui devrait être filtré par le mois.
Les événements qui n'ont pas la classe calendar-display-onshow
seront visible toujours.
<div id="calendar3"></div> <div class="wet-boew-eventscalendar event-anchoring calendar3"> <section> <h4>Événements - Liste 1</h4> <ol> <li class="calendar-display-onshow"> <section> <h5><a href="http://www.ec.gc.ca">Événement 1</a></h5> <p><time datetime="2011-03-11">11 mars 2011</time></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5><a href="http://canada.gc.ca">Événement 2</a></h5> <p><time datetime="2011-03-11">11 mars 2011</time></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5>Expo 2010 Shanghai</h5> <p><time datetime="2011-03-22">22 mars 2011</time> au <time datetime="2011-04-26">26 avril 2011</time></p> <p>Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.</p> <p>Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : <a href="http://www.expo2010canada.gc.ca/index-fra.cfm">www.expo2010canada.gc.ca/index-fra.cfm</a></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5><a href="http://gcpedia.gc.ca">Événement 4</a></h5> <p><time datetime="2011-03-24">24 mars 2011</time></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5><a href="http://www.ec.gc.ca">Événement 6</a></h5> <p><time datetime="2011-04-11">11 avril 2011</time></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5><a href="http://canada.gc.ca">Événement 7</a></h5> <p><time datetime="2011-04-23">23 avril 2011</time></p> </section> </li> <li class="calendar-display-onshow"> <section> <h5><a href="http://canada.gc.ca">Événement 17</a></h5> <p><time datetime="2011-04-23">23 avril 2011</time></p> </section> </li> </ol> </section> </div>
Le code pour le calendrier d'événements se trouve à plusieurs endroits dans le répertoire source de la BOEW :
- eventscalendar.js - code JavaScript pour le calendrier d'événements
- events-calendar.scss - CSS pour le calendrier d'événements
- calendar.js - Code JavaScript pour la bibiliothèque de calendrier
- calendar-base.scss - CSS de base pour la bibiliothèque de calendrier
- calendar-theme.scss - CSS de thème pour la bibiliothèque de calendrier
Il n’existe actuellement aucun problème connu.
N'hésitez pas à suggérer des améliorations.
Sélecteur de date (correctif pour input type='date', interface du calendrier)