|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Simple Calendar with Selection</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 |
|
|
|
24 |
<h1>Example: Simple Calendar with Selection</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><style> |
|
|
29 |
.example { |
|
|
30 |
font-size:15px; |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
.example h4 { |
|
|
34 |
border: none; |
|
|
35 |
text-transform: none; |
|
|
36 |
} |
|
|
37 |
|
|
|
38 |
.example th { |
|
|
39 |
background: none; |
|
|
40 |
color: #000; |
|
|
41 |
text-transform: none; |
|
|
42 |
border: none; |
|
|
43 |
} |
|
|
44 |
</style> |
|
|
45 |
|
|
|
46 |
<div class="intro"> |
|
|
47 |
<p> |
|
|
48 |
This example demonstrates how to instantiate a simple Calendar, with an initial date setting as of today. The Calendar is preconfigured to show the previous and next month's dates. |
|
|
49 |
</p> |
|
|
50 |
|
|
|
51 |
<p> |
|
|
52 |
Try clicking on the toggle buttons to change the initial settings for showing the previous and next months' dates. You can also select dates in the calendar and see selected date on the right, reported via a <code>selectionChange</code> event, and formatted using DataType utility. |
|
|
53 |
</p> |
|
|
54 |
</div> |
|
|
55 |
<div class="example yui3-skin-sam"> |
|
|
56 |
<!-- Add an additional blue button style --> |
|
|
57 |
<style> |
|
|
58 |
.yui3-button { |
|
|
59 |
margin:10px 0px 10px 0px; |
|
|
60 |
color: #fff; |
|
|
61 |
background-color: #3476b7; |
|
|
62 |
} |
|
|
63 |
</style> |
|
|
64 |
|
|
|
65 |
<div id="demo" class="yui3-skin-sam yui3-g"> <!-- You need this skin class --> |
|
|
66 |
<div id="leftcolumn" class="yui3-u"> |
|
|
67 |
<!-- Container for the calendar --> |
|
|
68 |
<div id="mycalendar"></div> |
|
|
69 |
</div> |
|
|
70 |
<div id="rightcolumn" class="yui3-u"> |
|
|
71 |
<div id="links" style="padding-left:20px;"> |
|
|
72 |
<!-- The buttons are created simply by assigning the correct CSS class --> |
|
|
73 |
<button id="togglePrevMonth" class="yui3-button">Toggle Previous Month's Dates</button><br> |
|
|
74 |
<button id="toggleNextMonth" class="yui3-button">Toggle Next Month's Dates</button><br> |
|
|
75 |
Selected date: <span id="selecteddate"></span> |
|
|
76 |
</div> |
|
|
77 |
</div> |
|
|
78 |
</div> |
|
|
79 |
|
|
|
80 |
<script type="text/javascript"> |
|
|
81 |
YUI().use('calendar', 'datatype-date', 'cssbutton', function(Y) { |
|
|
82 |
|
|
|
83 |
// Create a new instance of calendar, placing it in |
|
|
84 |
// #mycalendar container, setting its width to 340px, |
|
|
85 |
// the flags for showing previous and next month's |
|
|
86 |
// dates in available empty cells to true, and setting |
|
|
87 |
// the date to today's date. |
|
|
88 |
var calendar = new Y.Calendar({ |
|
|
89 |
contentBox: "#mycalendar", |
|
|
90 |
width:'340px', |
|
|
91 |
showPrevMonth: true, |
|
|
92 |
showNextMonth: true, |
|
|
93 |
date: new Date()}).render(); |
|
|
94 |
|
|
|
95 |
// Get a reference to Y.DataType.Date |
|
|
96 |
var dtdate = Y.DataType.Date; |
|
|
97 |
|
|
|
98 |
// Listen to calendar's selectionChange event. |
|
|
99 |
calendar.on("selectionChange", function (ev) { |
|
|
100 |
|
|
|
101 |
// Get the date from the list of selected |
|
|
102 |
// dates returned with the event (since only |
|
|
103 |
// single selection is enabled by default, |
|
|
104 |
// we expect there to be only one date) |
|
|
105 |
var newDate = ev.newSelection[0]; |
|
|
106 |
|
|
|
107 |
// Format the date and output it to a DOM |
|
|
108 |
// element. |
|
|
109 |
Y.one("#selecteddate").setHTML(dtdate.format(newDate)); |
|
|
110 |
}); |
|
|
111 |
|
|
|
112 |
|
|
|
113 |
// When the 'Show Previous Month' link is clicked, |
|
|
114 |
// modify the showPrevMonth property to show or hide |
|
|
115 |
// previous month's dates |
|
|
116 |
Y.one("#togglePrevMonth").on('click', function (ev) { |
|
|
117 |
ev.preventDefault(); |
|
|
118 |
calendar.set('showPrevMonth', !(calendar.get("showPrevMonth"))); |
|
|
119 |
}); |
|
|
120 |
|
|
|
121 |
// When the 'Show Next Month' link is clicked, |
|
|
122 |
// modify the showNextMonth property to show or hide |
|
|
123 |
// next month's dates |
|
|
124 |
Y.one("#toggleNextMonth").on('click', function (ev) { |
|
|
125 |
ev.preventDefault(); |
|
|
126 |
calendar.set('showNextMonth', !(calendar.get("showNextMonth"))); |
|
|
127 |
}); |
|
|
128 |
}); |
|
|
129 |
</script> |
|
|
130 |
|
|
|
131 |
</div> |
|
|
132 |
|
|
|
133 |
<h2>Complete Example Source</h2> |
|
|
134 |
<p> |
|
|
135 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
136 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
137 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
138 |
</p> |
|
|
139 |
|
|
|
140 |
<pre class="code prettyprint"><!-- Add an additional blue button style --> |
|
|
141 |
<style> |
|
|
142 |
.yui3-button { |
|
|
143 |
margin:10px 0px 10px 0px; |
|
|
144 |
color: #fff; |
|
|
145 |
background-color: #3476b7; |
|
|
146 |
} |
|
|
147 |
</style> |
|
|
148 |
|
|
|
149 |
<div id="demo" class="yui3-skin-sam yui3-g"> <!-- You need this skin class --> |
|
|
150 |
<div id="leftcolumn" class="yui3-u"> |
|
|
151 |
<!-- Container for the calendar --> |
|
|
152 |
<div id="mycalendar"></div> |
|
|
153 |
</div> |
|
|
154 |
<div id="rightcolumn" class="yui3-u"> |
|
|
155 |
<div id="links" style="padding-left:20px;"> |
|
|
156 |
<!-- The buttons are created simply by assigning the correct CSS class --> |
|
|
157 |
<button id="togglePrevMonth" class="yui3-button">Toggle Previous Month's Dates</button><br> |
|
|
158 |
<button id="toggleNextMonth" class="yui3-button">Toggle Next Month's Dates</button><br> |
|
|
159 |
Selected date: <span id="selecteddate"></span> |
|
|
160 |
</div> |
|
|
161 |
</div> |
|
|
162 |
</div> |
|
|
163 |
|
|
|
164 |
<script type="text/javascript"> |
|
|
165 |
YUI().use('calendar', 'datatype-date', 'cssbutton', function(Y) { |
|
|
166 |
|
|
|
167 |
// Create a new instance of calendar, placing it in |
|
|
168 |
// #mycalendar container, setting its width to 340px, |
|
|
169 |
// the flags for showing previous and next month's |
|
|
170 |
// dates in available empty cells to true, and setting |
|
|
171 |
// the date to today's date. |
|
|
172 |
var calendar = new Y.Calendar({ |
|
|
173 |
contentBox: "#mycalendar", |
|
|
174 |
width:'340px', |
|
|
175 |
showPrevMonth: true, |
|
|
176 |
showNextMonth: true, |
|
|
177 |
date: new Date()}).render(); |
|
|
178 |
|
|
|
179 |
// Get a reference to Y.DataType.Date |
|
|
180 |
var dtdate = Y.DataType.Date; |
|
|
181 |
|
|
|
182 |
// Listen to calendar's selectionChange event. |
|
|
183 |
calendar.on("selectionChange", function (ev) { |
|
|
184 |
|
|
|
185 |
// Get the date from the list of selected |
|
|
186 |
// dates returned with the event (since only |
|
|
187 |
// single selection is enabled by default, |
|
|
188 |
// we expect there to be only one date) |
|
|
189 |
var newDate = ev.newSelection[0]; |
|
|
190 |
|
|
|
191 |
// Format the date and output it to a DOM |
|
|
192 |
// element. |
|
|
193 |
Y.one("#selecteddate").setHTML(dtdate.format(newDate)); |
|
|
194 |
}); |
|
|
195 |
|
|
|
196 |
|
|
|
197 |
// When the 'Show Previous Month' link is clicked, |
|
|
198 |
// modify the showPrevMonth property to show or hide |
|
|
199 |
// previous month's dates |
|
|
200 |
Y.one("#togglePrevMonth").on('click', function (ev) { |
|
|
201 |
ev.preventDefault(); |
|
|
202 |
calendar.set('showPrevMonth', !(calendar.get("showPrevMonth"))); |
|
|
203 |
}); |
|
|
204 |
|
|
|
205 |
// When the 'Show Next Month' link is clicked, |
|
|
206 |
// modify the showNextMonth property to show or hide |
|
|
207 |
// next month's dates |
|
|
208 |
Y.one("#toggleNextMonth").on('click', function (ev) { |
|
|
209 |
ev.preventDefault(); |
|
|
210 |
calendar.set('showNextMonth', !(calendar.get("showNextMonth"))); |
|
|
211 |
}); |
|
|
212 |
}); |
|
|
213 |
</script></pre> |
|
|
214 |
|
|
|
215 |
</div> |
|
|
216 |
</div> |
|
|
217 |
</div> |
|
|
218 |
|
|
|
219 |
<div class="yui3-u-1-4"> |
|
|
220 |
<div class="sidebar"> |
|
|
221 |
|
|
|
222 |
|
|
|
223 |
|
|
|
224 |
<div class="sidebox"> |
|
|
225 |
<div class="hd"> |
|
|
226 |
<h2 class="no-toc">Examples</h2> |
|
|
227 |
</div> |
|
|
228 |
|
|
|
229 |
<div class="bd"> |
|
|
230 |
<ul class="examples"> |
|
|
231 |
|
|
|
232 |
|
|
|
233 |
<li data-description="How to create a single-pane calendar with selectable dates"> |
|
|
234 |
<a href="calendar-simple.html">Simple Calendar with Selection</a> |
|
|
235 |
</li> |
|
|
236 |
|
|
|
237 |
|
|
|
238 |
|
|
|
239 |
<li data-description="How to create a multi-pane calendar with custom-rendered cells and multiple date selection."> |
|
|
240 |
<a href="calendar-multipane.html">Two-Pane Calendar with Custom Rendering and Multiple Selection</a> |
|
|
241 |
</li> |
|
|
242 |
|
|
|
243 |
|
|
|
244 |
</ul> |
|
|
245 |
</div> |
|
|
246 |
</div> |
|
|
247 |
|
|
|
248 |
|
|
|
249 |
|
|
|
250 |
</div> |
|
|
251 |
</div> |
|
|
252 |
</div> |
|
|
253 |
</div> |
|
|
254 |
|
|
|
255 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
256 |
<script>prettyPrint();</script> |
|
|
257 |
|
|
|
258 |
<script> |
|
|
259 |
YUI.Env.Tests = { |
|
|
260 |
examples: [], |
|
|
261 |
project: '../assets', |
|
|
262 |
assets: '../assets/calendar', |
|
|
263 |
name: 'calendar-simple', |
|
|
264 |
title: 'Simple Calendar with Selection', |
|
|
265 |
newWindow: '', |
|
|
266 |
auto: false |
|
|
267 |
}; |
|
|
268 |
YUI.Env.Tests.examples.push('calendar-simple'); |
|
|
269 |
YUI.Env.Tests.examples.push('calendar-multipane'); |
|
|
270 |
|
|
|
271 |
</script> |
|
|
272 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
273 |
|
|
|
274 |
|
|
|
275 |
|
|
|
276 |
</body> |
|
|
277 |
</html> |