Calendrier d'événements
Vous cherchez la BOEW v3.1?
La BOEW v4.0 est maintenant la version courrante. La version de la page actuelle pour la BOEW v3.1 a été déplacée.
Objet
Le but de cette fonctionnalité est de fournir une interface pour parcourir une liste chronologique d'événements.
Utiliser lorsque
Cette fonctionnalité peut être utilisée pour afficher une liste d’événements sous forme de calendrier.
Exemples
Mise en œuvre
- 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.
Exemple code :
<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>Liaison aux détails
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>Filtrage de liste
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>Événements
| Événement | Déclencheur | Fonction |
|---|---|---|
| create.wb-cal | Après que l'année ou le mois soit modifié et après que le formulaire « Aller à » soit soumis. | Crée l'interface du calendrier. |
| displayed.wb-cal | Après que l'interface du calendrier soit créé. | Déclenche l'événement pour les composantes (ex : le sélecteur de date) qui en ont besoin. |
| hideGoToFrm.wb-cal | Après que le bouton "Annuler" sur le formulaire « Aller à » soit activé et après que le formulaire « Aller à » soit soumis. | Cache le formulaire "Aller à" dans l'interface du calendrier. |
| setFocus.wb-cal | Lors de la navigation de l'interface du calendrier à partir du clavier. | Places le « focus » sur la date ciblée. |
Code source
- Date de modification :