---
{
	"title": "Calendrier d'événements",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un calendrier servant à consulter une liste d'événements.",
	"tag": "cal-events",
	"parentdir": "cal-events",
	"altLangPrefix": "cal-events",
	"dateModified": "2014-07-21"
}
---
<span class="wb-prettify all-pre"></span>

<section>
	<h2>Options de liaison</h2>
	<section>
		<h3>Liaison directe</h3>
		<p>Dans cette méthode, le calendrier lien avec le premier lien dans chaque événement (se trouve dans l'en-tête de l'événement dans la plupart des cas).</p>

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

		<div class="wb-calevt" data-calevt-src="calendar1">
			<ol>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement de seul-jour</a></h4>
						<p><time datetime="2013-03-11">11 mars 2013</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement sur plusieurs jours</a></h4>
						<p>Le <time datetime="2013-03-22">22 mars 2013</time> au <time datetime="2013-04-26">26 avril 2013</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calendar1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calendar1&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&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;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<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>

		<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="2013-03-11">11 mars 2013</time></p>
						<p>Description de l'événemen</p>
						<p>Liens&#160;:</p>
						<ul>
							<li><a href="https://www.canada.ca" rel="external">Événement de seul-jour - Lien 1</a></li>
							<li><a href="https://www.canada.ca" rel="external">Événement de seul-jour - Lien 2</a></li>
						</ul>
					</section>
				</li>
				<li>
					<section>
						<h4>Événement sur plusieurs jours</h4>
						<p>Le <time datetime="2013-03-22">22 mars 2013</time> au <time datetime="2013-04-26">26 avril 2013</time></p>
						<p>Description de l'événemen</p>
						<p>Liens&#160;:</p>
						<ul>
							<li><a href="https://www.canada.ca" rel="external">Événement sur plusieurs jours - Lien 1</a></li>
							<li><a href="https://www.canada.ca" rel="external">Événement sur plusieurs jours - Lien 2</a></li>
						</ul>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calendar1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calendar1&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&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;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3>Événement Ajax</h3>
		<p>Dans cette méthode, les événements sont récupérées à partir d'une source externe.</p>

		<div id="cal-ajax"></div>

		<div class="wb-calevt evt-anchor" data-calevt-src="cal-ajax">
			<ol data-calevt="ajax/cal-include1-fr.html ajax/cal-include2-fr.html ajax/cal-include3-fr.html"></ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>Visualiser le code</summary>
				<section>
					<h5>HTML dans la page</h5>
					<pre><code>&lt;div id=&quot;cal-ajax&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt evt-anchor&quot; data-calevt-src=&quot;cal-ajax&quot;&gt;
	&lt;ol data-calevt=&quot;ajax/cal-include1-fr.html ajax/cal-include2-fr.html ajax/cal-include3-fr.html&quot;&gt;&lt;/ol&gt;
&lt;/div&gt;</code></pre>
				</section>

				<section>
					<h5>cal-include1-fr.html</h5>
					<pre><code>&lt;li&gt;
	&lt;section&gt;
		&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 1 - Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&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;/li&gt;
...</code></pre>
				</section>

				<section>
					<h5>cal-include2-fr.html</h5>
					<pre><code>&lt;li&gt;
	&lt;section&gt;
		&lt;h4&gt;Ajax 2 - Événement de seul-jour&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&lt;/time&gt;&lt;/p&gt;
		&lt;p&gt;Description de l'événement&lt;/p&gt;
		&lt;p&gt;Liens&#160;:&lt;/p&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 2 - Événement de seul-jour - Lien 1&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 2 - É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;/li&gt;
...</code></pre>
				</section>

				<section>
					<h5>cal-include3-fr.html</h5>
					<pre><code>&lt;li class="calendar-display-onshow"&gt;
	&lt;section&gt;
		&lt;h4&gt;&lt;a href="https://www.ec.gc.ca" rel="external"&gt;Ajax 3 - Événement 1&lt;/a&gt;&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime="2013-03-11"&gt;11 mars 2013&lt;/time&gt;&lt;/p&gt;
	&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
	...
&lt;/li&gt;
...</code></pre>
				</section>
			</details>
		</section>
	</section>
</section>

