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

      Event Description

    2. 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="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

      Event Description

    2. 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="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

      Event Description

    2. 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="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: