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

Code

View code 
<div id="calendar1"></div>

<div class="wb-calevt" data-calevt-src="calendar1">
	<ul>
		<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>
		...
	</ul>
</div>

Details Linking

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

Code

View code 
<div id="calendar2"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="calendar2">
	<ul>
		<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>
		...
	</ul>
</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">
	<ul data-calevt="ajax/cal-include1-en.html ajax/cal-include2-en.html ajax/cal-include3-en.html"></ul>
</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>
		<ul>
			<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>
			...
		</ul>
	</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>
		<ul>
			<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>
			...
		</ul>
	</section>
</div>

    Exclude items

    In this example, some items are hidden in the list and in the calendar widget by using the wb-fltr-out CSS class.

    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="cal-exclude"></div>

<div class="wb-calevt evt-anchor" data-calevt-src="cal-exclude">
	<section>
		<h4>Events List 1</h4>
		<ul>
			<li>
				<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>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 2</a></h5>
					<p><time datetime="2013-03-11">March 11th, 2013</time></p>
				</section>
			</li>
			<li class="wb-fltr-out">
				<section>
					<h5>World Expo Shanghai (Shanghai, China)</h5>
					<p><time datetime="2013-03-22">March 22nd, 2013</time> to <time datetime="2013-04-26">April 26th, 2013</time></p>
					<p>The Canada Pavilion celebrates the vibrancy and the vitality of Canadian communities and the people within them.</p>
					<p>For more information about Canada at Expo 2010 Shanghai, visit: <a href="https://www.expo2010canada.gc.ca/index-eng.cfm" rel="external">www.expo2010canada.gc.ca/index-eng.cfm</a></p>
				</section>
			</li>
			<li class="wb-fltr-out">
				<section>
					<h5><a href="https://www.ic.gc.ca" rel="external">Event 4</a></h5>
					<p><time datetime="2013-03-24">March 24th, 2013</time></p>
				</section>
			</li>
			<li class="wb-fltr-out">
				<section>
					<h5><a href="https://www.ec.gc.ca" rel="external">Event 6</a></h5>
					<p><time datetime="2013-04-11">April 11th, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 7</a></h5>
					<p><time datetime="2013-04-23">April 23rd, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 17</a></h5>
					<p><time datetime="2013-04-23">April 23rd, 2013</time></p>
				</section>
			</li>
		</ul>
	</section>
</div>

    Calendar date range

    By default, the calendar's date range is set based on the date range of source events. This can be overridden by configuring minimum and/or maximum dates via data-calevt-min-date and data-calevt-max-date, each of which takes a YYYY-MM-DD date time string.

    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="cal-daterange"></div>

<div class="wb-calevt evt-anchor" data-calevt-src="cal-daterange" data-calevt-min-date="2013-02-01" data-calevt-max-date="2013-05-01">
	<section>
		<h4>Events List 1</h4>
		<ul>
			<li>
				<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>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 2</a></h5>
					<p><time datetime="2013-03-11">March 11th, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5>World Expo Shanghai (Shanghai, China)</h5>
					<p><time datetime="2013-03-22">March 22nd, 2013</time> to <time datetime="2013-04-26">April 26th, 2013</time></p>
					<p>The Canada Pavilion celebrates the vibrancy and the vitality of Canadian communities and the people within them.</p>
					<p>For more information about Canada at Expo 2010 Shanghai, visit: <a href="https://www.expo2010canada.gc.ca/index-eng.cfm" rel="external">www.expo2010canada.gc.ca/index-eng.cfm</a></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.ic.gc.ca" rel="external">Event 4</a></h5>
					<p><time datetime="2013-03-24">March 24th, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.ec.gc.ca" rel="external">Event 6</a></h5>
					<p><time datetime="2013-04-11">April 11th, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 7</a></h5>
					<p><time datetime="2013-04-23">April 23rd, 2013</time></p>
				</section>
			</li>
			<li>
				<section>
					<h5><a href="https://www.canada.ca" rel="external">Event 17</a></h5>
					<p><time datetime="2013-04-23">April 23rd, 2013</time></p>
				</section>
			</li>
		</ul>
	</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 uldest date.

    Code

    View code 
    <div id="calevt-out-1"></div>

<div class="wb-calevt" data-calevt-src="calevt-out-1">
	<ul>
		<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>
		...
	</ul>
</div>

    Past and future events

    Start at Today date

    Code

    View code 
    <div id="calevt-out-3"></div>

<div class="wb-calevt" data-calevt-src="calevt-out-3">
	<ul>
		<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>
		...
	</ul>
</div>

    Future events

    Start at the lowest date.

    Code

    View code 
    <div id="calevt-out-2"></div>

<div class="wb-calevt" data-calevt-src="calevt-out-2">
	<ul>
		<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>
		...
	</ul>
</div>
    Date modified: