Events calendar

Overview

Project Lead: Stephane Berube (@berubs)

Purpose

This feature provides an interface for navigating a chronological list of events.

Use When

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

Implementation

  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.

Code example:

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

Examples

Development

The code for the event calendar is located in several places within the source folder of WET:

Known Issues

None at this time.

Version History

Related Pages