| 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 setup [flat 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 | <style type="text/css"> |
|---|
| 22 | .special { background-color: #000; color: #fff; } |
|---|
| 23 | </style> |
|---|
| 24 | |
|---|
| 25 | </head> |
|---|
| 26 | |
|---|
| 27 | <body> |
|---|
| 28 | |
|---|
| 29 | <h2>DHTML Calendar — for the impatient</h2> |
|---|
| 30 | |
|---|
| 31 | <blockquote> |
|---|
| 32 | <p> |
|---|
| 33 | This page demonstrates how to setup a flat calendar. Examples of |
|---|
| 34 | <em>popup</em> calendars are available in <a |
|---|
| 35 | href="simple-1.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 | <div style="float: right; margin-left: 1em; margin-bottom: 1em;" |
|---|
| 51 | id="calendar-container"></div> |
|---|
| 52 | |
|---|
| 53 | <script type="text/javascript"> |
|---|
| 54 | var SPECIAL_DAYS = { |
|---|
| 55 | 0 : [ 13, 24 ], // special days in January |
|---|
| 56 | 2 : [ 1, 6, 8, 12, 18 ], // special days in March |
|---|
| 57 | 8 : [ 21, 11 ] // special days in September |
|---|
| 58 | }; |
|---|
| 59 | |
|---|
| 60 | function dateIsSpecial(year, month, day) { |
|---|
| 61 | var m = SPECIAL_DAYS[month]; |
|---|
| 62 | if (!m) return false; |
|---|
| 63 | for (var i in m) if (m[i] == day) return true; |
|---|
| 64 | return false; |
|---|
| 65 | }; |
|---|
| 66 | |
|---|
| 67 | function dateChanged(calendar) { |
|---|
| 68 | // Beware that this function is called even if the end-user only |
|---|
| 69 | // changed the month/year. In order to determine if a date was |
|---|
| 70 | // clicked you can use the dateClicked property of the calendar: |
|---|
| 71 | if (calendar.dateClicked) { |
|---|
| 72 | // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php |
|---|
| 73 | var y = calendar.date.getFullYear(); |
|---|
| 74 | var m = calendar.date.getMonth(); // integer, 0..11 |
|---|
| 75 | var d = calendar.date.getDate(); // integer, 1..31 |
|---|
| 76 | // redirect... |
|---|
| 77 | window.location = "/" + y + "/" + m + "/" + d + "/index.php"; |
|---|
| 78 | } |
|---|
| 79 | }; |
|---|
| 80 | |
|---|
| 81 | Calendar.setup( |
|---|
| 82 | { |
|---|
| 83 | flat : "calendar-container", // ID of the parent element |
|---|
| 84 | flatCallback : dateChanged, // our callback function |
|---|
| 85 | dateStatusFunc : function(date, y, m, d) { |
|---|
| 86 | if (dateIsSpecial(y, m, d)) return "special"; |
|---|
| 87 | else return false; // other dates are enabled |
|---|
| 88 | // return true if you want to disable other dates |
|---|
| 89 | } |
|---|
| 90 | } |
|---|
| 91 | ); |
|---|
| 92 | </script> |
|---|
| 93 | |
|---|
| 94 | <p>The positioning of the DIV that contains the calendar is entirely your |
|---|
| 95 | job. For instance, the "calendar-container" DIV from this page has the |
|---|
| 96 | following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p> |
|---|
| 97 | |
|---|
| 98 | <p>Following there is the code that has been used to create this calendar. |
|---|
| 99 | You can find the full description of the <tt>Calendar.setup()</tt> function |
|---|
| 100 | in the <a href="doc/html/reference.html">calendar documenation</a>.</p> |
|---|
| 101 | |
|---|
| 102 | <pre |
|---|
| 103 | ><div style="float: right; margin-left: 1em; margin-bottom: 1em;" |
|---|
| 104 | id="calendar-container"></div> |
|---|
| 105 | |
|---|
| 106 | <script type="text/javascript"> |
|---|
| 107 | function dateChanged(calendar) { |
|---|
| 108 | // Beware that this function is called even if the end-user only |
|---|
| 109 | // changed the month/year. In order to determine if a date was |
|---|
| 110 | // clicked you can use the dateClicked property of the calendar: |
|---|
| 111 | if (calendar.dateClicked) { |
|---|
| 112 | // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php |
|---|
| 113 | var y = calendar.date.getFullYear(); |
|---|
| 114 | var m = calendar.date.getMonth(); // integer, 0..11 |
|---|
| 115 | var d = calendar.date.getDate(); // integer, 1..31 |
|---|
| 116 | // redirect... |
|---|
| 117 | window.location = "/" + y + "/" + m + "/" + d + "/index.php"; |
|---|
| 118 | } |
|---|
| 119 | }; |
|---|
| 120 | |
|---|
| 121 | Calendar.setup( |
|---|
| 122 | { |
|---|
| 123 | flat : "calendar-container", // ID of the parent element |
|---|
| 124 | flatCallback : dateChanged // our callback function |
|---|
| 125 | } |
|---|
| 126 | ); |
|---|
| 127 | </script></pre> |
|---|
| 128 | |
|---|
| 129 | </body> |
|---|
| 130 | </html> |
|---|
