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

Évaluation et rapport

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 non-ordonnée des événements (élément ul) 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.
    4. Remarque : pour empêcher un élément de s'afficher dans le calendrier ainsi que dans la liste, ajoutez simplement la classe CSS wb-fltr-out à l'élément de liste (<li>).
  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.

Note: ce plugiciel prend toujours en charge <ul> et <ol>, mais, en date du 4 octobre 2022, nous recommandons d'utiliser un <ul> car les numéros d'éléments dans un <ol> commencerons toujours à 1, même lorsque certains éléments sont masqués.

Exemple code :

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

<div class="wb-calevt" data-calevt-src="calendar1">
	<ul>
		<li>
			<section>
				<h4><a href="https://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="https://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>
	</ul>
</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">
	<ul>
		<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="https://www.canada.gc.ca">Événement de seul-jour - Lien 1</a></li>
					<li><a href="https://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="https://www.canada.gc.ca">Événement sur plusieurs jours - Lien 1</a></li>
					<li><a href="https://www.canada.gc.ca">Événement sur plusieurs jours - Lien 2</a></li>
				</ul>
			</section>
		</li>
	</ul>
</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>
		<ul>
			<li class="cal-disp-onshow">
				<section>
					<h5><a href="https://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="https://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="https://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="https://www.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="https://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="https://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="https://canada.gc.ca">Événement 17</a></h5>
					<p><time datetime="2011-04-23">23 avril 2011</time></p>
				</section>
			</li>
		</ul>
	</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 ) {
});
wb-redraw.wb-calevt (v4.0.??) Triggered manually (e.g., $elm.trigger( "wb-redraw.wb-calevt" );). Used to manually redraw the Calendar widget. For example, when events have been changed dynamically after page load.

Code source

Code source pour le calendrier d'événements

Date de modification :