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).
-
Single-Day Event
Event Description
-
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="https://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.
-
Single-Day Event
Event Description
Links:
-
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="https://www.canada.ca" rel="external">Single-Day Event Link 1</a></li>
<li><a href="https://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="https://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="https://www.canada.ca" rel="external">Ajax 2 - Single-Day Event Link 1</a></li>
<li><a href="https://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="https://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
-
Event 1
-
Event 2
-
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
-
Event 4
-
Event 6
-
Event 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="https://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
-
Event 1
-
Event 2
-
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
-
Event 4
-
Event 6
-
Event 7
-
Event 17
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="https://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.
-
Single-Day Event
Event Description
-
Multi-Day Event
to
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="https://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
-
Single-Day Event
Event Description
-
Single-Day Event
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="https://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="https://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.
-
Single-Day Event
Event Description
-
Multi-Day Event
to
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="https://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: