---
{
	"title": "Calendar of Events",
	"language": "en",
	"category": "Plugins",
	"description": "Dynamically generates a calendar interface for navigating a list of events.",
	"tag": "cal-events",
	"parentdir": "cal-events",
	"altLangPrefix": "cal-events",
	"dateModified": "2014-07-21"
}
---
<span class="wb-prettify all-pre"></span>

<section>
	<h2>Linking Options</h2>
	<section>
		<h3>Direct Linking</h3>
		<p>In this method, the calendar links to the first link in each event (usually in the event heading).</p>

		<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>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Multi-Day Event</a></h4>
						<p><time datetime="2013-03-22">March 22nd, 2013</time> to <time datetime="2013-04-26">April 26th, 2013</time></p>
						<p>Event Description</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calendar1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calendar1&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;March 11th, 2013&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			...
		&lt;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3>Details Linking</h3>
		<p>In this method, the calendar links to the details of the event. This is used when an event has multiple links.</p>

		<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>
					<section>
						<h4>Multi-Day Event</h4>
						<p><time datetime="2013-03-22">March 22nd, 2013</time> to <time datetime="2013-04-26">April 26th, 2013</time></p>
						<p>Event Description</p>
						<p>Links:</p>
						<ul>
							<li><a href="https://www.canada.ca" rel="external">Multi-Day Event Link 1</a></li>
							<li><a href="https://www.canada.ca" rel="external">Multi-Day Event Link 2</a></li>
						</ul>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calendar2&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;wb-calevt evt-anchor&quot; data-calevt-src=&quot;calendar2&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;Single-Day Event&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;March 11th, 2013&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
				&lt;p&gt;Links:&lt;/p&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event Link 1&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event Link 2&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			...
		&lt;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section>
		<h3>Ajax Events</h3>
		<p>In this method, events are pulled from a remote source.</p>

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

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<section>
					<h5>In-page HTML</h5>
					<pre><code>&lt;div id=&quot;cal-ajax&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt evt-anchor&quot; data-calevt-src=&quot;cal-ajax&quot;&gt;
	&lt;ol data-calevt=&quot;ajax/cal-include1-en.html ajax/cal-include2-en.html ajax/cal-include3-en.html&quot;&gt;&lt;/ol&gt;
&lt;/div&gt;</code></pre>
				</section>

				<section>
					<h5>cal-include1-en.html</h5>
					<pre><code>&lt;li&gt;
	&lt;section&gt;
		&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 1 - Single-Day Event&lt;/a&gt;&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;Ajax 1 - March 11th, 2013&lt;/time&gt;&lt;/p&gt;
		&lt;p&gt;Event Description&lt;/p&gt;
	&lt;/section&gt;
&lt;/li&gt;
&lt;li&gt;
	...
&lt;/li&gt;
...</code></pre>
				</section>

				<section>
					<h5>cal-include2-en.html</h5>
					<pre><code>&lt;li&gt;
	&lt;section&gt;
		&lt;h4&gt;Ajax 2 - Single-Day Event&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;March 11th, 2013&lt;/time&gt;&lt;/p&gt;
		&lt;p&gt;Event Description&lt;/p&gt;
		&lt;p&gt;Links:&lt;/p&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 2 - Single-Day Event Link 1&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Ajax 2 - Single-Day Event Link 2&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;
&lt;/li&gt;
&lt;li&gt;
	...
&lt;/li&gt;
...</code></pre>
				</section>

				<section>
					<h5>cal-include3-en.html</h5>
					<pre><code>&lt;li class="calendar-display-onshow"&gt;
	&lt;section&gt;
		&lt;h4&gt;&lt;a href="https://www.ec.gc.ca" rel="external"&gt;Ajax 3 - Event 1&lt;/a&gt;&lt;/h4&gt;
		&lt;p&gt;&lt;time datetime="2013-03-11"&gt;March 11th, 2013&lt;/time&gt;&lt;/p&gt;
	&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
	...
&lt;/li&gt;
...</code></pre>
				</section>
			</details>
		</section>
	</section>
</section>

