Calendar of Events

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: