diff options
| author | Nathan Kinkade <nath@nkinka.de> | 2008-02-03 23:23:24 +0000 |
|---|---|---|
| committer | Nathan Kinkade <nath@nkinka.de> | 2008-02-03 23:23:24 +0000 |
| commit | d895b852a6e160496ffc760d46d3719a3d62ff86 (patch) | |
| tree | 52230bb04148197e8312e09b5c5273417e7a3be9 /js/jscalendar/multiple-dates.html | |
Initial checkin of nutridb.org and basic subversion directory structure
Diffstat (limited to 'js/jscalendar/multiple-dates.html')
| -rw-r--r-- | js/jscalendar/multiple-dates.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/js/jscalendar/multiple-dates.html b/js/jscalendar/multiple-dates.html new file mode 100644 index 0000000..caf1920 --- /dev/null +++ b/js/jscalendar/multiple-dates.html @@ -0,0 +1,82 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Sample for the multiple dates feature</title> + <!-- calendar stylesheet --> + <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /> + + <!-- main calendar program --> + <script type="text/javascript" src="calendar.js"></script> + + <!-- language for the calendar --> + <script type="text/javascript" src="lang/calendar-en.js"></script> + + <!-- the following script defines the Calendar.setup helper function, which makes + adding a calendar a matter of 1 or 2 lines of code. --> + <script type="text/javascript" src="calendar-setup.js"></script> +</head> + +<body> + <h1>Sample for the multiple dates feature</h1> + + <p> + Starting version 0.9.7, + the calendar is able to handle multiple dates selection, in either + flat or popup form. For this to happen one needs to pass the + "<tt>multiple: true</tt>" parameter to + <tt>Calendar.setup</tt> and to install an <tt>onUpdate</tt> + handler that watches for modifications. + </p> + + <a id="trigger" href="#">[open calendar...]</a> + + <div id="output"></div> + + <script type="text/javascript">//<![CDATA[ + // the default multiple dates selected, first time the calendar is instantiated + var MA = []; + + function closed(cal) { + + // here we'll write the output; this is only for example. You + // will normally fill an input field or something with the dates. + var el = document.getElementById("output"); + + // reset initial content. + el.innerHTML = ""; + + // Reset the "MA", in case one triggers the calendar again. + // CAREFUL! You don't want to do "MA = [];". We need to modify + // the value of the current array, instead of creating a new one. + // Calendar.setup is called only once! :-) So be careful. + MA.length = 0; + + // walk the calendar's multiple dates selection hash + for (var i in cal.multiple) { + var d = cal.multiple[i]; + // sometimes the date is not actually selected, that's why we need to check. + if (d) { + // OK, selected. Fill an input field. Or something. Just for example, + // we will display all selected dates in the element having the id "output". + el.innerHTML += d.print("%A, %Y %B %d") + "<br />"; + + // and push it in the "MA", in case one triggers the calendar again. + MA[MA.length] = d; + } + } + cal.hide(); + return true; + }; + + Calendar.setup({ + align : "BR", + showOthers : true, + multiple : MA, // pass the initial or computed array of multiple dates to be initially selected + onClose : closed, + button : "trigger" + }); + //]]></script> + +<hr /> +<address><a href="http://dynarch.com/mishoo/">mishoo</a></address> +<!-- hhmts start --> Last modified: Thu Mar 3 20:17:42 EET 2005 <!-- hhmts end --> +</body> </html> |