Calendrier d'événements

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

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

  1. Événement de seul-jour

    Description de l'événement

  2. É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">
	<ol>
		<li>
			<section>
				<h4><a href="http://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>
		...
	</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.

  1. Événement de seul-jour

    Description de l'événemen

    Liens :

  2. Événement sur plusieurs jours

    Le au

    Description de l'événemen

    Liens :

Code

Visualiser le code 
<div id="calendar1"></div>

<div class="wb-calevt" data-calevt-src="calendar1">
	<ol>
		<li>
			<section>
				<h4><a href="http://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>
		...
	</ol>
</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">
	<ol data-calevt="ajax/cal-include1-fr.html ajax/cal-include2-fr.html ajax/cal-include3-fr.html"></ol>
</div>
    cal-include1-fr.html
    <li>
	<section>
		<h4><a href="http://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="http://www.canada.ca" rel="external">Ajax 2 - Événement de seul-jour - Lien 1</a></li>
			<li><a href="http://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="http://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

    1. Événement 1

    2. Événement 2

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

    4. Événement 4

    5. Événement 6

    6. Événement 7

    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>
		<ol>
			<li class="cal-disp-onshow">
				<section>
					<h5><a href="http://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>
			...
		</ol>
	</section>
</div>

    Calendrier de largeur fluide

    Événements - Liste 1

    1. Événement 1

    2. Événement 2

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

    4. Événement 4

    5. Événement 6

    6. Événement 7

    7. Événement 17

    Code

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

<div class="wb-calevt evt-anchor" data-calevt-src="calendar4">
	<section>
		<h4>Événements - Liste 1</h4>
		<ol>
			<li class="cal-disp-onshow">
				<section>
					<h5><a href="http://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>
			...
		</ol>
	</section>
</div>
    Date de modification :