Calendar of Events

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

This feature provides an interface for navigating a chronological list of events. Implements the WAI-ARIA Date Picker design pattern.

Use when

This feature can be used on any page where displaying a list of events in a calendar format is needed.

Working example

How to implement

  1. Add a div element to the Web page with a class attribute containing "wet-boew-calendar-events" and a unique class name (e.g.: 
    <div class="wet-boew-calendar-events unique-class"></div>
    ).
    Note: your unique class must be the last class in the list.
  2. Include in the div element a ordered list of events (ol element) with the following structure for each event:
    1. The list element must start with a heading element (h2 to h6, depending on the context of the page).
    2. The heading element must include a link to the event description with the event title for the link text.
    3. The event date must be provided in an HTML5 time element contained within a paragraph element (following the heading element). The date to be displayed is contained in the time element and an ISO-8601 date (e.g., 2010-03-11) is provided in the datetime attribute.
  3. Add a second div element to the Web page with an id attribute containing your unique class name from above (e.g., <div id="unique-class"></div>). This will hold the calendar interface.

Example Code

<div class="wet-boew-eventscalendar calendar1">
    <ol>
        <li>
            <section>
                <h4><a href="http://www.canada.gc.ca">Single-Day Event</a></h4>
                <p><time datetime="2011-03-11">March 11th 2011</time></p>
                <p>Event Description</p>
            </section>
        </li>
        <li>
            <section>
                <h4><a href="http://www.canada.gc.ca">Multi-Day Event</a></h4>
                <p><time datetime="2011-03-22">March 22nd, 2011</time> to <time datetime="2011-04-26">April 26th, 2011</time></p>
                <p>Event Description</p>
            </section>
        </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.

<div id="calendar2"></div>
<div class="wet-boew-eventscalendar event-anchoring calendar2">
    <ol>
        <li>
            <section>
                <h4>Single-Day Event</h4>
                <p><time datetime="2011-03-11">March 11th 2011</time></p>
                <p>Event Description</p>
                <p>Links:</p>
                <ul>
                    <li><a href="http://www.canada.gc.ca">Single-Day Event Link 1</a></li>
                    <li><a href="http://www.canada.gc.ca">Single-Day Event Link 2</a></li>
                </ul>
            </section>
        </li>
        <li>
            <section>
                <h4>Multi-Day Event</h4>
                <p><time datetime="2011-03-22">March 22nd, 2011</time> to <time datetime="2011-04-26">April 26th, 2011</time></p>
                <p>Event Description</p>
                <p>Links:</p>
                <ul>
                    <li><a href="http://www.canada.gc.ca">Multi-Day Event Link 1</a></li>
                    <li><a href="http://www.canada.gc.ca">Multi-Day Event Link 2</a></li>
                </ul>
            </section>
        </li>
    </ol>
</div>

List Filtering

This option filters out events from the list that are not for the current month. Enable this option by adding the calendar-display-onshow class to each event that should be filtered by month.

Events that do not have the calendar-display-onshow class will always be visible.

<div id="calendar3"></div>
<div class="wet-boew-eventscalendar event-anchoring calendar3">
    <section>
        <h4>Events List 1</h4>
        <ol>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://www.ec.gc.ca">Event 1</a></h5>
                    <p><time datetime="2011-03-11">March 11th 2011</time></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://canada.gc.ca">Event 2</a></h5>
                    <p><time datetime="2011-03-11">March 11th 2011</time></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5>World Expo Shanghai (Shanghai, China)</h5>
                    <p><time datetime="2011-03-22">March 22nd, 2011</time> to <time datetime="2011-04-26">April 26th, 2011</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="http://www.expo2010canada.gc.ca/index-eng.cfm">www.expo2010canada.gc.ca/index-eng.cfm</a></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://gcpedia.gc.ca">Event 4</a></h5>
                    <p><time datetime="2011-03-24">March 24th 2011</time></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://www.ec.gc.ca">Event 6</a></h5>
                    <p><time datetime="2011-04-11">April 11th 2011</time></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://canada.gc.ca">Event 7</a></h5>
                    <p><time datetime="2011-04-23">April 23rd 2011</time></p>
                </section>
            </li>
            <li class="calendar-display-onshow">
                <section>
                    <h5><a href="http://canada.gc.ca">Event 17</a></h5>
                    <p><time datetime="2011-04-23">April 23rd 2011</time></p>
                </section>
            </li>
        </ol>
    </section>
</div>

Events

Event Trigger What it does
wb-init.wb-calevt Triggered manually (e.g., $elm.trigger( "wb-init.wb-calevt" );). Used to manually initialize the Calendar of events plugin. Note: The Calendar of events plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-calevt (v4.0.5+) Triggered automatically after a calendar of events initializes. Used to identify which calendar of events was initialized (target of the event) 
$( document ).on( "wb-ready.wb-calevt", ".wb-calevt", function( event ) {
});
$( ".wb-calevt" ).on( "wb-ready.wb-calevt", function( event ) {
});
wb-updated.wb-calevt (v4.0.5+) Triggered automatically each time the calendar of events is updated (e.g., month changed). Used to identify which calendar of events was updated (target of the event) 
$( document ).on( "wb-updated.wb-calevt", ".wb-calevt", function( event ) {
});
$( ".wb-calevt" ).on( "wb-updated.wb-calevt", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Source code for the calendar of events

Date modified: