Calendrier d'événements
Options de liaison
Liaison directe
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).
-
Événement de seul-jour
Description de l'événement
-
Événement sur plusieurs jours
Le au
Description de l'événement
Code
Visualiser le code
<div id="calendar1"></div>
<div class="wb-calevt" data-calevt-src="calendar1">
<ul>
<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>
...
</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.
-
Événement de seul-jour
Description de l'événement
Liens :
-
Événement sur plusieurs jours
Le au
Description de l'événement
Liens :
Code
Visualiser le code
<div id="calendar1"></div>
<div class="wb-calevt" data-calevt-src="calendar1">
<ul>
<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>
...
</li>
...
</ul>
</div>Événement Ajax
Dans cette méthode, les événements sont récupérées à partir d'une source externe.
Code
Visualiser le code
HTML dans la page
<div id="cal-ajax"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="cal-ajax">
<ul data-calevt="ajax/cal-include1-fr.html ajax/cal-include2-fr.html ajax/cal-include3-fr.html"></ul>
</div>cal-include1-fr.html
<li>
<section>
<h4><a href="https://www.canada.ca" rel="external">Ajax 1 - É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>
...
</li>
...cal-include2-fr.html
<li>
<section>
<h4>Ajax 2 - Événement de seul-jour</h4>
<p><time datetime="2013-03-11">11 mars 2013</time></p>
<p>Description de l'événement</p>
<p>Liens :</p>
<ul>
<li><a href="https://www.canada.ca" rel="external">Ajax 2 - Événement de seul-jour - Lien 1</a></li>
<li><a href="https://www.canada.ca" rel="external">Ajax 2 - Événement de seul-jour - Lien 2</a></li>
</ul>
</section>
</li>
<li>
...
</li>
...cal-include3-fr.html
<li class="calendar-display-onshow">
<section>
<h4><a href="https://www.ec.gc.ca" rel="external">Ajax 3 - Événement 1</a></h4>
<p><time datetime="2013-03-11">11 mars 2013</time></p>
</section>
</li>
<li class="calendar-display-onshow">
...
</li>
...Options d'affichage
Filtrage de liste
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 calender-display-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.
Événements - Liste 1
-
Événement 1
-
Événement 2
-
Expo 2010 Shanghai
Le au
Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.
Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : www.expo2010canada.gc.ca/index-fra.cfm
-
Événement 4
-
Événement 6
-
Événement 7
-
Événement 17
Code
Visualiser le code
<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" 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">
...
</li>
...
</ul>
</section>
</div>Calendrier de largeur fluide
Événements - Liste 1
-
Événement 1
-
Événement 2
-
Expo 2010 Shanghai
Le au
Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.
Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : www.expo2010canada.gc.ca/index-fra.cfm
-
Événement 4
-
Événement 6
-
Événement 7
-
Événement 17
Code
Visualiser le code
<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>
<ul>
<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">
...
</li>
...
</ul>
</section>
</div>Exclure des éléments
Dans cet exemple, certains éléments sont cachés dans la liste ainsi que dans le calendrier en utilisant la classe CSS wb-fltr-out.
Événements - Liste 1
-
Événement 1
-
Événement 2
-
Expo 2010 Shanghai
Le au
Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.
Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : www.expo2010canada.gc.ca/index-fra.cfm
-
Événement 4
-
Événement 6
-
Événement 7
-
Événement 17
Code
Visualiser le code
<div id="cal-exclude"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="cal-exclude">
<section>
<h4>Événements - Liste 1</h4>
<ul>
<li>
<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>
<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="wb-fltr-out">
<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 : <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="wb-fltr-out">
<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="wb-fltr-out">
<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>
<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>
<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>
</ul>
</section>
</div>Plage de dates du calendrier
Par défaut, la plage de dates du calendrier est fixée selon la plage de dates des événements sources. Ceci peut-être outrepassé en configurant les dates minimum et/ou maximum à l'aide des attributs data-calevt-min-date et data-calevt-max-date, qui prennent chacun une chaîne de charactères de date et de temps en format AAAA-MM-JJ (lien disponible uniquement en anglais).
Événements - Liste 1
-
Événement 1
-
Événement 2
-
Expo 2010 Shanghai
Le au
Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.
Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : www.expo2010canada.gc.ca/index-fra.cfm
-
Événement 4
-
Événement 6
-
Événement 7
-
Événement 17
Code
Visualiser le code
<div id="cal-daterange"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="cal-daterange" data-calevt-min-date="2013-02-01" data-calevt-max-date="2013-05-01">
<section>
<h4>Événements - Liste 1</h4>
<ul>
<li>
<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>
<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>
<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 : <a href="https://www.expo2010canada.gc.ca/index-fra.cfm" rel="external">www.expo2010canada.gc.ca/index-fra.cfm</a></p>
</section>
</li>
<li>
<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>
<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>
<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>
<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>
</ul>
</section>
</div>Hors de portée à partid d'aujourd'hui
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: data-wb-calevt='{"year": 2003, "month": 4}' (Voir l'example de Calendrier de largeur fluide)
Événement passé
Initialisé à la plus vieille date
-
Événement de seul-jour
Description de l'événement
-
Événement sur plusieurs jours
Le au
Description de l'événement
Code
Visualiser le code
<div id="calevt-out-1"></div>
<div class="wb-calevt" data-calevt-src="calevt-out-1">
<ul>
<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>
...
</li>
...
</ul>
</div>Événement passé et futur
Initialisé à la date d'aujourd'hui
-
Événement de seul-jour
Description de l'événement
-
Événement de seul-jour
Description de l'événement
Code
Visualiser le code
<div id="calevt-out-3"></div>
<div class="wb-calevt" data-calevt-src="calevt-out-3">
<ul>
<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>
<li>
...
</li>
...
</ul>
</div>Événement futur
Initialisé à la plus petite date
-
Événement de seul-jour
Description de l'événement
-
Événement sur plusieurs jours
Le au
Description de l'événement
Code
Visualiser le code
<div id="calevt-out-2"></div>
<div class="wb-calevt" data-calevt-src="calevt-out-2">
<ul>
<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>
...
</li>
...
</ul>
</div>Détails de la page
- Date de modification :