<section>
	<h2>Display Options</h2>
	<section>
		<h3>List Filtering</h3>
		<p>This option filters out events from the list that are not for the current month. Enable this option by adding the <code>cal-disp-onshow</code> class to each event that should be filtered by month.</p>
		<p>Events that do not have the <em>cal-disp-onshow</em> class will always be visible.</p>

		<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">
						<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="cal-disp-onshow">
						<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="cal-disp-onshow">
						<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="cal-disp-onshow">
						<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 class="cal-disp-onshow">
						<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 class="cal-disp-onshow">
						<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>
				</ol>
			</section>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calendar3&quot;&gt;&lt;/div&gt;

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

	<section>
		<h3>Fluid-width Calendar</h3>

		<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">
						<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="cal-disp-onshow">
						<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="cal-disp-onshow">
						<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="cal-disp-onshow">
						<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 class="cal-disp-onshow">
						<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 class="cal-disp-onshow">
						<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>
				</ol>
			</section>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calendar4&quot; class=&quot;cal-cnt-fluid&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;wb-calevt evt-anchor&quot; data-wb-calevt='{"year": 2013, "month": 2}' data-calevt-src=&quot;calendar4&quot;&gt;
	&lt;section&gt;
		&lt;h4&gt;Events List 1&lt;/h4&gt;
		&lt;ol&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				&lt;section&gt;
					&lt;h5&gt;&lt;a href=&quot;https://www.ec.gc.ca&quot; rel=&quot;external&quot;&gt;Event 1&lt;/a&gt;&lt;/h5&gt;
					&lt;p&gt;&lt;time datetime=&quot;2013-03-11&quot;&gt;March 11th, 2013&lt;/time&gt;&lt;/p&gt;
				&lt;/section&gt;
			&lt;/li&gt;
			&lt;li class=&quot;cal-disp-onshow&quot;&gt;
				...
			&lt;/li&gt;
			...
		&lt;/ol&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>
</section>

<section>
	<h2>Out of range from today</h2>

	<p>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: <code>data-wb-calevt='{"year": 2003, "month": 4}'</code> (See the Fluid-width Calendar example)</p>
	<div class="row">
	<section class="col-md-4">
		<h3>Past events</h3>
		<p>Start at the oldest date.</p>
		<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>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Multi-Day Event</a></h4>
						<p><time datetime="2001-03-22">March 22nd, 2001</time> to <time datetime="2003-04-26">April 26th, 2003</time></p>
						<p>Event Description</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-1&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-1&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2003-03-11&quot;&gt;March 11th, 2003&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			...
		&lt;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section class="col-md-4">
		<h3>Past and future events</h3>
		<p>Start at Today date</p>
		<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>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-3&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-3&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2003-03-11&quot;&gt;March 11th, 2003&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2026-03-11&quot;&gt;March 11th, 2026&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			...
		&lt;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>

	<section class="col-md-4">
		<h3>Future events</h3>
		<p>Start at the lowest date.</p>
		<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>
					<section>
						<h4><a href="https://www.canada.ca" rel="external">Multi-Day Event</a></h4>
						<p><time datetime="2225-03-22">March 22nd, 2225</time> to <time datetime="2226-04-26">April 26th, 2226</time></p>
						<p>Event Description</p>
					</section>
				</li>
			</ol>
		</div>

		<section>
			<h4>Code</h4>
			<details class="mrgn-bttm-md">
				<summary>View code</summary>
				<pre><code>&lt;div id=&quot;calevt-out-2&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;wb-calevt&quot; data-calevt-src=&quot;calevt-out-2&quot;&gt;
	&lt;ol&gt;
		&lt;li&gt;
			&lt;section&gt;
				&lt;h4&gt;&lt;a href=&quot;https://www.canada.ca&quot; rel=&quot;external&quot;&gt;Single-Day Event&lt;/a&gt;&lt;/h4&gt;
				&lt;p&gt;&lt;time datetime=&quot;2226-03-11&quot;&gt;March 11th, 2226&lt;/time&gt;&lt;/p&gt;
				&lt;p&gt;Event Description&lt;/p&gt;
			&lt;/section&gt;
		&lt;/li&gt;
		&lt;li&gt;
			...
		&lt;/li&gt;
		...
	&lt;/ol&gt;
&lt;/div&gt;</code></pre>
			</details>
		</section>
	</section>
	</div>
</section>