- Passer au contenu principal
- Passer à « À propos de ce site »

# Calendrier d'événements

- Documentation
- Questions ou commentaires?

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

   11 mars 2013

   Description de l'événement

2. #### Événement sur plusieurs jours

   Le 22 mars 2013 au 26 avril 2013

   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

   11 mars 2013

   Description de l'événemen

   Liens :

   - Événement de seul-jour - Lien 1
   - Événement de seul-jour - Lien 2

2. #### Événement sur plusieurs jours

   Le 22 mars 2013 au 26 avril 2013

   Description de l'événemen

   Liens :

   - Événement sur plusieurs jours - Lien 1
   - Événement sur plusieurs jours - Lien 2

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

   11 mars 2013

2. ##### Événement 2

   11 mars 2013

3. ##### Expo 2010 Shanghai

   Le 22 mars 2013 au 26 avril 2013

   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

   24 mars 2013

5. ##### Événement 6

   4 avril 2013

6. ##### Événement 7

   23 avril 2013

7. ##### Événement 17

   23 avril 2013

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

   11 mars 2013

2. ##### Événement 2

   11 mars 2013

3. ##### Expo 2010 Shanghai

   Le 22 mars 2013 au 26 avril 2013

   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

   24 mars 2013

5. ##### Événement 6

   4 avril 2013

6. ##### Événement 7

   23 avril 2013

7. ##### Événement 17

   23 avril 2013

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

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

1. #### Événement de seul-jour

   11 mars 2003

   Description de l'événement

2. #### Événement sur plusieurs jours

   Le 22 mars 2001 au 26 avril 2003

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

### Événement passé et futur

Initialisé à la date d'aujourd'hui

1. #### Événement de seul-jour

   11 mars 2003

   Description de l'événement

2. #### Événement de seul-jour

   11 mars 2026

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

### Événement futur

Initialisé à la plus petite date

1. #### Événement de seul-jour

   11 mars 2226

   Description de l'événement

2. #### Événement sur plusieurs jours

   Le 22 mars 2225 au 26 avril 2226

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

Date de modification :
  2014-07-21