simple-3.html 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <html style="background-color: buttonface; color: buttontext;">
  2. <head>
  3. <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
  4. <title>Simple calendar setup [flat calendar]</title>
  5. <!-- calendar stylesheet -->
  6. <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
  7. <!-- main calendar program -->
  8. <script type="text/javascript" src="calendar.js"></script>
  9. <!-- language for the calendar -->
  10. <script type="text/javascript" src="lang/calendar-en.js"></script>
  11. <!-- the following script defines the Calendar.setup helper function, which makes
  12. adding a calendar a matter of 1 or 2 lines of code. -->
  13. <script type="text/javascript" src="calendar-setup.js"></script>
  14. <style type="text/css">
  15. .special { background-color: #000; color: #fff; }
  16. </style>
  17. </head>
  18. <body>
  19. <h2>DHTML Calendar &mdash; for the impatient</h2>
  20. <blockquote>
  21. <p>
  22. This page demonstrates how to setup a flat calendar. Examples of
  23. <em>popup</em> calendars are available in <a
  24. href="simple-1.html">another page</a>.
  25. </p>
  26. <p>
  27. The code in this page uses a helper function defined in
  28. "calendar-setup.js". With it you can setup the calendar in
  29. minutes. If you're not <em>that</em> impatient, ;-) <a
  30. href="doc/html/reference.html">complete documenation</a> is
  31. available.
  32. </p>
  33. </blockquote>
  34. <hr />
  35. <div style="float: right; margin-left: 1em; margin-bottom: 1em;"
  36. id="calendar-container"></div>
  37. <script type="text/javascript">
  38. var SPECIAL_DAYS = {
  39. 0 : [ 13, 24 ], // special days in January
  40. 2 : [ 1, 6, 8, 12, 18 ], // special days in March
  41. 8 : [ 21, 11 ] // special days in September
  42. };
  43. function dateIsSpecial(year, month, day) {
  44. var m = SPECIAL_DAYS[month];
  45. if (!m) return false;
  46. for (var i in m) if (m[i] == day) return true;
  47. return false;
  48. };
  49. function dateChanged(calendar) {
  50. // Beware that this function is called even if the end-user only
  51. // changed the month/year. In order to determine if a date was
  52. // clicked you can use the dateClicked property of the calendar:
  53. if (calendar.dateClicked) {
  54. // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
  55. var y = calendar.date.getFullYear();
  56. var m = calendar.date.getMonth(); // integer, 0..11
  57. var d = calendar.date.getDate(); // integer, 1..31
  58. // redirect...
  59. window.location = "/" + y + "/" + m + "/" + d + "/index.php";
  60. }
  61. };
  62. Calendar.setup(
  63. {
  64. flat : "calendar-container", // ID of the parent element
  65. flatCallback : dateChanged, // our callback function
  66. dateStatusFunc : function(date, y, m, d) {
  67. if (dateIsSpecial(y, m, d)) return "special";
  68. else return false; // other dates are enabled
  69. // return true if you want to disable other dates
  70. }
  71. }
  72. );
  73. </script>
  74. <p>The positioning of the DIV that contains the calendar is entirely your
  75. job. For instance, the "calendar-container" DIV from this page has the
  76. following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
  77. <p>Following there is the code that has been used to create this calendar.
  78. You can find the full description of the <tt>Calendar.setup()</tt> function
  79. in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
  80. <pre
  81. >&lt;div style="float: right; margin-left: 1em; margin-bottom: 1em;"
  82. id="calendar-container"&gt;&lt;/div&gt;
  83. &lt;script type="text/javascript"&gt;
  84. function dateChanged(calendar) {
  85. // Beware that this function is called even if the end-user only
  86. // changed the month/year. In order to determine if a date was
  87. // clicked you can use the dateClicked property of the calendar:
  88. if (calendar.dateClicked) {
  89. // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
  90. var y = calendar.date.getFullYear();
  91. var m = calendar.date.getMonth(); // integer, 0..11
  92. var d = calendar.date.getDate(); // integer, 1..31
  93. // redirect...
  94. window.location = "/" + y + "/" + m + "/" + d + "/index.php";
  95. }
  96. };
  97. Calendar.setup(
  98. {
  99. flat : "calendar-container", // ID of the parent element
  100. flatCallback : dateChanged // our callback function
  101. }
  102. );
  103. &lt;/script&gt;</pre>
  104. </body>
  105. </html>