Calendrier d'événements

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Questions ou commentaires?

Objet

Le but de cette fonctionnalité est de fournir une interface pour parcourir une liste chronologique d'événements. Met en œuvre le modèle de conception « Date Picker » de WAI-ARIA (anglais seulement).

Utiliser lorsque

Cette fonctionnalité peut être utilisée pour afficher une liste d’événements sous forme de calendrier.

Exemple pratique

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 (p.ex., <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>

Needs translation

Events

Event Trigger What it does
wb-init.wb-calevt Triggered manually (e.g., $( ".wb-calevt" ).trigger( "wb-init.wb-calevt" );). Used to manually initialize the Calendar of events plugin. Note: The Calendar of events plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-calevt (v4.0.5+) Triggered automatically after a calendar of events initializes. Used to identify which calendar of events was initialized (target of the event) 
$( document ).on( "wb-ready.wb-calevt", ".wb-calevt", function( event ) {
});
$( ".wb-calevt" ).on( "wb-ready.wb-calevt", function( event ) {
});
wb-updated.wb-calevt (v4.0.5+) Triggered automatically each time the calendar of events is updated (e.g., month changed). Used to identify which calendar of events was updated (target of the event) 
$( document ).on( "wb-updated.wb-calevt", ".wb-calevt", function( event ) {
});
$elm.on( "wb-updated.wb-calevt", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Code source

Code source pour le calendrier d'événements

Date de modification :