Events calendar (Calendar interface) - nschonni/wet-boew GitHub Wiki
Project Lead: Stephane Berube (@berubs)
This feature provides an interface for navigating a chronological list of events.
This feature can be used on any page where displaying a list of events in a calendar format is needed.
- 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. - Include in the div element a ordered list of events (ol element) with the following structure for each event:
- The list element must start with a heading element (h2 to h6, depending on the context of the page).
- The heading element must include a link to the event description with the event title for the link text.
- 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.
- 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.
<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>
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>
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>
The code for the event calendar is located in several places within the source folder of WET:
- js/workers/eventscalendar.js - JavaScript code for the events calendar
- js/sass/events-calendar.scss - CSS for the events calendar
- js/dependencies/calendar.js - JavaScript code for the calendar library
- js/sass/calendar-base.scss - Base CSS for the calendar library
- js/sass/calendar-theme.scss - Theme CSS for the calendar library
- js/images/calendar/ - Images for the calendar library
There are no known technical issues at this point in time.
Business rules need to be documented that reflect the appropriate scenarios of use.
Feel free to suggest feature/enhancements in the issue tracker.