Localisation.
[Plinn.git] / skins / jscalendar / simple-1.html
1 <html style="background-color: buttonface; color: buttontext;">
2
3 <head>
4 <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
5
6 <title>Simple calendar setups [popup calendar]</title>
7
8 <!-- calendar stylesheet -->
9 <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
10
11 <!-- main calendar program -->
12 <script type="text/javascript" src="calendar.js"></script>
13
14 <!-- language for the calendar -->
15 <script type="text/javascript" src="lang/calendar-en.js"></script>
16
17 <!-- the following script defines the Calendar.setup helper function, which makes
18 adding a calendar a matter of 1 or 2 lines of code. -->
19 <script type="text/javascript" src="calendar-setup.js"></script>
20
21 </head>
22
23 <body>
24
25 <h2>DHTML Calendar &mdash; for the impatient</h2>
26
27 <blockquote>
28 <p>
29 This page lists some common setups for the popup calendar. In
30 order to see how to do any of them please see the source of this
31 page. For each example it's structured like this: there's the
32 &lt;form&gt; that contains the input field, and following there is
33 the JavaScript snippet that setups that form. An example of
34 <em>flat</em> calendar is available in <a
35 href="simple-2.html">another page</a>.
36 </p>
37 <p>
38 The code in this page uses a helper function defined in
39 "calendar-setup.js". With it you can setup the calendar in
40 minutes. If you're not <em>that</em> impatient, ;-) <a
41 href="doc/html/reference.html">complete documenation</a> is
42 available.
43 </p>
44 </blockquote>
45
46
47
48 <hr />
49
50 <p><b>Basic setup: one input per calendar.</b> Clicking in the input field
51 activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The
52 calendar defaults to "single-click mode".</p>
53
54 <p>The example below has been updated to show you how to create "linked"
55 fields. Basically, when some field is filled with a date, the other
56 is updated so that the difference between them remains one week. The
57 property useful here is "onUpdate".</p>
58
59 <form action="#" method="get">
60 <input type="text" name="date" id="f_date_a" />
61 <input type="text" name="date" id="f_calcdate" />
62 </form>
63
64 <script type="text/javascript">
65 function catcalc(cal) {
66 var date = cal.date;
67 var time = date.getTime()
68 // use the _other_ field
69 var field = document.getElementById("f_calcdate");
70 if (field == cal.params.inputField) {
71 field = document.getElementById("f_date_a");
72 time -= Date.WEEK; // substract one week
73 } else {
74 time += Date.WEEK; // add one week
75 }
76 var date2 = new Date(time);
77 field.value = date2.print("%Y-%m-%d %H:%M");
78 }
79 Calendar.setup({
80 inputField : "f_date_a", // id of the input field
81 ifFormat : "%Y-%m-%d %H:%M", // format of the input field
82 showsTime : true,
83 timeFormat : "24",
84 onUpdate : catcalc
85 });
86 Calendar.setup({
87 inputField : "f_calcdate",
88 ifFormat : "%Y-%m-%d %H:%M",
89 showsTime : true,
90 timeFormat : "24",
91 onUpdate : catcalc
92 });
93 </script>
94
95
96
97 <hr />
98
99 <p><b>Input field with a trigger button.</b> Clicking the button activates
100 the calendar. Note that this one needs double-click (singleClick parameter
101 is explicitely set to false). Also demonstrates the "step" parameter
102 introduced in 0.9.6 (show all years in drop-down boxes, instead of every
103 other year as default).</p>
104
105 <form action="#" method="get">
106 <input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
107 </form>
108
109 <script type="text/javascript">
110 Calendar.setup({
111 inputField : "f_date_b", // id of the input field
112 ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field
113 showsTime : true, // will display a time selector
114 button : "f_trigger_b", // trigger for the calendar (button ID)
115 singleClick : false, // double-click mode
116 step : 1 // show all years in drop-down boxes (instead of every other year as default)
117 });
118 </script>
119
120
121
122 <hr />
123
124 <p><b>Input field with a trigger image.</b> Note that the Calendar.setup
125 function doesn't care if the trigger is a button, image, or anything else.
126 Also in this example we setup a different alignment, just to show how it's
127 done. The input field is read-only (that is set from HTML).</p>
128
129 <form action="#" method="get">
130 <table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
131 <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
132 <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
133 onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
134 </table>
135 </form>
136
137 <script type="text/javascript">
138 Calendar.setup({
139 inputField : "f_date_c", // id of the input field
140 ifFormat : "%B %e, %Y", // format of the input field
141 button : "f_trigger_c", // trigger for the calendar (button ID)
142 align : "Tl", // alignment (defaults to "Bl")
143 singleClick : true
144 });
145 </script>
146
147
148
149 <hr />
150
151 <p><b>Hidden field, display area.</b> The calendar now puts the date into 2
152 elements: one is an input field of type "hidden"&mdash;so that the user
153 can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
154 which the date is displayed. Note that if the trigger is not specified the
155 calendar will use the displayArea (or inputField as in the first example).
156 The display area can have it's own format. This is useful if, for instance,
157 we need to store one format in the database (thus pass it in the input
158 field) but we wanna show a friendlier format to the end-user.</p>
159
160 <form action="#" method="get" style="visibility: hidden">
161 <input type="hidden" name="date" id="f_date_d" />
162 </form>
163
164 <p>Your birthday:
165 <span style="background-color: #ff8; cursor: default;"
166 onmouseover="this.style.backgroundColor='#ff0';"
167 onmouseout="this.style.backgroundColor='#ff8';"
168 id="show_d"
169 >Click to open date selector</span>.</p>
170
171 <script type="text/javascript">
172 Calendar.setup({
173 inputField : "f_date_d", // id of the input field
174 ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
175 displayArea : "show_d", // ID of the span where the date is to be shown
176 daFormat : "%A, %B %d, %Y",// format of the displayed date
177 align : "Tl", // alignment (defaults to "Bl")
178 singleClick : true
179 });
180 </script>
181
182
183
184 <hr />
185
186 <p><b>Hidden field, display area, trigger image.</b> Very similar to the
187 previous example. The difference is that we also have a trigger image.</p>
188
189 <form action="#" method="get" style="visibility: hidden">
190 <input type="hidden" name="date" id="f_date_e" />
191 </form>
192
193 <p>Your birthday: <span id="show_e">-- not entered --</span> <img
194 src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
195 red;" title="Date selector" onmouseover="this.style.background='red';"
196 onmouseout="this.style.background=''" />.</p>
197
198 <script type="text/javascript">
199 Calendar.setup({
200 inputField : "f_date_e", // id of the input field
201 ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
202 displayArea : "show_e", // ID of the span where the date is to be shown
203 daFormat : "%A, %B %d, %Y",// format of the displayed date
204 button : "f_trigger_e", // trigger button (well, IMG in our case)
205 align : "Tl", // alignment (defaults to "Bl")
206 singleClick : true
207 });
208 </script>
209
210
211
212 <hr />
213
214 <p><b>Hidden field, display area.</b> Very much like the previous examples,
215 but we now disable some dates (all weekends, that is, Saturdays and
216 Sundays).</p>
217
218 <form action="#" method="get" style="visibility: hidden">
219 <input type="hidden" name="date" id="f_date_f" />
220 </form>
221
222 <p>Your birthday:
223 <span style="background-color: #ff8; cursor: default;"
224 onmouseover="this.style.backgroundColor='#ff0';"
225 onmouseout="this.style.backgroundColor='#ff8';"
226 id="show_f"
227 >Click to open date selector</span>.</p>
228
229 <script type="text/javascript">
230 Calendar.setup({
231 inputField : "f_date_f", // id of the input field
232 ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
233 displayArea : "show_f", // ID of the span where the date is to be shown
234 daFormat : "%A, %B %d, %Y",// format of the displayed date
235 align : "Tl", // alignment (defaults to "Bl")
236 dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
237 return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
238 }
239 });
240 </script>
241
242
243 </body>
244 </html>