Calendar of Events

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

    Event Description

  2. Multi-Day Event

    to

    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

    Event Description

    Links:

  2. Multi-Day Event

    to

    Event Description

    Links:

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

    2. Event 2

    3. World Expo Shanghai (Shanghai, China)

      to

      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

    5. Event 6

    6. Event 7

    7. Event 17

    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

    2. Event 2

    3. World Expo Shanghai (Shanghai, China)

      to

      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

    5. Event 6

    6. Event 7

    7. Event 17

    Code

    View code 
    <div id="calendar4" class="cal-cnt-fluid"></div>
<div class="wb-calevt evt-anchor" 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>
    Date modified: