/
cal-events-en.hbs
214 lines (202 loc) · 9.12 KB
/
cal-events-en.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
---
{
"title": "Calendar of Events",
"language": "en",
"category": "Plugins",
"categoryfile": "plugins",
"description": "Dynamically generates a calendar interface for navigating a list of events.",
"altLangPrefix": "cal-events",
"dateModified": "2014-08-06"
}
---
<span class="wb-prettify all-pre hide"></span>
<section>
<h2>Purpose</h2>
<p>This feature provides an interface for navigating a chronological list of events. Implements the <a href="http://www.w3.org/TR/wai-aria-practices/#datepicker">WAI-ARIA Date Picker design pattern</a>.</p>
</section>
<section>
<h2>Use when</h2>
<p>This feature can be used on any page where displaying a list of events in a calendar format is needed.</p>
</section>
<section>
<h2>Working example</h2>
<ul>
<li><a href="../../../demos/cal-events/cal-events-en.html">English example</a></li>
<li><a href="../../../demos/cal-events/cal-events-fr.html">French example</a></li>
</ul>
</section>
<section>
<h2>How to implement</h2>
<ol>
<li>Add a div element to the Web page with a <code>class</code> attribute containing "wb-calevt" and a unique name in a <code>data-calevt-src</code> attribute (e.g.: <code><div class="wb-calevt" data-calevt-src="unique-name"></div></code>).</li>
<li>Include in the div element a ordered list of events (ol element) with the following structure for each event:
<ol>
<li>The list element must start with a heading element (<code>h2</code> to <code>h6</code>, depending on the context of the page).</li>
<li>The heading element must include a link to the event description with the event title for the link text.</li>
<li>The event date must be provided in an HTML5 <code>time</code> element contained within a paragraph element (following the heading element). The date to be displayed is contained in the <code>time</code> element and an ISO-8601 date (e.g., 2010-03-11) is provided in the <code>datetime</code> attribute.</li>
</ol>
</li>
<li>Add a second <code>div</code> element to the Web page with an <code>id</code> attribute containing your <code>data-calevt-src</code> attribute's unique name from above (e.g., <code><div id="unique-name"></div></code>). This will hold the calendar interface.</li>
</ol>
<h3>Example Code</h3>
<pre><code><div id="calendar1"></div>
<div class="wb-calevt" data-calevt-src="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></code></pre>
<section>
<h3>Details Linking</h3>
<p>In this method, the calendar links to the details of the event. This is used when an event has multiple links.</p>
<pre><code><div id="calendar2"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="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></code></pre>
</section>
<section>
<h3>List Filtering</h3>
<p>This option filters out events from the list that are not for the current month. Enable this option by adding the <code>cal-disp-onshow</code> class to each event that should be filtered by month.</p>
<p>Events that do not have the <code>cal-disp-onshow</code> class will always be visible.</p>
<pre><code><div id="calendar3"></div>
<div class="wb-calevt evt-anchor" data-calevt-src="calendar3">
<section>
<h4>Events List 1</h4>
<ol>
<li class="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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="cal-disp-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></code></pre>
</section>
</section>
<section>
<h2>Events</h2>
<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Trigger</th>
<th>What it does</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>wb-init.wb-calevt</code></td>
<td>Triggered manually (e.g., <code>$elm.trigger( "wb-init.wb-calevt" );</code>).</td>
<td>Used to manually initialize the Calendar of events plugin. <strong>Note:</strong> The Calendar of events plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
</tr>
<tr>
<td><code>wb-ready.wb-calevt</code> (v4.0.5+)</td>
<td>Triggered automatically after a calendar of events initializes.</td>
<td>Used to identify which calendar of events was initialized (target of the event)
<pre><code>$( document ).on( "wb-ready.wb-calevt", ".wb-calevt", function( event ) {
});</code></pre>
<pre><code>$( ".wb-calevt" ).on( "wb-ready.wb-calevt", function( event ) {
});</code></pre>
</td>
</tr>
<tr>
<td><code>wb-updated.wb-calevt</code> (v4.0.5+)</td>
<td>Triggered automatically each time the calendar of events is updated (e.g., month changed).</td>
<td>Used to identify which calendar of events was updated (target of the event)
<pre><code>$( document ).on( "wb-updated.wb-calevt", ".wb-calevt", function( event ) {
});</code></pre>
<pre><code>$( ".wb-calevt" ).on( "wb-updated.wb-calevt", function( event ) {
});</code></pre>
</td>
</tr>
<tr>
<td><code>wb-ready.wb</code> (v4.0.5+)</td>
<td>Triggered automatically when WET has finished loading and executing.</td>
<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Source code</h2>
<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/cal-events">Source code for the calendar of events</a></p>
</section>