---
{
	"title": "Calendrier d'événements",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Un calendrier servant à consulter une liste d'événements.",
	"altLangPrefix": "cal-events",
	"dateModified": "2023-08-14"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Objet</h2>
	<p>Le but de cette fonctionnalité est de fournir une interface pour parcourir une liste chronologique d'événements. Met en œuvre le <a href="https://www.w3.org/TR/wai-aria-practices/#datepicker">modèle de conception &#171;&#160;<span lang="en">Date Picker</span>&#160;&#187; de WAI-ARIA (anglais seulement)</a>.</p>
</section>

<section>
	<h2>Utiliser lorsque</h2>
	<p>Cette fonctionnalité peut être utilisée pour afficher une liste d’événements sous forme de calendrier.</p>
</section>

<section>
	<h2>Exemple pratique</h2>
	<ul>
		<li><a href="../../../demos/cal-events/cal-events-en.html">Exemple en anglais</a></li>
		<li><a href="../../../demos/cal-events/cal-events-fr.html">Exemple en français</a></li>
	</ul>
</section>

<section>
	<h2>Évaluation et rapport</h2>
	<ul>
		<li>Accessibilité (CS WCAG 2.1/2.2 Niveau A &amp; AA)- <a href="../../../demos/cal-events/reports/a11y-1-en.html">Rapport Anglais</a></li>
		<li>Accessibilité (CS WCAG 2.1/2.2 Niveau A &amp; AA)- <a href="../../../demos/cal-events/reports/a11y-1-fr.html">Rapport Français</a></li>
	</ul>
</section>

<section>
	<h2>Mise en œuvre</h2>
	<ol>
		<li>Ajouter un élément div à la page Web avec un attribut <code>class</code> contenant "wb-calevt" et un nom unique dans un attribut <code>data-calevt-src</code> (e.g.: <code>&lt;div class="wb-calevt" data-calevt-src="unique-name"&gt;&lt;/div&gt;</code>).</li>
		<li>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 :
			<ol>
				<li>L’élément de liste doit commencer par un élément d’en-tête (de <code>h2</code> à <code>h6</code>, selon le contexte de la page).</li>
				<li>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.</li>
				<li>La date de l’événement doit être fournie dans un élément <code>time</code> 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 <code>time</code> et une date de norme ISO-8601 (p. ex., 2010-03-11) est indiquée dans l’attribut <code>datetime</code>.</li>
				<li>Remarque : pour empêcher un élément de s'afficher dans le calendrier ainsi que dans la liste, ajoutez simplement la classe CSS <code>wb-fltr-out</code> à l'élément de liste (<code>&lt;li&gt;</code>).</li>
			</ol>
		</li>
		<li>Ajouter un deuxième élément <code>div</code> à la page Web avec le nom unique de l’attribut <code>data-calevt-src</code> ci-haut (p.ex., <code>&lt;div id="unique-name"&gt;&lt;/div&gt;</code>). Cela permettra de maintenir en place l’interface de calendrier.</li>
	</ol>
	<p><strong>Note</strong>: ce plugiciel prend toujours en charge <code>&lt;ul&gt;</code> et <code>&lt;ol&gt;</code>, mais, en date du 4 octobre 2022, nous recommandons d'utiliser un <code>&lt;ul&gt;</code> car les numéros d'éléments dans un <code>&lt;ol&gt;</code> commencerons toujours à 1, même lorsque certains éléments sont masqués.</p>

	<p>Exemple code :</p>
	<pre><code>&lt;div id="calendar1"&gt;&lt;/div&gt;

&lt;div class="wb-calevt" data-calevt-src="calendar1"&gt;
	&lt;ul&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Description de l'événement&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement sur plusieurs jours&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime="2011-03-22"&gt;22 mars 2011&lt;/time&gt; à &lt;time datetime="2011-04-26"&gt;26 avril 2011&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Description de l'événement&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>

	<section>
		<h3>Liaison aux détails</h3>
		<p>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.</p>
		<pre><code>&lt;div id="calendar2"&gt;&lt;/div&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar2"&gt;
	&lt;ul&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;Événement de seul-jour&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Description de l'événement&lt;/p&gt;
				&lt;p&gt;Liens:&lt;/p&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement de seul-jour - Lien 1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement de seul-jour - Lien 2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;Événement sur plusieurs jours&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime="2011-03-22"&gt;22 mars 2011&lt;/time&gt; to &lt;time datetime="2011-04-26"&gt;26 avril 2011&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Description de l'événement&lt;/p&gt;
				&lt;p&gt;Liens:&lt;/p&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement sur plusieurs jours - Lien 1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="https://www.canada.gc.ca"&gt;Événement sur plusieurs jours - Lien 2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
	</section>

	<section>
		<h3>Filtrage de liste</h3>
		<p>Cette option filtre des événements de la liste qui ne sont pas pour le mois actuel. Activez cette option en ajoutant la classe <code>cal-disp-onshow</code> à chaque événement qui devrait être filtré par le mois.</p>
		<p>Les événements qui n'ont pas la classe <code>cal-disp-onshow</code> seront visible toujours.</p>
		<pre><code>&lt;div id="calendar3"&gt;&lt;/div&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar3"&gt;
	&lt;section&gt;
		&lt;h4&gt;Événements - Liste 1&lt;/h4&gt;
		&lt;ul&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://www.ec.gc.ca"&gt;Événement 1&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://canada.gc.ca"&gt;Événement 2&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;Expo 2010 Shanghai&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-03-22"&gt;22 mars 2011&lt;/time&gt; au &lt;time datetime="2011-04-26"&gt;26 avril 2011&lt;/time&gt;&lt;/p&gt;
					&lt;p&gt;Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.&lt;/p&gt;
					&lt;p&gt;Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : &lt;a href="https://www.expo2010canada.gc.ca/index-fra.cfm"&gt;www.expo2010canada.gc.ca/index-fra.cfm&lt;/a&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://www.gcpedia.gc.ca/"&gt;Événement 4&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-03-24"&gt;24 mars 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://www.ec.gc.ca"&gt;Événement 6&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-04-11"&gt;11 avril 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://canada.gc.ca"&gt;Événement 7&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-04-23"&gt;23 avril 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class="cal-disp-onshow"&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href="https://canada.gc.ca"&gt;Événement 17&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime="2011-04-23"&gt;23 avril 2011&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
	</section>
</section>

<section lang="en">
	<p><strong>Needs translation</strong></p>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-calevt</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-calevt" ).trigger( "wb-init.wb-calevt" );</code>).</td>
				<td>Used to manually initialize the Calendar of events plugin. <strong>Note:</strong> The Calendar of events plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-calevt</code> (v4.0.5+)</td>
				<td>Triggered automatically after a calendar of events initializes.</td>
				<td>Used to identify which calendar of events was initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-calevt", ".wb-calevt", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-calevt" ).on( "wb-ready.wb-calevt", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-updated.wb-calevt</code> (v4.0.5+)</td>
				<td>Triggered automatically each time the calendar of events is updated (e.g., month changed).</td>
				<td>Used to identify which calendar of events was updated (target of the event)
					<pre><code>$( document ).on( "wb-updated.wb-calevt", ".wb-calevt", function( event ) {
});</code></pre>
					<pre><code>$elm.on( "wb-updated.wb-calevt", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-redraw.wb-calevt</code> (v4.0.??)</td>
				<td>Triggered manually (e.g., <code>$elm.trigger( "wb-redraw.wb-calevt" );</code>).</td>
				<td>Used to manually redraw the Calendar widget. For example, when events have been changed dynamically after page load.</td>
			</tr>
		</tbody>
	</table>
</section>
<section>
	<h2>Code source</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/cal-events">Code source pour le calendrier d'événements</a></p>
</section>
