multiple-dates.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Sample for the multiple dates feature</title>
  4. <!-- calendar stylesheet -->
  5. <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
  6. <!-- main calendar program -->
  7. <script type="text/javascript" src="calendar.js"></script>
  8. <!-- language for the calendar -->
  9. <script type="text/javascript" src="lang/calendar-en.js"></script>
  10. <!-- the following script defines the Calendar.setup helper function, which makes
  11. adding a calendar a matter of 1 or 2 lines of code. -->
  12. <script type="text/javascript" src="calendar-setup.js"></script>
  13. </head>
  14. <body>
  15. <h1>Sample for the multiple dates feature</h1>
  16. <p>
  17. Starting version 0.9.7,
  18. the calendar is able to handle multiple dates selection, in either
  19. flat or popup form. For this to happen one needs to pass the
  20. "<tt>multiple:&nbsp;true</tt>" parameter to
  21. <tt>Calendar.setup</tt> and to install an <tt>onUpdate</tt>
  22. handler that watches for modifications.
  23. </p>
  24. <a id="trigger" href="#">[open calendar...]</a>
  25. <div id="output"></div>
  26. <script type="text/javascript">//<![CDATA[
  27. // the default multiple dates selected, first time the calendar is instantiated
  28. var MA = [];
  29. function closed(cal) {
  30. // here we'll write the output; this is only for example. You
  31. // will normally fill an input field or something with the dates.
  32. var el = document.getElementById("output");
  33. // reset initial content.
  34. el.innerHTML = "";
  35. // Reset the "MA", in case one triggers the calendar again.
  36. // CAREFUL! You don't want to do "MA = [];". We need to modify
  37. // the value of the current array, instead of creating a new one.
  38. // Calendar.setup is called only once! :-) So be careful.
  39. MA.length = 0;
  40. // walk the calendar's multiple dates selection hash
  41. for (var i in cal.multiple) {
  42. var d = cal.multiple[i];
  43. // sometimes the date is not actually selected, that's why we need to check.
  44. if (d) {
  45. // OK, selected. Fill an input field. Or something. Just for example,
  46. // we will display all selected dates in the element having the id "output".
  47. el.innerHTML += d.print("%A, %Y %B %d") + "<br />";
  48. // and push it in the "MA", in case one triggers the calendar again.
  49. MA[MA.length] = d;
  50. }
  51. }
  52. cal.hide();
  53. return true;
  54. };
  55. Calendar.setup({
  56. align : "BR",
  57. showOthers : true,
  58. multiple : MA, // pass the initial or computed array of multiple dates to be initially selected
  59. onClose : closed,
  60. button : "trigger"
  61. });
  62. //]]></script>
  63. <hr />
  64. <address><a href="http://dynarch.com/mishoo/">mishoo</a></address>
  65. <!-- hhmts start --> Last modified: Thu Mar 3 20:17:42 EET 2005 <!-- hhmts end -->
  66. </body> </html>