- Skip to main content
- Skip to "About this site"

# Calendar of Events

- Documentation
- Questions or comments?

## Linking Options

### Direct Linking

In this method, the calendar links to the first link in each event (usually in the event heading).

1. #### Single-Day Event

   March 11th, 2013

   Event Description

2. #### Multi-Day Event

   March 22nd, 2013 to April 26th, 2013

   Event Description

#### Code

View 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">Single-Day Event</a></h4>
    				<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    				<p>Event Description</p>
    			</section>
    		</li>
    		<li>
    			...
    		</li>
    		...
    	</ol>
    </div>

### Details Linking

In this method, the calendar links to the details of the event. This is used when an event has multiple links.

1. #### Single-Day Event

   March 11th, 2013

   Event Description

   Links:

   - Single-Day Event Link 1
   - Single-Day Event Link 2

2. #### Multi-Day Event

   March 22nd, 2013 to April 26th, 2013

   Event Description

   Links:

   - Multi-Day Event Link 1
   - Multi-Day Event Link 2

#### Code

View code

    <div id="calendar2"></div>
    <div class="wb-calevt evt-anchor" data-calevt-src="calendar2">
    	<ol>
    		<li>
    			<section>
    				<h4>Single-Day Event</h4>
    				<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    				<p>Event Description</p>
    				<p>Links:</p>
    				<ul>
    					<li><a href="http://www.canada.ca" rel="external">Single-Day Event Link 1</a></li>
    					<li><a href="http://www.canada.ca" rel="external">Single-Day Event Link 2</a></li>
    				</ul>
    			</section>
    		</li>
    		<li>
    			...
    		</li>
    		...
    	</ol>
    </div>

### Ajax Events

In this method, events are pulled from a remote source.

#### Code

View code

##### In-page HTML

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

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

##### cal-include1-en.html

    <li>
    	<section>
    		<h4><a href="http://www.canada.ca" rel="external">Ajax 1 - Single-Day Event</a></h4>
    		<p><time datetime="2013-03-11">Ajax 1 - March 11th, 2013</time></p>
    		<p>Event Description</p>
    	</section>
    </li>
    <li>
    	...
    </li>
    ...

##### cal-include2-en.html

    <li>
    	<section>
    		<h4>Ajax 2 - Single-Day Event</h4>
    		<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    		<p>Event Description</p>
    		<p>Links:</p>
    		<ul>
    			<li><a href="http://www.canada.ca" rel="external">Ajax 2 - Single-Day Event Link 1</a></li>
    			<li><a href="http://www.canada.ca" rel="external">Ajax 2 - Single-Day Event Link 2</a></li>
    		</ul>
    	</section>
    </li>
    <li>
    	...
    </li>
    ...

##### cal-include3-en.html

    <li class="calendar-display-onshow">
    	<section>
    		<h4><a href="http://www.ec.gc.ca" rel="external">Ajax 3 - Event 1</a></h4>
    		<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    	</section>
    </li>
    <li class="calendar-display-onshow">
    	...
    </li>
    ...

## Display Options

### List Filtering

This option filters out events from the list that are not for the current month. Enable this option by adding the `cal-disp-onshow` class to each event that should be filtered by month.

Events that do not have the cal-disp-onshow class will always be visible.

#### Events List 1

1. ##### Event 1

   March 11th, 2013

2. ##### Event 2

   March 11th, 2013

3. ##### World Expo Shanghai (Shanghai, China)

   March 22nd, 2013 to April 26th, 2013

   The Canada Pavilion celebrates the vibrancy and the vitality of Canadian communities and the people within them.

   For more information about Canada at Expo 2010 Shanghai, visit: www.expo2010canada.gc.ca/index-eng.cfm

4. ##### Event 4

   March 24th, 2013

5. ##### Event 6

   April 11th, 2013

6. ##### Event 7

   April 23rd, 2013

7. ##### Event 17

   April 23rd, 2013

#### Code

View code

    <div id="calendar3"></div>

    <div class="wb-calevt evt-anchor" data-calevt-src="calendar3">
    	<section>
    		<h4>Events List 1</h4>
    		<ol>
    			<li class="cal-disp-onshow">
    				<section>
    					<h5><a href="http://www.ec.gc.ca" rel="external">Event 1</a></h5>
    					<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    				</section>
    			</li>
    			<li class="cal-disp-onshow">
    				...
    			</li>
    			...
    		</ol>
    	</section>
    </div>

### Fluid-width Calendar

#### Events List 1

1. ##### Event 1

   March 11th, 2013

2. ##### Event 2

   March 11th, 2013

3. ##### World Expo Shanghai (Shanghai, China)

   March 22nd, 2013 to April 26th, 2013

   The Canada Pavilion celebrates the vibrancy and the vitality of Canadian communities and the people within them.

   For more information about Canada at Expo 2010 Shanghai, visit: www.expo2010canada.gc.ca/index-eng.cfm

4. ##### Event 4

   March 24th, 2013

5. ##### Event 6

   April 11th, 2013

6. ##### Event 7

   April 23rd, 2013

7. ##### Event 17

   April 23rd, 2013

#### Code

View 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>Events List 1</h4>
    		<ol>
    			<li class="cal-disp-onshow">
    				<section>
    					<h5><a href="http://www.ec.gc.ca" rel="external">Event 1</a></h5>
    					<p><time datetime="2013-03-11">March 11th, 2013</time></p>
    				</section>
    			</li>
    			<li class="cal-disp-onshow">
    				...
    			</li>
    			...
    		</ol>
    	</section>
    </div>

## Out of range from today

The calendar are initiated depending of today date and the date range of events. The starting date can be forced by configuring the plugin like: `data-wb-calevt='{"year": 2003, "month": 4}'` (See the Fluid-width Calendar example)

### Past events

Start at the oldest date.

1. #### Single-Day Event

   March 11th, 2003

   Event Description

2. #### Multi-Day Event

   March 22nd, 2001 to April 26th, 2003

   Event Description

#### Code

View 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">Single-Day Event</a></h4>
    				<p><time datetime="2003-03-11">March 11th, 2003</time></p>
    				<p>Event Description</p>
    			</section>
    		</li>
    		<li>
    			...
    		</li>
    		...
    	</ol>
    </div>

### Past and future events

Start at Today date

1. #### Single-Day Event

   March 11th, 2003

   Event Description

2. #### Single-Day Event

   March 11th, 2026

   Event Description

#### Code

View 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">Single-Day Event</a></h4>
    				<p><time datetime="2003-03-11">March 11th, 2003</time></p>
    				<p>Event Description</p>
    			</section>
    		</li>
    		<li>
    			<section>
    				<h4><a href="http://www.canada.ca" rel="external">Single-Day Event</a></h4>
    				<p><time datetime="2026-03-11">March 11th, 2026</time></p>
    				<p>Event Description</p>
    			</section>
    		</li>
    		<li>
    			...
    		</li>
    		...
    	</ol>
    </div>

### Future events

Start at the lowest date.

1. #### Single-Day Event

   March 11th, 2226

   Event Description

2. #### Multi-Day Event

   March 22nd, 2225 to April 26th, 2226

   Event Description

#### Code

View 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">Single-Day Event</a></h4>
    				<p><time datetime="2226-03-11">March 11th, 2226</time></p>
    				<p>Event Description</p>
    			</section>
    		</li>
    		<li>
    			...
    		</li>
    		...
    	</ol>
    </div>

Date modified:
  2014-07-21