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

Revision 2, 9.2 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<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
51activates the calendar.  The date format is "%m/%d/%Y %I:%M %p".  The
52calendar defaults to "single-click mode".</p>
53
54<p>The example below has been updated to show you how to create "linked"
55fields.  Basically, when some field is filled with a date, the other
56is updated so that the difference between them remains one week.  The
57property 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
100the calendar.  Note that this one needs double-click (singleClick parameter
101is explicitely set to false).  Also demonstrates the "step" parameter
102introduced in 0.9.6 (show all years in drop-down boxes, instead of every
103other 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
125function doesn't care if the trigger is a button, image, or anything else.
126Also in this example we setup a different alignment, just to show how it's
127done.  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
152elements: one is an input field of type "hidden"&mdash;so that the user
153can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
154which the date is displayed.  Note that if the trigger is not specified the
155calendar will use the displayArea (or inputField as in the first example).
156The display area can have it's own format.  This is useful if, for instance,
157we need to store one format in the database (thus pass it in the input
158field) 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
187previous 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
194src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
195red;" title="Date selector" onmouseover="this.style.background='red';"
196onmouseout="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,
215but we now disable some dates (all weekends, that is, Saturdays and
216Sundays).</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>
Note: See TracBrowser for help on using the repository browser.