source: trunk/phpgwapi/js/jscalendar/simple-4.html @ 2

Revision 2, 11.3 KB checked in by niltonneto, 17 years ago (diff)

Removida todas as tags usadas pelo CVS ($Id, $Source).
Primeira versão no CVS externo.
  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
1<html style="background-color: buttonface; color: buttontext;">
2
3<head>
4
5<title>Simple calendar setups [popup calendar]</title>
6
7  <!-- calendar stylesheet -->
8  <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
9
10  <!-- main calendar program -->
11  <script type="text/javascript" src="calendar.js"></script>
12
13  <!-- language for the calendar -->
14  <script type="text/javascript" src="lang/calendar-en.js"></script>
15
16  <!-- the following script defines the Calendar.setup helper function, which makes
17       adding a calendar a matter of 1 or 2 lines of code. -->
18  <script type="text/javascript" src="calendar-setup.js"></script>
19
20<script language="JavaScript">
21function rightAlign(div,offset){
22  if(typeof div=='string'){div=document.getElementById(div)}
23  if(isNaN(offset)){offset=0}
24    div.style.left=document.body.clientWidth-parseInt(div.offsetWidth)+offset;
25}
26function stretchRight(div,offset){
27  if(typeof div=='string'){div=document.getElementById(div)}
28  if(isNaN(offset)){offset=0}
29  if(document.body.clientWidth-parseInt(div.offsetLeft)+offset>=0){
30    div.style.width=document.body.clientWidth-parseInt(div.offsetLeft)+offset;
31  }
32}
33function stretchBottom(div,offset){
34  if(typeof div=='string'){div=document.getElementById(div)}
35  if(isNaN(offset)){offset=0}
36  if(document.body.clientHeight-parseInt(div.offsetTop)+offset>=0){
37    div.style.height=document.body.clientHeight-parseInt(div.offsetTop)+offset;
38  }
39}
40function toggleHelp(){
41  dh=document.getElementById('divHelp');
42  if(dh.style.visibility=='visible'){
43    dh.style.visibility='hidden';
44    stretchRight('divMenu');
45    stretchRight('divContent');
46  }else{
47    rightAlign('divHelp');
48    stretchRight('divMenu',-200);
49    stretchRight('divContent',-200);
50    dh.style.visibility='visible';
51  }
52  var txt = "<table>";
53  var object = document.getElementById("divContent");
54  for (var i in object) {
55    switch (typeof object[i]) {
56      case "string":
57      case "number":
58        if (i != "innerHTML")
59          txt += "<tr><td>" + i + "</td><td>" + object[i] + "</td></tr>";
60        break;
61    }
62  }
63  dh.innerHTML = txt + "</table>";
64}
65function adjustDivs(){
66  dh=document.getElementById('divHelp');
67  if(dh.style.visibility=='visible'){
68    rightAlign('divHelp');
69    stretchRight('divMenu',-200);
70    stretchRight('divContent',-200);
71  }else{
72    stretchRight('divMenu');
73    stretchRight('divContent');
74  }
75  stretchBottom('divContent');
76}
77</script>
78
79<style>
80#divContent{
81  position:absolute;
82  width:100%;
83  height:100%;
84  overflow:auto;
85  top: 30px;
86}
87#divMenu{
88  position: absolute;
89  left:0px;
90  top:0px;
91  text-align: right;
92  background-color: #cccccc;
93  width:100%;
94  height:30px;
95}
96#divHelp{
97  position:absolute;
98  width:200px;
99  height:100%;
100  background-color:#ffffcc;
101  visibility:hidden;
102}
103</style>
104
105</head>
106
107<body scroll=no leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onload="adjustDivs()" onresize="adjustDivs()">
108  <div id="divMenu"><a href="javascript:void(0)" onclick="toggleHelp();return false">Toggle console</a></div>
109  <div id="divContent">
110
111<h2>DHTML Calendar &mdash; for the impatient</h2>
112
113      <blockquote>
114        <p>
115          This page lists some common setups for the popup calendar.  In
116          order to see how to do any of them please see the source of this
117          page.  For each example it's structured like this: there's the
118          &lt;form&gt; that contains the input field, and following there is
119          the JavaScript snippet that setups that form.  An example of
120          <em>flat</em> calendar is available in <a
121            href="simple-2.html">another page</a>.
122        </p>
123        <p>
124          The code in this page uses a helper function defined in
125          "calendar-setup.js".  With it you can setup the calendar in
126          minutes.  If you're not <em>that</em> impatient, ;-) <a
127          href="doc/html/reference.html">complete documenation</a> is
128          available.
129        </p>
130      </blockquote>
131
132
133
134<hr />
135
136<p><b>Basic setup: one input per calendar.</b> Clicking in the input field
137activates the calendar.  The date format is "%m/%d/%Y %I:%M %p".  The
138calendar defaults to "single-click mode".</p>
139
140<p>The example below has been updated to show you how to create "linked"
141fields.  Basically, when some field is filled with a date, the other
142is updated so that the difference between them remains one week.  The
143property useful here is "onUpdate".</p>
144
145<form action="#" method="get">
146<input type="text" name="date" id="f_date_a" />
147<input type="text" name="date" id="f_calcdate" />
148</form>
149
150<script type="text/javascript">
151    function catcalc(cal) {
152        var date = cal.date;
153        var time = date.getTime()
154        // use the _other_ field
155        var field = document.getElementById("f_calcdate");
156        if (field == cal.params.inputField) {
157            field = document.getElementById("f_date_a");
158            time -= Date.WEEK; // substract one week
159        } else {
160            time += Date.WEEK; // add one week
161        }
162        var date2 = new Date(time);
163        field.value = date2.print("%Y-%m-%d %H:%M");
164    }
165    Calendar.setup({
166        inputField     :    "f_date_a",   // id of the input field
167        ifFormat       :    "%Y-%m-%d %H:%M",       // format of the input field
168        showsTime      :    true,
169        timeFormat     :    "24",
170        onUpdate       :    catcalc
171    });
172    Calendar.setup({
173        inputField     :    "f_calcdate",
174        ifFormat       :    "%Y-%m-%d %H:%M",
175        showsTime      :    true,
176        timeFormat     :    "24",
177        onUpdate       :    catcalc
178    });
179</script>
180
181
182
183<hr />
184
185<p><b>Input field with a trigger button.</b> Clicking the button activates
186the calendar.  Note that this one needs double-click (singleClick parameter
187is explicitely set to false).</p>
188
189<form action="#" method="get">
190<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
191</form>
192
193<script type="text/javascript">
194    Calendar.setup({
195        inputField     :    "f_date_b",      // id of the input field
196        ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
197        showsTime      :    true,            // will display a time selector
198        button         :    "f_trigger_b",   // trigger for the calendar (button ID)
199        singleClick    :    false            // double-click mode
200    });
201</script>
202
203
204
205<hr />
206
207<p><b>Input field with a trigger image.</b> Note that the Calendar.setup
208function doesn't care if the trigger is a button, image, or anything else.
209Also in this example we setup a different alignment, just to show how it's
210done.  The input field is read-only (that is set from HTML).</p>
211
212<form action="#" method="get">
213<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
214 <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
215 <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
216      onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
217</table>
218</form>
219
220<script type="text/javascript">
221    Calendar.setup({
222        inputField     :    "f_date_c",     // id of the input field
223        ifFormat       :    "%B %e, %Y",      // format of the input field
224        button         :    "f_trigger_c",  // trigger for the calendar (button ID)
225        align          :    "Tl",           // alignment (defaults to "Bl")
226        singleClick    :    true
227    });
228</script>
229
230
231
232<hr />
233
234<p><b>Hidden field, display area.</b> The calendar now puts the date into 2
235elements: one is an input field of type "hidden"&mdash;so that the user
236can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
237which the date is displayed.  Note that if the trigger is not specified the
238calendar will use the displayArea (or inputField as in the first example).
239The display area can have it's own format.  This is useful if, for instance,
240we need to store one format in the database (thus pass it in the input
241field) but we wanna show a friendlier format to the end-user.</p>
242
243<form action="#" method="get" style="visibility: hidden">
244<input type="hidden" name="date" id="f_date_d" />
245</form>
246
247<p>Your birthday:
248   <span style="background-color: #ff8; cursor: default;"
249         onmouseover="this.style.backgroundColor='#ff0';"
250         onmouseout="this.style.backgroundColor='#ff8';"
251         id="show_d"
252   >Click to open date selector</span>.</p>
253
254<script type="text/javascript">
255    Calendar.setup({
256        inputField     :    "f_date_d",     // id of the input field
257        ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
258        displayArea    :    "show_d",       // ID of the span where the date is to be shown
259        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
260        align          :    "Tl",           // alignment (defaults to "Bl")
261        singleClick    :    true
262    });
263</script>
264
265
266
267<hr />
268
269<p><b>Hidden field, display area, trigger image.</b> Very similar to the
270previous example.  The difference is that we also have a trigger image.</p>
271
272<form action="#" method="get" style="visibility: hidden">
273<input type="hidden" name="date" id="f_date_e" />
274</form>
275
276<p>Your birthday: <span id="show_e">-- not entered --</span> <img
277src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
278red;" title="Date selector" onmouseover="this.style.background='red';"
279onmouseout="this.style.background=''" />.</p>
280
281<script type="text/javascript">
282    Calendar.setup({
283        inputField     :    "f_date_e",     // id of the input field
284        ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
285        displayArea    :    "show_e",       // ID of the span where the date is to be shown
286        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
287        button         :    "f_trigger_e",  // trigger button (well, IMG in our case)
288        align          :    "Tl",           // alignment (defaults to "Bl")
289        singleClick    :    true
290    });
291</script>
292
293
294
295<hr />
296
297<p><b>Hidden field, display area.</b> Very much like the previous examples,
298but we now disable some dates (all weekends, that is, Saturdays and
299Sundays).</p>
300
301<form action="#" method="get" style="visibility: hidden">
302<input type="hidden" name="date" id="f_date_f" />
303</form>
304
305<p>Your birthday:
306   <span style="background-color: #ff8; cursor: default;"
307         onmouseover="this.style.backgroundColor='#ff0';"
308         onmouseout="this.style.backgroundColor='#ff8';"
309         id="show_f"
310   >Click to open date selector</span>.</p>
311
312<script type="text/javascript">
313    Calendar.setup({
314        inputField     :    "f_date_f",     // id of the input field
315        ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
316        displayArea    :    "show_f",       // ID of the span where the date is to be shown
317        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
318        align          :    "Tl",           // alignment (defaults to "Bl")
319        dateStatusFunc :    function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
320                              return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
321                            }
322    });
323</script>
324</div>
325<div id="divHelp">
326
327</div>
328
329</body>
330</html>
Note: See TracBrowser for help on using the repository browser.