source: trunk/phpgwapi/js/jscalendar/index.html @ 2

Revision 2, 12.6 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<?xml version="1.0" encoding="utf-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4
5<head>
6<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
7<title>The Coolest DHTML Calendar - Online Demo</title>
8<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue.css" title="winter" />
9<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue2.css" title="blue" />
10<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-brown.css" title="summer" />
11<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-green.css" title="green" />
12<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-1.css" title="win2k-1" />
13<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-2.css" title="win2k-2" />
14<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
15<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-2.css" title="win2k-cold-2" />
16<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-system.css" title="system" />
17
18<!-- import the calendar script -->
19<script type="text/javascript" src="calendar.js"></script>
20
21<!-- import the language module -->
22<script type="text/javascript" src="lang/calendar-en.js"></script>
23
24<!-- other languages might be available in the lang directory; please check
25your distribution archive. -->
26
27<!-- helper script that uses the calendar -->
28<script type="text/javascript">
29
30var oldLink = null;
31// code to change the active stylesheet
32function setActiveStyleSheet(link, title) {
33  var i, a, main;
34  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
35    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
36      a.disabled = true;
37      if(a.getAttribute("title") == title) a.disabled = false;
38    }
39  }
40  if (oldLink) oldLink.style.fontWeight = 'normal';
41  oldLink = link;
42  link.style.fontWeight = 'bold';
43  return false;
44}
45
46// This function gets called when the end-user clicks on some date.
47function selected(cal, date) {
48  cal.sel.value = date; // just update the date in the input field.
49  if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
50    // if we add this call we close the calendar on single-click.
51    // just to exemplify both cases, we are using this only for the 1st
52    // and the 3rd field, while 2nd and 4th will still require double-click.
53    cal.callCloseHandler();
54}
55
56// And this gets called when the end-user clicks on the _selected_ date,
57// or clicks on the "Close" button.  It just hides the calendar without
58// destroying it.
59function closeHandler(cal) {
60  cal.hide();                        // hide the calendar
61//  cal.destroy();
62  calendar = null;
63}
64
65// This function shows the calendar under the element having the given id.
66// It takes care of catching "mousedown" signals on document and hiding the
67// calendar if the click was outside.
68function showCalendar(id, format, showsTime, showsOtherMonths) {
69  var el = document.getElementById(id);
70  if (calendar != null) {
71    // we already have some calendar created
72    calendar.hide();                 // so we hide it first.
73  } else {
74    // first-time call, create the calendar.
75    var cal = new Calendar(true, null, selected, closeHandler);
76    // uncomment the following line to hide the week numbers
77    // cal.weekNumbers = false;
78    if (typeof showsTime == "string") {
79      cal.showsTime = true;
80      cal.time24 = (showsTime == "24");
81    }
82    if (showsOtherMonths) {
83      cal.showsOtherMonths = true;
84    }
85    calendar = cal;                  // remember it in the global var
86    cal.setRange(1900, 2070);        // min/max year allowed.
87    cal.create();
88  }
89  calendar.setDateFormat(format);    // set the specified date format
90  calendar.parseDate(el.value);      // try to parse the text in field
91  calendar.sel = el;                 // inform it what input field we use
92
93  // the reference element that we pass to showAtElement is the button that
94  // triggers the calendar.  In this example we align the calendar bottom-right
95  // to the button.
96  calendar.showAtElement(el.nextSibling, "Br");        // show the calendar
97
98  return false;
99}
100
101var MINUTE = 60 * 1000;
102var HOUR = 60 * MINUTE;
103var DAY = 24 * HOUR;
104var WEEK = 7 * DAY;
105
106// If this handler returns true then the "date" given as
107// parameter will be disabled.  In this example we enable
108// only days within a range of 10 days from the current
109// date.
110// You can use the functions date.getFullYear() -- returns the year
111// as 4 digit number, date.getMonth() -- returns the month as 0..11,
112// and date.getDate() -- returns the date of the month as 1..31, to
113// make heavy calculations here.  However, beware that this function
114// should be very fast, as it is called for each day in a month when
115// the calendar is (re)constructed.
116function isDisabled(date) {
117  var today = new Date();
118  return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
119}
120
121function flatSelected(cal, date) {
122  var el = document.getElementById("preview");
123  el.innerHTML = date;
124}
125
126function showFlatCalendar() {
127  var parent = document.getElementById("display");
128
129  // construct a calendar giving only the "selected" handler.
130  var cal = new Calendar(true, null, flatSelected);
131
132  // hide week numbers
133  cal.weekNumbers = false;
134
135  // We want some dates to be disabled; see function isDisabled above
136  cal.setDisabledHandler(isDisabled);
137  cal.setDateFormat("%A, %B %e");
138
139  // this call must be the last as it might use data initialized above; if
140  // we specify a parent, as opposite to the "showCalendar" function above,
141  // then we create a flat calendar -- not popup.  Hidden, though, but...
142  cal.create(parent);
143
144  // ... we can show it here.
145  cal.show();
146}
147</script>
148
149<style type="text/css">
150.ex { font-weight: bold; background: #fed; color: #080 }
151.help { color: #080; font-style: italic; }
152body { background: #fea; font: 10pt tahoma,verdana,sans-serif; }
153table { font: 13px verdana,tahoma,sans-serif; }
154a { color: #00f; }
155a:visited { color: #00f; }
156a:hover { color: #f00; background: #fefaf0; }
157a:active { color: #08f; }
158.key { border: 1px solid #000; background: #fff; color: #008;
159padding: 0px 5px; cursor: default; font-size: 80%; }
160</style>
161
162</head>
163<body onload="showFlatCalendar()">
164
165<h2><a href="http://dynarch.com/mishoo/calendar.epl"
166title="Visit the project website">jscalendar</a>-0.9.6
167"Keep cool but don't freeze"</h2>
168
169<p>
170<div style="float: right; border: 1px solid #b87; padding: 2px; font-size: 90%; background: #ffb;">
171Theme:<br />
172<a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
173|
174<a href="#" onclick="return setActiveStyleSheet(this, 'blue');">blue</a>
175|
176<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
177|
178<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
179<br />
180<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
181|
182<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
183|
184<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-1');">win2k-cold-1</a>
185|
186<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
187<br />
188<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
189<script type="text/javascript">
190setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1");
191</script>
192</div>
193<a href="release-notes.html">Release notes</a>.
194<br />
195Set it up in minutes:
196  <a href="simple-1.html">popup calendar</a>,
197  <a href="simple-2.html">flat calendar</a>.
198<br />
199Documentation:
200  <a href="doc/html/reference.html">HTML</a>,
201  <a href="doc/reference.pdf">PDF</a>.
202<br />
203<b style="color: red">Donate!  Keep me on it!  Details on <a href="http://dynarch.com/mishoo/calendar.epl">the Calendar website</a>.</b>
204</p>
205
206<div style="padding-left:20px; font-size: 90%; font-style: italic;">
207
208</div>
209
210<table style="width: 100%">
211<tr valign="top">
212<td style="background: #ffa; padding: 5px; border: 1px solid #995;">
213
214<form action="#">
215<div style="background: #995; color: #ffa; font-weight: bold; padding: 2px;">
216Popup examples
217</div>
218
219<br />
220
221<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
222><input type="reset" value=" ... "
223onclick="return showCalendar('sel1', '%Y-%m-%d [%W] %H:%M', '24', true);"> %Y-%m-%d [%W] %H:%M -- single
224click<br />
225
226<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
227><input type="reset" value=" ... "
228onclick="return showCalendar('sel2', '%a, %b %e, %Y [%I:%M %p]', '12');"> %a, %b %e, %Y [%I:%M %p]
229-- double click
230
231<br /><br />
232<!--
233if you remove this comment and leave the following HTML code
234you will see a horrible effect, in all supported browsers (IE and Mozilla).
235-->
236<SELECT multiple size="4" name="component-select">
237  <OPTION selected value="Component_1_a">Component_1</OPTION>
238  <OPTION selected value="Component_1_b">Component_2</OPTION>
239  <OPTION>Component_3</OPTION>
240  <OPTION>Component_4</OPTION>
241  <OPTION>Component_5</OPTION>
242  <OPTION>Component_6</OPTION>
243  <OPTION>Component_7</OPTION>
244</SELECT>
245this select should hide when the calendar is above it.
246<br /><br />
247
248<b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
249><input type="reset" value=" ... "
250onclick="return showCalendar('sel3', '%d/%m/%Y');"> %d/%m/%Y
251-- single click
252<br />
253
254<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
255><input type="reset" value=" ... "
256onclick="return showCalendar('sel4', '%A, %B %e, %Y');"> %A, %B %e, %Y --
257double click
258
259</form>
260
261<p>This is release <b>0.9.6</b>.  Works on MSIE/Win 5.0 or better (really),
262Opera 7, Mozilla, Netscape 6.x, 7.0 and all other Gecko-s, Konqueror and
263Safari.</p>
264
265<p class="help">You can click on "Mo"/"Su" (first day name displayed) to
266change the first day of week (Sunday/Monday) (since 0.8 this is also mapped
267on the "-" button in the top-left corner).  Use the navigation buttons
268("&lt;&lt;", "&lt;", "Today", "&gt;", "&gt;&gt;") to move to the prev/next
269year/month.  Keep the mouse button pressed for a short time over one of
270these buttons to get a menu for faster selection.  You can drag the "status
271bar" (that's where the tooltips appear) or title bar (that's where the
272currently selected month/year shows up) to move the whole calendar.</p>
273
274<h4>Keyboard navigation</h4>
275
276<p>Starting with version 0.9.2, you can also use the keyboard to select
277dates (only for popup calendars; does <em>not</em> work with Opera
2787 or Konqueror/Safari).  The following keys are available:</p>
279
280<ul>
281
282  <li><span class="key">&larr;</span> , <span class="key">&rarr;</span> ,
283  <span class="key">&uarr;</span> , <span class="key">&darr;</span> -- select date</li>
284  <li><span class="key">CTRL</span> + <span class="key">&larr;</span> ,
285  <span class="key">&rarr;</span> -- select month</li>
286  <li><span class="key">CTRL</span> + <span class="key">&uarr;</span> ,
287  <span class="key">&darr;</span> -- select year</li>
288  <li><span class="key">SPACE</span> -- go to <em>today</em> date</li>
289  <li><span class="key">ENTER</span> -- accept the currently selected date</li>
290  <li><span class="key">ESC</span> -- cancel selection</li>
291
292</ul>
293
294          </td>
295
296          <td style="padding: 5px; margin: 5px; border: 1px solid #984; background: #ed9; width: 15em;">
297
298            <div style="background: #984; color: #fea; font-weight: bold; padding: 2px; text-align: center">
299              Flat calendar
300            </div>
301
302            <p style="width: 12em"><small>A non-popup version will appear below as soon
303              as the page is loaded.  Note that it doesn't show the week number.</small></p>
304
305            <!-- the calendar will be inserted here -->
306            <div id="display" style="float: right; clear: both;"></div>
307            <div id="preview" style="font-size: 80%; text-align: center; padding: 2px"></div>
308
309            <p style="width: 12em"><small>
310              The example above uses the <code>setDisabledHandler()</code> member function
311              to setup a handler that would only enable days withing a range of 10 days,
312              forward or backward, from the current date.
313            </small></p>
314
315          </div>
316
317          </td>
318
319        </tr>
320      </table>
321
322<hr /><address>
323&copy; <a href="http://dynarch.com">dynarch.com</a> 2002-2003 <br />
324Author: <a href="http://dynarch.com/mishoo/">Mihai
325Bazon</a><br /> Distributed under the <a
326href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.</address>
327
328<p style="font-size: smaller">If you use this script on a public page it
329would be nice if you would <a href="mailto:mishoo@infoiasi.ro">let me
330know</a>.</p>
331
332</body></html>
Note: See TracBrowser for help on using the repository browser.