Calendrier d'événements

Cette fonctionnalité génère dynamiquement une interface du calendrier pour naviguer dans une liste d’événements.

Vue d’ensemble

Responsable de projet : Stephane Berube (@berubs)

Description

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.

Mise en œuvre

  1. 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.
  2. 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 :
    1. L’élément de liste doit commencer par un élément d’en-tête (de h2 à h6, selon le contexte de la page).
    2. 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.
    3. 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.
  3. 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>

Exemples

Développement

Le code pour le calendrier d'événements se trouve à plusieurs endroits dans le répertoire source de la BOEW :

Problèmes connus

Il n’existe actuellement aucun problème technique connu. Des règles administratives qui reflètent les scénarios d’usage appropriés doivent être formulées.

À venir

Ne pas hésiter à suggérer des fonctionnalités/améliorations dans issue tracker.

Historique des versions

Pages connexes