- Passer au contenu principal
- Passer à « À propos de ce site »

# Calendrier d'événements

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

- Exemple en anglais
- Exemple en français

## Mise en œuvre

1. Ajouter un élément div à la page Web avec un attribut `class` contenant "wb-calevt" et un nom unique dans un attribut `data-calevt-src` (e.g.: `<div class="wb-calevt" data-calevt-src="unique-name"></div>`).
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 le nom unique de l’attribut `data-calevt-src` ci-haut (p.ex., `<div id="unique-name"></div>`). Cela permettra de maintenir en place l’interface de calendrier.

Exemple code :

    <div id="calendar1"></div>

    <div class="wb-calevt" data-calevt-src="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="wb-calevt evt-anchor" data-calevt-src="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 `cal-disp-onshow` à chaque événement qui devrait être filtré par le mois.

Les événements qui n'ont pas la classe `cal-disp-onshow` seront visible toujours.

    <div id="calendar3"></div>

    <div class="wb-calevt evt-anchor" data-calevt-src="calendar3">
    	<section>
    		<h4>Événements - Liste 1</h4>
    		<ol>
    			<li class="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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 :
  2014-08-06