Events calendar (Calendar interface) - nschonni/wet-boew GitHub Wiki

français

This feature dynamically generates a calendar interface for navigating a list of events

Table of Contents

Overview

Project Lead: Stephane Berube (@berubs)

Description

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 id="calendar1"></div>
<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

There are no known technical issues at this point in time.

Business rules need to be documented that reflect the appropriate scenarios of use.

Future

Feel free to suggest feature/enhancements in the issue tracker.

Version History

Related Pages

⚠️ **GitHub.com Fallback** ⚠️