<section>
	<h2>Options d'affichage</h2>
	<section>
		<h3>Filtrage de liste</h3>
		<p>Cette option filtre des événements de la liste qui ne sont pas pour le mois actuel. Rendre capable cette option en ajoutant la classe <code>calender-display-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>

		<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="https://www.ec.gc.ca" rel="external">Événement 1</a></h5>
							<p><time datetime="2013-03-11">11 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 2</a></h5>
							<p><time datetime="2013-03-11">11 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5>Expo 2010 Shanghai</h5>
							<p>Le <time datetime="2013-03-22">22 mars 2013</time> au <time datetime="2013-04-26">26 avril 2013</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&#160;: <a href="https://www.expo2010canada.gc.ca/index-fra.cfm" rel="external">www.expo2010canada.gc.ca/index-fra.cfm</a></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.ic.gc.ca" rel="external">Événement 4</a></h5>
							<p><time datetime="2013-03-24">24 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.ec.gc.ca" rel="external">Événement 6</a></h5>
							<p><time datetime="2013-04-11">4 avril 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 7</a></h5>
							<p><time datetime="2013-04-23">23 avril 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 17</a></h5>
							<p><time datetime="2013-04-23">23 avril 2013</time></p>
						</section>
					</li>
				</ol>
			</section>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calendar3&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt evt-anchor&quot; data-calevt-src=&quot;calendar3&quot;&gt;
	&lt;section&gt;
		&lt;h4&gt;Événements - Liste 1&lt;/h4&gt;
		&lt;ol&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href=&quot;https://www.ec.gc.ca&quot; rel=&quot;external&quot;&gt;Événement 1&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				...
			&lt;/li&gt;
			...
		&lt;/ol&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3>Calendrier de largeur fluide</h3>

		<div id="calendar4" class="cal-cnt-fluid"></div>

		<div class="wb-calevt evt-anchor" data-wb-calevt='{"year": 2013, "month": 2}' data-calevt-src="calendar4">
			<section>
				<h4>Événements - Liste 1</h4>
				<ol>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.ec.gc.ca" rel="external">Événement 1</a></h5>
							<p><time datetime="2013-03-11">11 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 2</a></h5>
							<p><time datetime="2013-03-11">11 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5>Expo 2010 Shanghai</h5>
							<p>Le <time datetime="2013-03-22">22 mars 2013</time> au <time datetime="2013-04-26">26 avril 2013</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&#160;: <a href="https://www.expo2010canada.gc.ca/index-fra.cfm" rel="external">www.expo2010canada.gc.ca/index-fra.cfm</a></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.ic.gc.ca" rel="external">Événement 4</a></h5>
							<p><time datetime="2013-03-24">24 mars 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.ec.gc.ca" rel="external">Événement 6</a></h5>
							<p><time datetime="2013-04-11">4 avril 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 7</a></h5>
							<p><time datetime="2013-04-23">23 avril 2013</time></p>
						</section>
					</li>
					<li class="cal-disp-onshow">
						<section>
							<h5><a href="https://www.canada.ca" rel="external">Événement 17</a></h5>
							<p><time datetime="2013-04-23">23 avril 2013</time></p>
						</section>
					</li>
				</ol>
			</section>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calendar4&quot; class=&quot;cal-cnt-fluid&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt evt-anchor&quot; data-wb-calevt='{"year": 2013, "month": 2}' data-calevt-src=&quot;calendar4&quot;&gt;
	&lt;section&gt;
		&lt;h4&gt;Événements - Liste 1&lt;/h4&gt;
		&lt;ol&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href=&quot;https://www.ec.gc.ca&quot; rel=&quot;external&quot;&gt;Événement 1&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;11 mars 2013&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				...
			&lt;/li&gt;
			...
		&lt;/ol&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>
</section>
<section>
	<h2>Hors de portée à partid d'aujourd'hui</h2>
	<p>Le calendrier est initialisé dépendant de la date d'aujourd'hui et de la la porté des événements qui peuvent être sélectionné. La date de départ peut être forcé en configurant le plugiciels. Par example: <code>data-wb-calevt='{"year": 2003, "month": 4}'</code> (Voir l'example de Calendrier de largeur fluide)</p>
	<div class="row">
	<section class="col-md-4">
		<h3>Événement passé</h3>
		<p>Initialisé à la plus vieille date</p>
		<div id="calevt-out-1"></div>

		<div class="wb-calevt" data-calevt-src="calevt-out-1">
			<ol>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement de seul-jour</a></h4>
						<p><time datetime="2003-03-11">11 mars 2003</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement sur plusieurs jours</a></h4>
						<p>Le <time datetime="2001-03-22">22 mars 2001</time> au <time datetime="2003-04-26">26 avril 2003</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-1&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2003-03-11&quot;&gt;11 mars 2003&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;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section class="col-md-4">
		<h3>Événement passé et futur</h3>
		<p>Initialisé à la date d'aujourd'hui</p>
		<div id="calevt-out-3"></div>

		<div class="wb-calevt" data-calevt-src="calevt-out-3">
			<ol>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement de seul-jour</a></h4>
						<p><time datetime="2003-03-11">11 mars 2003</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement de seul-jour</a></h4>
						<p><time datetime="2026-03-11">11 mars 2026</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-3&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-3&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2003-03-11&quot;&gt;11 mars 2003&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=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2026-03-11&quot;&gt;11 mars 2026&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;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section class="col-md-4">
		<h3>Événement futur</h3>
		<p>Initialisé à la plus petite date</p>
		<div id="calevt-out-2"></div>

		<div class="wb-calevt" data-calevt-src="calevt-out-2">
			<ol>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement de seul-jour</a></h4>
						<p><time datetime="2226-03-11">11 mars 2226</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
				<li>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Événement sur plusieurs jours</a></h4>
						<p>Le <time datetime="2225-03-22">22 mars 2225</time> au <time datetime="2226-04-26">26 avril 2226</time></p>
						<p>Description de l'événement</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details>
				<summary>Visualiser le code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-2&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-2&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Événement de seul-jour&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2226-03-11&quot;&gt;11 mars 2226&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;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>
	</div>
</section>