|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Calendar</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Calendar</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p> |
|
|
32 |
<img src="../assets/calendar/calendar.png" alt="Screenshot of the Calendar widget" style="border: 1px solid #bfbfbf; float:right; height:161px; margin: 0 0 8px 8px; width:272px;"> |
|
|
33 |
The Calendar widget is a visual representation of a range of dates in blocks of one or more months, which allows the user to select dates and navigate the date range.</p> |
|
|
34 |
|
|
|
35 |
<p> |
|
|
36 |
In addition to the core logic for displaying a date range and allowing date selection and navigation, Calendar also provides options for custom date filtering, custom formatting of individual dates, various display options, internationalization, flexible templates, additional navigation plugins, and more. |
|
|
37 |
</p> |
|
|
38 |
|
|
|
39 |
<p> |
|
|
40 |
Calendar is highly modular and easy to extend so that it can be modified or used as the basis for custom implementations and widgets. |
|
|
41 |
</p> |
|
|
42 |
</div> |
|
|
43 |
|
|
|
44 |
<h2 id="getting-started">Getting Started</h2> |
|
|
45 |
|
|
|
46 |
<p> |
|
|
47 |
To include the source files for Calendar and its dependencies, first load |
|
|
48 |
the YUI seed file if you haven't already loaded it. |
|
|
49 |
</p> |
|
|
50 |
|
|
|
51 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
52 |
|
|
|
53 |
|
|
|
54 |
<p> |
|
|
55 |
Next, create a new YUI instance for your application and populate it with the |
|
|
56 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
57 |
YUI will automatically load any dependencies required by the modules you |
|
|
58 |
specify. |
|
|
59 |
</p> |
|
|
60 |
|
|
|
61 |
<pre class="code prettyprint"><script> |
|
|
62 |
// Create a new YUI instance and populate it with the required modules. |
|
|
63 |
YUI().use('calendar', function (Y) { |
|
|
64 |
// Calendar is available and ready for use. Add implementation |
|
|
65 |
// code here. |
|
|
66 |
}); |
|
|
67 |
</script></pre> |
|
|
68 |
|
|
|
69 |
|
|
|
70 |
<p> |
|
|
71 |
For more information on creating YUI instances and on the |
|
|
72 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
73 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
74 |
</p> |
|
|
75 |
|
|
|
76 |
|
|
|
77 |
<h2 id="using-calendar">Using Calendar</h2> |
|
|
78 |
<h3 id="quick-start">Quick Start</h3> |
|
|
79 |
|
|
|
80 |
<p> |
|
|
81 |
Here's an easy way to create an instance of a Calendar with just a few lines of code. |
|
|
82 |
</p> |
|
|
83 |
|
|
|
84 |
<h4 id="html">HTML</h4> |
|
|
85 |
<p> |
|
|
86 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
87 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
88 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
89 |
</p> |
|
|
90 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
91 |
|
|
|
92 |
<h4 id="javascript">JavaScript</h4> |
|
|
93 |
<pre class="code prettyprint">YUI().use('calendar', function (Y) { |
|
|
94 |
|
|
|
95 |
// Create a new instance of Calendar, setting its width |
|
|
96 |
// and height, allowing the dates from the previous |
|
|
97 |
// and next month to be visible and setting the initial |
|
|
98 |
// date to be November, 1982. |
|
|
99 |
var calendar = new Y.Calendar({ |
|
|
100 |
contentBox: "#mycalendar", |
|
|
101 |
height:'200px', |
|
|
102 |
width:'600px', |
|
|
103 |
showPrevMonth: true, |
|
|
104 |
showNextMonth: true, |
|
|
105 |
date: new Date(1982,11,1)}).render(); |
|
|
106 |
|
|
|
107 |
});</pre> |
|
|
108 |
|
|
|
109 |
|
|
|
110 |
<p> |
|
|
111 |
For a more complete discussion of how to use, configure, and customize Calendar, read on. |
|
|
112 |
</p> |
|
|
113 |
|
|
|
114 |
<h3 id="configuring-calendar">Configuring Calendar</h3> |
|
|
115 |
|
|
|
116 |
<p> |
|
|
117 |
Except for <code>contentBox</code>, all configuration attributes are optional. This list only contains the most interesting attributes. For a complete list of all attributes, please refer to the <a href="http://yuilibrary.com/yui/docs/api/Calendar.html">API docs</a>. |
|
|
118 |
</p> |
|
|
119 |
|
|
|
120 |
<h4 id="calendarbase-config-attributes">CalendarBase Config Attributes</h4> |
|
|
121 |
|
|
|
122 |
<p> |
|
|
123 |
These attributes are provided by <code>CalendarBase</code>, which is the core foundation for the Calendar widget. They are available on all Calendar instances. |
|
|
124 |
</p> |
|
|
125 |
|
|
|
126 |
<table> |
|
|
127 |
<thead> |
|
|
128 |
<tr> |
|
|
129 |
<th>Attribute</th> |
|
|
130 |
<th>Default</th> |
|
|
131 |
<th>Description</th> |
|
|
132 |
</tr> |
|
|
133 |
</thead> |
|
|
134 |
<tbody> |
|
|
135 |
<tr> |
|
|
136 |
<td><code>width</code></td> |
|
|
137 |
<td><code>300px</code></td> |
|
|
138 |
<td> |
|
|
139 |
The width of the calendar widget. |
|
|
140 |
</td> |
|
|
141 |
</tr> |
|
|
142 |
<tr> |
|
|
143 |
<td><code>height</code></td> |
|
|
144 |
<td><code>200px</code></td> |
|
|
145 |
<td> |
|
|
146 |
The height of the calendar widget. |
|
|
147 |
</td> |
|
|
148 |
</tr> |
|
|
149 |
<tr> |
|
|
150 |
<td><code>date</code></td> |
|
|
151 |
<td>Today's date on the user's system</td> |
|
|
152 |
<td> |
|
|
153 |
The date corresponding to the month and the year to be displayed. The date assigned to this attribute will always be normalized to the noon on the first of the month. In a multi-pane calendar, the month and the year of the first pane will correspond to this date. |
|
|
154 |
</td> |
|
|
155 |
</tr> |
|
|
156 |
<tr> |
|
|
157 |
<td><code>customRenderer</code></td> |
|
|
158 |
<td><code>null</code></td> |
|
|
159 |
<td> |
|
|
160 |
An object containing a <code>rules</code> attribute and a <code>filterFunction</code> attribute. See the <a href="#custom-rendering">Custom Rendering</a> section for details on how these attributes work. |
|
|
161 |
</td> |
|
|
162 |
</tr> |
|
|
163 |
<tr> |
|
|
164 |
<td><code>showPrevMonth</code></td> |
|
|
165 |
<td><code>false</code></td> |
|
|
166 |
<td> |
|
|
167 |
Whether the dates from the previous month should be shown in the empty cells of the month grid before the first of the month (if there are any). |
|
|
168 |
</td> |
|
|
169 |
</tr> |
|
|
170 |
<tr> |
|
|
171 |
<td><code>showNextMonth</code></td> |
|
|
172 |
<td><code>false</code></td> |
|
|
173 |
<td> |
|
|
174 |
Whether the dates from the next month should be shown in the empty cells of the month grid after the last of the month (if there are any). |
|
|
175 |
</td> |
|
|
176 |
</tr> |
|
|
177 |
<tr> |
|
|
178 |
<td><code>headerRenderer</code></td> |
|
|
179 |
<td><code>"%B %Y"</code></td> |
|
|
180 |
<td> |
|
|
181 |
The formatting for the header of the Calendar. This attribute can be either a String with the formatting tokens used by the <code>strftime</code> specification, or a callback function that will receive a <code>Date</code> object as an argument and output a <code>String</code>. |
|
|
182 |
</td> |
|
|
183 |
</tr> |
|
|
184 |
</tbody> |
|
|
185 |
</table> |
|
|
186 |
|
|
|
187 |
<h4 id="calendar-config-attributes">Calendar Config Attributes</h4> |
|
|
188 |
|
|
|
189 |
<p> |
|
|
190 |
These attributes are provided by <code>Calendar</code>, which is the complete implementation of Calendar widget that includes user interactivity (navigation and selection). They are available on all instances of <code>Calendar</code>. |
|
|
191 |
</p> |
|
|
192 |
|
|
|
193 |
<table> |
|
|
194 |
<thead> |
|
|
195 |
<tr> |
|
|
196 |
<th>Attribute</th> |
|
|
197 |
<th>Default</th> |
|
|
198 |
<th>Description</th> |
|
|
199 |
</tr> |
|
|
200 |
</thead> |
|
|
201 |
<tbody> |
|
|
202 |
<tr> |
|
|
203 |
<td><code>selectionMode</code></td> |
|
|
204 |
<td><code>single</code></td> |
|
|
205 |
<td> |
|
|
206 |
The configuration for the type of date selection allowed by the calendar. The <code>selectionMode</code> can be either <code>"single"</code>, <code>"multiple"</code> or <code>"multiple-sticky"</code>. |
|
|
207 |
</td> |
|
|
208 |
</tr> |
|
|
209 |
<tr> |
|
|
210 |
<td><code>minimumDate</code></td> |
|
|
211 |
<td><code>null</code></td> |
|
|
212 |
<td> |
|
|
213 |
Specification for the earliest month which the Calendar will display. In a multi-pane calendar, this is the earliest month that will appear in the first pane. |
|
|
214 |
</td> |
|
|
215 |
</tr> |
|
|
216 |
<tr> |
|
|
217 |
<td><code>maximumDate</code></td> |
|
|
218 |
<td><code>null</code></td> |
|
|
219 |
<td> |
|
|
220 |
Specification for the latest month which the Calendar will display. In a multi-pane calendar, this is the latest month that will appear in the last pane. |
|
|
221 |
</td> |
|
|
222 |
</tr> |
|
|
223 |
<tr> |
|
|
224 |
<td><code>enabledDatesRule</code></td> |
|
|
225 |
<td><code>null</code></td> |
|
|
226 |
<td> |
|
|
227 |
The name of the rule that should be matched by enabled dates. If specified, a <code>customRenderer</code> definition is required (see <a href="#custom-rendering">Custom Rendering</a> for more information). Only dates matching the rule will be enabled for interaction; all other dates will be disabled. Cannot be specified simultaneously with the <code>disabledDatesRule</code> attribute. |
|
|
228 |
</td> |
|
|
229 |
</tr> |
|
|
230 |
<tr> |
|
|
231 |
<td><code>disabledDatesRule</code></td> |
|
|
232 |
<td><code>null</code></td> |
|
|
233 |
<td> |
|
|
234 |
The name of the rule that should be matched by disabled dates. If specified, a <code>customRenderer</code> definition is required (see <a href="#custom-rendering">Custom Rendering</a> for more information). Only dates not matching the rule will be enabled for interaction; all other dates will be disabled. Cannot be specified simultaneously with the <code>enabledDatesRule</code> attribute. |
|
|
235 |
</td> |
|
|
236 |
</tr> |
|
|
237 |
</tbody> |
|
|
238 |
</table> |
|
|
239 |
|
|
|
240 |
<h3 id="custom-rendering">Custom Rendering</h3> |
|
|
241 |
|
|
|
242 |
<p> |
|
|
243 |
Calendar allows the developer to customize the rendering of individual cells based on a set of rules that match |
|
|
244 |
specific dates. To create a set of custom rules and a custom renderer function that is triggered when a rule is matched, set the <code>customRenderer</code> property to an <code>Object</code> with two keys: <code>rules</code> and <code>filterFunction</code>: |
|
|
245 |
</p> |
|
|
246 |
<pre class="code prettyprint">calendar.set("customRenderer", {rules: myRules, |
|
|
247 |
filterFunction: myFilterFunction});</pre> |
|
|
248 |
|
|
|
249 |
<h4 id="rendering-rules">Rendering Rules</h4> |
|
|
250 |
<p>The <code>rules</code> parameter looks as follows:</p> |
|
|
251 |
<pre class="code prettyprint">var rules = { |
|
|
252 |
"2011,2013,2015-2019,2017": { |
|
|
253 |
"0,1,5-7": { |
|
|
254 |
"5,6,8": { |
|
|
255 |
"all": "rule_name" |
|
|
256 |
} |
|
|
257 |
} |
|
|
258 |
} |
|
|
259 |
};</pre> |
|
|
260 |
|
|
|
261 |
<p> |
|
|
262 |
At the top level, the rules object specifies years that dates should match; the next level is months (indexed |
|
|
263 |
starting at 0), the next is days of the month (indexed starting at 1), and the last is days of the week (indexed |
|
|
264 |
from Sunday, starting at 0). The actual value is the name of the rule that is matched by a date. In the example |
|
|
265 |
above, the rule "rule_name" is matched by the 5th, 6th and 8th days of January, February, June, July and August of |
|
|
266 |
2011, 2013, 2015 through 2019, and 2017.</p> |
|
|
267 |
<p> |
|
|
268 |
Note that the keyword <code>'all'</code> can appear at any level of the <code>rule</code> object and will match all parameters (e.g. all years, or all months) at that level. Furthermore, the rule name value can also appear at any level, for instance: |
|
|
269 |
</p> |
|
|
270 |
<pre class="code prettyprint">var rules = { |
|
|
271 |
"2011": { |
|
|
272 |
"5-7": "summer-2011" |
|
|
273 |
} |
|
|
274 |
};</pre> |
|
|
275 |
|
|
|
276 |
<p> |
|
|
277 |
The rule 'summer-2011' corresponds to June through August of 2011. More than one rule can be specified in the same |
|
|
278 |
rules object: |
|
|
279 |
</p> |
|
|
280 |
<pre class="code prettyprint">var rules = { |
|
|
281 |
"2011": { |
|
|
282 |
"5-7": "summer-2011" |
|
|
283 |
}, |
|
|
284 |
"2012": |
|
|
285 |
{ |
|
|
286 |
"all": { |
|
|
287 |
"all": { |
|
|
288 |
"0,6": "all-weekends-in-2012" |
|
|
289 |
} |
|
|
290 |
} |
|
|
291 |
} |
|
|
292 |
};</pre> |
|
|
293 |
|
|
|
294 |
<h4 id="custom-rendering-function">Custom Rendering Function</h4> |
|
|
295 |
<p>In order to match these rules, the customRenderer allows the developer to provide a <code>filterFunction</code> that will get called every time one or more rules is matched. The <code>filterFunction</code> has the following signature:</p> |
|
|
296 |
<pre class="code prettyprint">filterFunction = function (date /*Date*/, node /*Node*/, rules /*Array*/) { |
|
|
297 |
if (rules.indexOf("rule_name") >= 0) { |
|
|
298 |
|
|
|
299 |
} |
|
|
300 |
};</pre> |
|
|
301 |
|
|
|
302 |
<p>The first parameter, <code>date</code>, is a single date that matched one or more rules. The second parameter, <code>node</code>, is the <code>Node</code> wrapping the DOM element corresponding to the given date. Finally, the third parameter, <code>rules</code>, is an |
|
|
303 |
<code>Array</code> of <code>String</code>s, each containing a rule name that the given date matched.</p> |
|
|
304 |
<p>As an example, here is a custom renderer that assigns a custom CSS class to all summer weekends:</p> |
|
|
305 |
<pre class="code prettyprint">var rules = { |
|
|
306 |
"all": { |
|
|
307 |
"5-7": { |
|
|
308 |
"all": { |
|
|
309 |
"0,6": "all-summer-weekends" |
|
|
310 |
} |
|
|
311 |
} |
|
|
312 |
} |
|
|
313 |
}; |
|
|
314 |
|
|
|
315 |
var filterFunction = function (date, node, rules) { |
|
|
316 |
if (rules.indexOf("all-summer-weekends" >= 0)) { |
|
|
317 |
node.addClass("customCSSClass"); |
|
|
318 |
} |
|
|
319 |
} |
|
|
320 |
|
|
|
321 |
calendar.set("customRenderer", {rules: rules, filterFunction: filterFunction});</pre> |
|
|
322 |
|
|
|
323 |
<h4 id="-enabling-and-disabling-dates"> Enabling and Disabling Dates</h4> |
|
|
324 |
<p> In addition to custom rendering, the rules can also be used to specify sets of dates that should be enabled or disabled for selection. To do that, specify a rule set as described above, and then specify which rule should be used to match either the disabled dates, or the enabled dates (but not both: only one of the two parameters will be honored):</p> |
|
|
325 |
<pre class="code prettyprint">calendar.set("disabledDatesRule", "someRuleName"); |
|
|
326 |
// OR |
|
|
327 |
calendar.set("enabledDatesRule", "someRuleName");</pre> |
|
|
328 |
|
|
|
329 |
<p> |
|
|
330 |
Note, by the way, that the same rule name can be listed multiple times, giving the developer a lot of flexibility in defining what set of dates can be matched. For example, the following rule set matches all weekends and the 10th of every month: |
|
|
331 |
</p> |
|
|
332 |
<pre class="code prettyprint">var rules = { |
|
|
333 |
"all": { |
|
|
334 |
"all": { |
|
|
335 |
"all": { |
|
|
336 |
"0,6": "all-summer-weekends" |
|
|
337 |
}, |
|
|
338 |
"10": "10th-of-every-month" |
|
|
339 |
} |
|
|
340 |
} |
|
|
341 |
};</pre> |
|
|
342 |
|
|
|
343 |
|
|
|
344 |
<h3 id="calendar-templates">Calendar Templates</h3> |
|
|
345 |
<p>By default, the calendar is rendered using a set of templates, specified as static properties of the <code>CalendarBase</code> class. These templates can be completely modified to reconfigure the markup of the calendar, as long as the tokens they use as placeholders for CSS classes, ids and content are preserved.</p> |
|
|
346 |
<p>Using the template logic, the developer can easily switch from a single pane calendar, to a calendar with |
|
|
347 |
an arbitrary number of panes. Consider the main <code>CONTENT_TEMPLATE</code> in <code>CalendarBase</code>: |
|
|
348 |
<pre class="code prettyprint">CONTENT_TEMPLATE: '<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' + |
|
|
349 |
'{header_template}' + |
|
|
350 |
'<div class="yui3-u-1">' + |
|
|
351 |
'{calendar_grid_template}' + |
|
|
352 |
'</div>' + |
|
|
353 |
'</div>'</pre> |
|
|
354 |
|
|
|
355 |
<p>In this template, the <code>{calendar_grid_template}</code> is a so-called iterative token -- that means it can be used |
|
|
356 |
multiple times, and the calendar will automatically adjust to generate multiple sequential month grids for the |
|
|
357 |
calendar</p> |
|
|
358 |
<p>For convenience, we provide a two-pane and a three-pane calendar templates. Here is the two-pane template:</p> |
|
|
359 |
<pre class="code prettyprint">TWO_PANE_TEMPLATE: |
|
|
360 |
'<div class="yui3-g {calendar_pane_class}" id="{calendar_id}">' + |
|
|
361 |
'{header_template}' + |
|
|
362 |
'<div class="yui3-u-1-2">'+ |
|
|
363 |
'<div class = "{calendar_left_grid_class}">' + |
|
|
364 |
'{calendar_grid_template}' + |
|
|
365 |
'</div>' + |
|
|
366 |
'</div>' + |
|
|
367 |
'<div class="yui3-u-1-2">' + |
|
|
368 |
'<div class = "{calendar_right_grid_class}">' + |
|
|
369 |
'{calendar_grid_template}' + |
|
|
370 |
'</div>' + |
|
|
371 |
'</div>' + |
|
|
372 |
'</div>'</pre> |
|
|
373 |
|
|
|
374 |
<p>Switching to the two-pane template is as simple as assigning the value of <code>CalendarBase.CONTENT_TEMPLATE</code>:</p> |
|
|
375 |
<pre class="code prettyprint">CalendarBase.CONTENT_TEMPLATE = CalendarBase.TWO_PANE_TEMPLATE;</pre> |
|
|
376 |
|
|
|
377 |
Custom templates may also be constructed, with as many <code>{calendar_grid_template}</code> tokens as necessary. |
|
|
378 |
|
|
|
379 |
<h2 id="calendar-plugins">Calendar Plugins</h2> |
|
|
380 |
<p>The Calendar ships with a default <code>CalendarNavigator</code> plugin, which adds the |
|
|
381 |
simple navigation controls to the top of the widget. The plugin is located on the <code>navigator</code> namespace (that is, to access it and its properties, you would reference <code>mycalendar.navigator</code>). For future releases, more complex calendar navigation plugins |
|
|
382 |
are planned.</p> |
|
|
383 |
<p>In addition, in future releases, Calendar will also have a Popup plugin that will |
|
|
384 |
allow it to be easily hidden, shown, and associated with other UI elements.</p> |
|
|
385 |
<h2 id="known-issues">Known Issues</h2> |
|
|
386 |
|
|
|
387 |
<ul class="spaced"> |
|
|
388 |
<li> |
|
|
389 |
<p> |
|
|
390 |
The calendar is currently not enabled with popup functionality. |
|
|
391 |
</p> |
|
|
392 |
</li> |
|
|
393 |
</ul> |
|
|
394 |
</div> |
|
|
395 |
</div> |
|
|
396 |
</div> |
|
|
397 |
|
|
|
398 |
<div class="yui3-u-1-4"> |
|
|
399 |
<div class="sidebar"> |
|
|
400 |
|
|
|
401 |
<div id="toc" class="sidebox"> |
|
|
402 |
<div class="hd"> |
|
|
403 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
404 |
</div> |
|
|
405 |
|
|
|
406 |
<div class="bd"> |
|
|
407 |
<ul class="toc"> |
|
|
408 |
<li> |
|
|
409 |
<a href="#getting-started">Getting Started</a> |
|
|
410 |
</li> |
|
|
411 |
<li> |
|
|
412 |
<a href="#using-calendar">Using Calendar</a> |
|
|
413 |
<ul class="toc"> |
|
|
414 |
<li> |
|
|
415 |
<a href="#quick-start">Quick Start</a> |
|
|
416 |
<ul class="toc"> |
|
|
417 |
<li> |
|
|
418 |
<a href="#html">HTML</a> |
|
|
419 |
</li> |
|
|
420 |
<li> |
|
|
421 |
<a href="#javascript">JavaScript</a> |
|
|
422 |
</li> |
|
|
423 |
</ul> |
|
|
424 |
</li> |
|
|
425 |
<li> |
|
|
426 |
<a href="#configuring-calendar">Configuring Calendar</a> |
|
|
427 |
<ul class="toc"> |
|
|
428 |
<li> |
|
|
429 |
<a href="#calendarbase-config-attributes">CalendarBase Config Attributes</a> |
|
|
430 |
</li> |
|
|
431 |
<li> |
|
|
432 |
<a href="#calendar-config-attributes">Calendar Config Attributes</a> |
|
|
433 |
</li> |
|
|
434 |
</ul> |
|
|
435 |
</li> |
|
|
436 |
<li> |
|
|
437 |
<a href="#custom-rendering">Custom Rendering</a> |
|
|
438 |
<ul class="toc"> |
|
|
439 |
<li> |
|
|
440 |
<a href="#rendering-rules">Rendering Rules</a> |
|
|
441 |
</li> |
|
|
442 |
<li> |
|
|
443 |
<a href="#custom-rendering-function">Custom Rendering Function</a> |
|
|
444 |
</li> |
|
|
445 |
<li> |
|
|
446 |
<a href="#-enabling-and-disabling-dates"> Enabling and Disabling Dates</a> |
|
|
447 |
</li> |
|
|
448 |
</ul> |
|
|
449 |
</li> |
|
|
450 |
<li> |
|
|
451 |
<a href="#calendar-templates">Calendar Templates</a> |
|
|
452 |
</li> |
|
|
453 |
</ul> |
|
|
454 |
</li> |
|
|
455 |
<li> |
|
|
456 |
<a href="#calendar-plugins">Calendar Plugins</a> |
|
|
457 |
</li> |
|
|
458 |
<li> |
|
|
459 |
<a href="#known-issues">Known Issues</a> |
|
|
460 |
</li> |
|
|
461 |
</ul> |
|
|
462 |
</div> |
|
|
463 |
</div> |
|
|
464 |
|
|
|
465 |
|
|
|
466 |
|
|
|
467 |
<div class="sidebox"> |
|
|
468 |
<div class="hd"> |
|
|
469 |
<h2 class="no-toc">Examples</h2> |
|
|
470 |
</div> |
|
|
471 |
|
|
|
472 |
<div class="bd"> |
|
|
473 |
<ul class="examples"> |
|
|
474 |
|
|
|
475 |
|
|
|
476 |
<li data-description="How to create a single-pane calendar with selectable dates"> |
|
|
477 |
<a href="calendar-simple.html">Simple Calendar with Selection</a> |
|
|
478 |
</li> |
|
|
479 |
|
|
|
480 |
|
|
|
481 |
|
|
|
482 |
<li data-description="How to create a multi-pane calendar with custom-rendered cells and multiple date selection."> |
|
|
483 |
<a href="calendar-multipane.html">Two-Pane Calendar with Custom Rendering and Multiple Selection</a> |
|
|
484 |
</li> |
|
|
485 |
|
|
|
486 |
|
|
|
487 |
</ul> |
|
|
488 |
</div> |
|
|
489 |
</div> |
|
|
490 |
|
|
|
491 |
|
|
|
492 |
|
|
|
493 |
</div> |
|
|
494 |
</div> |
|
|
495 |
</div> |
|
|
496 |
</div> |
|
|
497 |
|
|
|
498 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
499 |
<script>prettyPrint();</script> |
|
|
500 |
|
|
|
501 |
<script> |
|
|
502 |
YUI.Env.Tests = { |
|
|
503 |
examples: [], |
|
|
504 |
project: '../assets', |
|
|
505 |
assets: '../assets/calendar', |
|
|
506 |
name: 'calendar', |
|
|
507 |
title: 'Calendar', |
|
|
508 |
newWindow: '', |
|
|
509 |
auto: false |
|
|
510 |
}; |
|
|
511 |
YUI.Env.Tests.examples.push('calendar-simple'); |
|
|
512 |
YUI.Env.Tests.examples.push('calendar-multipane'); |
|
|
513 |
|
|
|
514 |
</script> |
|
|
515 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
516 |
|
|
|
517 |
|
|
|
518 |
|
|
|
519 |
</body> |
|
|
520 |
</html> |