skins/jscalendar/doc/html/reference.html

   1 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html>
   3 <!--
   4
   5 Generated from TeX source by tex2page, v 4r8f
   6 (running on MzScheme 204, unix),
   7 (c) Dorai Sitaram,
   8 http://www.ccs.neu.edu/~dorai/tex2page/tex2page-doc.html
   9
  10 -->
  11 <head>
  12 <title>
  13 DHTML Calendar Widget
  14 </title>
  15 <link rel="stylesheet" type="text/css" href="reference.css" title=default>
  16 <link rel="stylesheet" type="text/css" href="reference-Z-S.css" title=default>
  17 <meta name=robots content="index,follow">
  18 </head>
  19 <body>
  20 <p>
  21 </p>
  22 <p>
  23 </p>
  24 <p>
  25 </p>
  26 <p>
  27 </p>
  28 <p>
  29 </p>
  30 <p>
  31
  32
  33
  34 </p>
  35 <p>
  36
  37
  38
  39 </p>
  40 <p>
  41
  42
  43 </p>
  44 <p>
  45 </p>
  46 <p>
  47 </p>
  48 <h1 class=title align=center><br><br>DHTML Calendar Widget</h1>
  49 <p></p>
  50 <div align=center>
  51 Mihai Bazon, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><p>February 6, 2004<br></p>
  52 <p></p>
  53 <p>
  54 <span class=small>calendar version: 0.9.6 &#8220;Keep cool but don&#8217;t freeze&#8221;</span>
  55 </p>
  56 </div>
  57 <p></p>
  58 <p>
  59 <span class=small><code class=verbatim></code></span>
  60 </p>
  61 <span class=small><blockquote>
  62 <div align=right><table><tr><td>
  63
  64 </td></tr></table></div>
  65
  66 </blockquote></span>
  67 <a name="node_sec_Temp_1"></a>
  68 <h1>Contents</h1><p><a name="node_toc_start"></a></p>
  69 <p><b>
  70 &nbsp; &nbsp; <a name="node_toc_node_sec_1"></a><a href="#node_sec_1">1&nbsp;&nbsp;Overview</a></b><br>
  71 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_1.1"></a><a href="#node_sec_1.1">1.1&nbsp;&nbsp;How does this thing work?</a><br>
  72 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_1.2"></a><a href="#node_sec_1.2">1.2&nbsp;&nbsp;Project files</a><br>
  73 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_1.3"></a><a href="#node_sec_1.3">1.3&nbsp;&nbsp;License</a><br>
  74 </p>
  75 <p><b>
  76 &nbsp; &nbsp; <a name="node_toc_node_sec_2"></a><a href="#node_sec_2">2&nbsp;&nbsp;Quick startup</a></b><br>
  77 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_2.1"></a><a href="#node_sec_2.1">2.1&nbsp;&nbsp;Installing a popup calendar</a><br>
  78 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_2.2"></a><a href="#node_sec_2.2">2.2&nbsp;&nbsp;Installing a flat calendar</a><br>
  79 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_2.3"></a><a href="#node_sec_2.3">2.3&nbsp;&nbsp;<tt>Calendar.setup</tt> in detail</a><br>
  80 </p>
  81 <p><b>
  82 &nbsp; &nbsp; <a name="node_toc_node_sec_3"></a><a href="#node_sec_3">3&nbsp;&nbsp;The Calendar object overview</a></b><br>
  83 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_3.1"></a><a href="#node_sec_3.1">3.1&nbsp;&nbsp;Creating a calendar</a><br>
  84 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_3.2"></a><a href="#node_sec_3.2">3.2&nbsp;&nbsp;Order does matter ;-)</a><br>
  85 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_3.3"></a><a href="#node_sec_3.3">3.3&nbsp;&nbsp;Caching the object</a><br>
  86 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_3.4"></a><a href="#node_sec_3.4">3.4&nbsp;&nbsp;Callback functions</a><br>
  87 </p>
  88 <p><b>
  89 &nbsp; &nbsp; <a name="node_toc_node_sec_4"></a><a href="#node_sec_4">4&nbsp;&nbsp;The Calendar object API reference</a></b><br>
  90 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.1"></a><a href="#node_sec_4.1">4.1&nbsp;&nbsp;<tt>Calendar</tt> constructor</a><br>
  91 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.2"></a><a href="#node_sec_4.2">4.2&nbsp;&nbsp;Useful member variables (properties)</a><br>
  92 &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3"></a><a href="#node_sec_4.3">4.3&nbsp;&nbsp;Public methods</a><br>
  93 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.1"></a><a href="#node_sec_4.3.1">4.3.1&nbsp;&nbsp;<tt>Calendar.create</tt></a><br>
  94 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.2"></a><a href="#node_sec_4.3.2">4.3.2&nbsp;&nbsp;<tt>Calendar.callHandler</tt></a><br>
  95 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.3"></a><a href="#node_sec_4.3.3">4.3.3&nbsp;&nbsp;<tt>Calendar.callCloseHandler</tt></a><br>
  96 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.4"></a><a href="#node_sec_4.3.4">4.3.4&nbsp;&nbsp;<tt>Calendar.hide</tt></a><br>
  97 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.5"></a><a href="#node_sec_4.3.5">4.3.5&nbsp;&nbsp;<tt>Calendar.setDateFormat</tt></a><br>
  98 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.6"></a><a href="#node_sec_4.3.6">4.3.6&nbsp;&nbsp;<tt>Calendar.setTtDateFormat</tt></a><br>
  99 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.7"></a><a href="#node_sec_4.3.7">4.3.7&nbsp;&nbsp;<tt>Calendar.setDisabledHandler</tt></a><br>
 100 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.8"></a><a href="#node_sec_4.3.8">4.3.8&nbsp;&nbsp;<tt>Calendar.setDateStatusHandler</tt></a><br>
 101 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.9"></a><a href="#node_sec_4.3.9">4.3.9&nbsp;&nbsp;<tt>Calendar.show</tt></a><br>
 102 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.10"></a><a href="#node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAt</tt></a><br>
 103 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.11"></a><a href="#node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a><br>
 104 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.12"></a><a href="#node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setDate</tt></a><br>
 105 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.13"></a><a href="#node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.setFirstDayOfWeek</tt></a><br>
 106 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.14"></a><a href="#node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a><br>
 107 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="node_toc_node_sec_4.3.15"></a><a href="#node_sec_4.3.15">4.3.15&nbsp;&nbsp;<tt>Calendar.setRange</tt></a><br>
 108 </p>
 109 <p><b>
 110 &nbsp; &nbsp; <a name="node_toc_node_sec_5"></a><a href="#node_sec_5">5&nbsp;&nbsp;Side effects</a></b><br>
 111 </p>
 112 <p><b>
 113 &nbsp; &nbsp; <a name="node_toc_node_sec_6"></a><a href="#node_sec_6">6&nbsp;&nbsp;Credits</a></b><br>
 114 </p>
 115 <p>
 116 </p>
 117 <p>
 118 </p>
 119 <a name="node_sec_1"></a>
 120 <h1><a href="#node_toc_node_sec_1">1&nbsp;&nbsp;Overview</a></h1><p>The DHTML Calendar widget<a name="call_footnote_Temp_2"></a><a href="#footnote_Temp_2"><sup><small>1</small></sup></a>
 121 is an (HTML) user interface element that gives end-users a friendly way to
 122 select date and time.  It works in a web browser.  The first versions only provided
 123 support for popup calendars, while starting with version 0.9 it also supports
 124 &#8220;flat&#8221; display.  A &#8220;flat&#8221; calendar is a calendar that stays visible in the
 125 page all the time.  In this mode it could be very useful for &#8220;blog&#8221; pages and
 126 other pages that require the calendar to be always present.</p>
 127 <p>
 128 The calendar is compatible with most popular browsers nowadays.  While it&#8217;s
 129 created using web standards and it should generally work with any compliant
 130 browser, the following browsers were found to work: Mozilla (the
 131 development platform), Netscape&nbsp;6.0 or better, all other Gecko-based browsers,
 132 Internet Explorer&nbsp;5.0 or better <em>for Windows</em><a name="call_footnote_Temp_3"></a><a href="#footnote_Temp_3"><sup><small>2</small></sup></a>, Opera&nbsp;7<a name="call_footnote_Temp_4"></a><a href="#footnote_Temp_4"><sup><small>3</small></sup></a> and Konqueror 3.1.2 (with pretty much the
 133 same dysfunctions as in Opera).</p>
 134 <p>
 135 You can find the latest info and version at the calendar homepage:</p>
 136 <p>
 137 </p>
 138 <div align=center><table><tr><td>
 139
 140 <a href="http://dynarch.com/mishoo/calendar.epl"><tt>http://dynarch.com/mishoo/calendar.epl</tt></a>
 141 </td></tr></table></div>
 142 <p>
 143 </p>
 144 <a name="node_sec_1.1"></a>
 145 <h2><a href="#node_toc_node_sec_1.1">1.1&nbsp;&nbsp;How does this thing work?</a></h2><p>DHTML is not &#8220;another kind of HTML&#8221;.  It&#8217;s merely a naming convention.  DHTML
 146 refers to the combination of HTML, CSS, JavaScript and DOM.  DOM (Document
 147 Object Model) is a set of interfaces that glues the other three together.  In
 148 other words, DOM allows dynamic modification of an HTML page through a program.
 149 JavaScript is our programming language, since that&#8217;s what browsers like.  CSS
 150 is a way to make it look good ;-).  So all this soup is generically known as
 151 DHTML.</p>
 152 <p>
 153 Using DOM calls, the program dynamically creates a <tt>&lt;table&gt;</tt> element
 154 that contains a calendar for the given date and then inserts it in the document
 155 body.  Then it shows this table at a specified position.  Usually the position
 156 is related to some element in which the date needs to be displayed/entered,
 157 such as an input field.</p>
 158 <p>
 159 By assigning a certain CSS class to the table we can control the look of the
 160 calendar through an external CSS file; therefore, in order to change the
 161 colors, backgrounds, rollover effects and other stuff, you can only change a
 162 CSS file&#8212;modification of the program itself is not necessary.</p>
 163 <p>
 164 </p>
 165 <a name="node_sec_1.2"></a>
 166 <h2><a href="#node_toc_node_sec_1.2">1.2&nbsp;&nbsp;Project files</a></h2><p>Here&#8217;s a description of the project files, excluding documentation and example
 167 files.</p>
 168 <p>
 169 </p>
 170 <ul><p>
 171 </p>
 172 <li><p>the main program file (<tt>calendar.js</tt>).  This defines all the logic
 173 behind the calendar widget.</p>
 174 <p>
 175 </p>
 176 <li><p>the CSS files (<tt>calendar-*.css</tt>).  Loading one of them is
 177 necessary in order to see the calendar as intended.</p>
 178 <p>
 179 </p>
 180 <li><p>the language definition files (<tt>lang/calendar-*.js</tt>).  They are
 181 plain JavaScript files that contain all texts that are displayed by the
 182 calendar.  Loading one of them is necessary.</p>
 183 <p>
 184 </p>
 185 <li><p>helper functions for quick setup of the calendar
 186 (<tt>calendar-setup.js</tt>).  You can do fine without it, but starting with
 187 version 0.9.3 this is the recommended way to setup a calendar.</p>
 188 <p>
 189 </p>
 190 </ul><p></p>
 191 <p>
 192 </p>
 193 <a name="node_sec_1.3"></a>
 194 <h2><a href="#node_toc_node_sec_1.3">1.3&nbsp;&nbsp;License</a></h2><p></p>
 195 <div align=center><table><tr><td>
 196
 197 &copy; Mihai Bazon, 2002 &#8211; 2003, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><br>
 198 <a href="http://dynarch.com/mishoo/"><tt>http://dynarch.com/mishoo/</tt></a>
 199 </td></tr></table></div>
 200 <p>
 201 The calendar is released under the
 202 <a href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a>.  You
 203 can <a href="http://www.gnu.org/licenses/lgpl.html">read the entire license text
 204 here</a>.</p>
 205 <p>
 206 </p>
 207 <a name="node_sec_2"></a>
 208 <h1><a href="#node_toc_node_sec_2">2&nbsp;&nbsp;Quick startup</a></h1><p></p>
 209 <p>
 210 Installing the calendar used to be quite a task until version 0.9.3.  Starting
 211 with 0.9.3 I have included the file <tt>calendar-setup.js</tt> whose goal is to
 212 assist you to setup a popup or flat calendar in minutes.  You are
 213 encouraged to modify this file and <em>not</em> calendar.js if you need
 214 extra customization, but you&#8217;re on your own.</p>
 215 <p>
 216 First you have to include the needed scripts and style-sheet.  Make sure you do
 217 this in your document&#8217;s <tt>&lt;head&gt;</tt> section, also make sure you put the
 218 correct paths to the scripts.</p>
 219 <p>
 220 </p>
 221 <pre class=verbatim>&lt;style type=&quot;text/css&quot;&gt;@import url(calendar-win2k-1.css);&lt;/style&gt;
 222 &lt;script type=&quot;text/javascript&quot; src=&quot;calendar.js&quot;&gt;&lt;/script&gt;
 223 &lt;script type=&quot;text/javascript&quot; src=&quot;lang/calendar-en.js&quot;&gt;&lt;/script&gt;
 224 &lt;script type=&quot;text/javascript&quot; src=&quot;calendar-setup.js&quot;&gt;&lt;/script&gt;
 225 </pre><p></p>
 226 <p>
 227 </p>
 228 <a name="node_sec_2.1"></a>
 229 <h2><a href="#node_toc_node_sec_2.1">2.1&nbsp;&nbsp;Installing a popup calendar</a></h2><p></p>
 230 <p>
 231 Now suppose you have the following HTML:</p>
 232 <p>
 233 </p>
 234 <pre class=verbatim>&lt;form ...&gt;
 235   &lt;input type=&quot;text&quot; id=&quot;data&quot; name=&quot;data&quot; /&gt;
 236   &lt;button id=&quot;trigger&quot;&gt;...&lt;/button&gt;
 237 &lt;/form&gt;
 238 </pre><p></p>
 239 <p>
 240 You want the button to popup a calendar widget when clicked?  Just
 241 insert the following code immediately <em>after</em> the HTML form:</p>
 242 <p>
 243 </p>
 244 <pre class=verbatim>&lt;script type=&quot;text/javascript&quot;&gt;
 245   Calendar.setup(
 246     {
 247       inputField  : &quot;data&quot;,         // ID of the input field
 248       ifFormat    : &quot;%m %d, %Y&quot;,    // the date format
 249       button      : &quot;trigger&quot;       // ID of the button
 250     }
 251   );
 252 &lt;/script&gt;
 253 </pre><p></p>
 254 <p>
 255 The <tt>Calendar.setup</tt> function, defined in <tt>calendar-setup.js</tt>
 256 takes care of &#8220;patching&#8221; the button to display a calendar when clicked.  The
 257 calendar is by default in single-click mode and linked with the given input
 258 field, so that when the end-user selects a date it will update the input field
 259 with the date in the given format and close the calendar.  If you are a
 260 long-term user of the calendar you probably remember that for doing this you
 261 needed to write a couple functions and add an &#8220;onclick&#8221; handler for the
 262 button by hand.</p>
 263 <p>
 264 By looking at the example above we can see that the function
 265 <tt>Calendar.setup</tt> receives only one parameter: a JavaScript object.
 266 Further, that object can have lots of properties that tell to the setup
 267 function how would we like to have the calendar.  For instance, if we would
 268 like a calendar that closes at double-click instead of single-click we would
 269 also include the following: <tt>singleClick:false</tt>.</p>
 270 <p>
 271 For a list of all supported parameters please see the section
 272 <a href="#node_sec_2.3">2.3</a>.</p>
 273 <p>
 274 </p>
 275 <a name="node_sec_2.2"></a>
 276 <h2><a href="#node_toc_node_sec_2.2">2.2&nbsp;&nbsp;Installing a flat calendar</a></h2><p></p>
 277 <p>
 278 Here&#8217;s how to configure a flat calendar, using the same <tt>Calendar.setup</tt>
 279 function.  First, you should have an empty element with an ID.  This element
 280 will act as a container for the calendar.  It can be any block-level element,
 281 such as DIV, TABLE, etc.  We will use a DIV in this example.</p>
 282 <p>
 283 </p>
 284 <pre class=verbatim>&lt;div id=&quot;calendar-container&quot;&gt;&lt;/div&gt;
 285 </pre><p></p>
 286 <p>
 287 Then there is the JavaScript code that sets up the calendar into the
 288 &#8220;calendar-container&#8221; DIV.  The code can occur anywhere in HTML
 289 <em>after</em> the DIV element.</p>
 290 <p>
 291 </p>
 292 <pre class=verbatim>&lt;script type=&quot;text/javascript&quot;&gt;
 293   function dateChanged(calendar) {
 294     // Beware that this function is called even if the end-user only
 295     // changed the month/year.  In order to determine if a date was
 296     // clicked you can use the dateClicked property of the calendar:
 297     if (calendar.dateClicked) {
 298       // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
 299       var y = calendar.date.getFullYear();
 300       var m = calendar.date.getMonth();     // integer, 0..11
 301       var d = calendar.date.getDate();      // integer, 1..31
 302       // redirect...
 303       window.location = &quot;/&quot; + y + &quot;/&quot; + m + &quot;/&quot; + d + &quot;/index.php&quot;;
 304     }
 305   };
 306
 307   Calendar.setup(
 308     {
 309       flat         : &quot;calendar-container&quot;, // ID of the parent element
 310       flatCallback : dateChanged           // our callback function
 311     }
 312   );
 313 &lt;/script&gt;
 314 </pre><p></p>
 315 <p>
 316 </p>
 317 <a name="node_sec_2.3"></a>
 318 <h2><a href="#node_toc_node_sec_2.3">2.3&nbsp;&nbsp;<tt>Calendar.setup</tt> in detail</a></h2><p></p>
 319 <p>
 320 Following there is the complete list of properties interpreted by
 321 Calendar.setup.  All of them have default values, so you can pass only those
 322 which you would like to customize.  Anyway, you <em>must</em> pass at least one
 323 of <tt>inputField</tt>, <tt>displayArea</tt> or <tt>button</tt>, for a popup
 324 calendar, or <tt>flat</tt> for a flat calendar.  Otherwise you will get a
 325 warning message saying that there&#8217;s nothing to setup.</p>
 326 <p>
 327 </p>
 328 <span class=small><table border=0><tr><td valign=top ><b>property</b> </td><td valign=top ><b>type</b> </td><td valign=top ><b>description</b> </td><td valign=top ><b>default</b>
 329 </td></tr>
 330 <tr><td valign=top ><tt>inputField</tt>
 331 </td><td valign=top >string </td><td valign=top >The ID of your input field.
 332 </td><td valign=top >null
 333 </td></tr>
 334 <tr><td valign=top ><tt>displayArea</tt>
 335 </td><td valign=top >string </td><td valign=top >This is the ID of a &lt;span&gt;, &lt;div&gt;, or any other element that you would like to use to display the current date. This is generally useful only if the input field is hidden, as an area to display the date.
 336 </td><td valign=top >null
 337 </td></tr>
 338 <tr><td valign=top ><tt>button</tt>
 339 </td><td valign=top >string </td><td valign=top >The ID of the calendar &#8220;trigger&#8221;. This is an element (ordinarily a button or an image) that will dispatch a certain event (usually &#8220;click&#8221;) to the function that creates and displays the calendar.
 340 </td><td valign=top >null
 341 </td></tr>
 342 <tr><td valign=top ><tt>eventName</tt>
 343 </td><td valign=top >string </td><td valign=top >The name of the event that will trigger the calendar. The name should be without the &#8220;on&#8221; prefix, such as &#8220;click&#8221; instead of &#8220;onclick&#8221;. Virtually all users will want to let this have the default value (&#8220;click&#8221;). Anyway, it could be useful if, say, you want the calendar to appear when the input field is focused and have no trigger button (in this case use &#8220;focus&#8221; as the event name).
 344 </td><td valign=top >&#8220;click&#8221;
 345 </td></tr>
 346 <tr><td valign=top ><tt>ifFormat</tt>
 347 </td><td valign=top >string </td><td valign=top >The format string that will be used to enter the date in the input field. This format will be honored even if the input field is hidden.
 348 </td><td valign=top >&#8220;%Y/%m/%d&#8221;
 349 </td></tr>
 350 <tr><td valign=top ><tt>daFormat</tt>
 351 </td><td valign=top >string </td><td valign=top >Format of the date displayed in the displayArea (if specified).
 352 </td><td valign=top >&#8220;%Y/%m/%d&#8221;
 353 </td></tr>
 354 <tr><td valign=top ><tt>singleClick</tt>
 355 </td><td valign=top >boolean </td><td valign=top >Wether the calendar is in &#8220;single-click mode&#8221; or &#8220;double-click mode&#8221;. If true (the default) the calendar will be created in single-click mode.
 356 </td><td valign=top >true
 357 </td></tr>
 358 <tr><td valign=top ><tt>disableFunc</tt>
 359 </td><td valign=top >function </td><td valign=top >A function that receives a JS Date object.  It should return
 360 <tt>true</tt> if that date has to be disabled, <tt>false</tt> otherwise.
 361 <font color="red">DEPRECATED (see below).</font>
 362 </td><td valign=top >null
 363 </td></tr>
 364 <tr><td valign=top ><tt>dateStatusFunc</tt>
 365 </td><td valign=top >function </td><td valign=top >A function that receives a JS Date object and returns a boolean
 366 or a string.  This function allows one to set a certain CSS class to some
 367 date, therefore making it look different.  If it returns <tt>true</tt> then
 368 the date will be disabled.  If it returns <tt>false</tt> nothing special
 369 happens with the given date.  If it returns a string then that will be taken
 370 as a CSS class and appended to the date element.  If this string is
 371 &#8220;disabled&#8221; then the date is also disabled (therefore is like returning
 372 <tt>true</tt>).  For more information please also refer to section
 373 <a href="#node_sec_4.3.8">4.3.8</a>.
 374 </td><td valign=top >null
 375 </td></tr>
 376 <tr><td valign=top ><tt>firstDay</tt>
 377 </td><td valign=top >integer </td><td valign=top >Specifies which day is to be displayed as the first day of
 378 week.  Possible values are 0 to 6; 0 means Sunday, 1 means Monday, ..., 6
 379 means Saturday.  The end user can easily change this too, by clicking on the
 380 day name in the calendar header.
 381 </td><td valign=top >0
 382 </td></tr>
 383 <tr><td valign=top ><tt>weekNumbers</tt>
 384 </td><td valign=top >boolean </td><td valign=top >If &#8220;true&#8221; then the calendar will display week numbers.
 385 </td><td valign=top >true
 386 </td></tr>
 387 <tr><td valign=top ><tt>align</tt>
 388 </td><td valign=top >string </td><td valign=top >Alignment of the calendar, relative to the reference element. The
 389 reference element is dynamically chosen like this: if a displayArea is
 390 specified then it will be the reference element. Otherwise, the input field
 391 is the reference element.  For the meaning of the alignment characters
 392 please section <a href="#node_sec_4.3.11">4.3.11</a>.
 393 </td><td valign=top >&#8220;Bl&#8221;
 394 </td></tr>
 395 <tr><td valign=top ><tt>range</tt>
 396 </td><td valign=top >array </td><td valign=top >An array having exactly 2 elements, integers. (!) The first [0] element is the minimum year that is available, and the second [1] element is the maximum year that the calendar will allow.
 397 </td><td valign=top >[1900, 2999]
 398 </td></tr>
 399 <tr><td valign=top ><tt>flat</tt>
 400 </td><td valign=top >string </td><td valign=top >If you want a flat calendar, pass the ID of the parent object in
 401 this property.  If not, pass <tt>null</tt> here (or nothing at all as
 402 <tt>null</tt> is the default value).
 403 </td><td valign=top >null
 404 </td></tr>
 405 <tr><td valign=top ><tt>flatCallback</tt>
 406 </td><td valign=top >function </td><td valign=top >You should provide this function if the calendar is flat.  It
 407 will be called when the date in the calendar is changed with a reference to
 408 the calendar object.  See section <a href="#node_sec_2.2">2.2</a> for an example
 409 of how to setup a flat calendar.
 410 </td><td valign=top >null
 411 </td></tr>
 412 <tr><td valign=top ><tt>onSelect</tt>
 413 </td><td valign=top >function </td><td valign=top >If you provide a function handler here then you have to manage
 414 the &#8220;click-on-date&#8221; event by yourself.  Look in the calendar-setup.js and
 415 take as an example the onSelect handler that you can see there.
 416 </td><td valign=top >null
 417 </td></tr>
 418 <tr><td valign=top ><tt>onClose</tt>
 419 </td><td valign=top >function </td><td valign=top >This handler will be called when the calendar needs to close.
 420 You don&#8217;t need to provide one, but if you do it&#8217;s your responsibility to
 421 hide/destroy the calendar.  You&#8217;re on your own.  Check the calendar-setup.js
 422 file for an example.
 423 </td><td valign=top >null
 424 </td></tr>
 425 <tr><td valign=top ><tt>onUpdate</tt>
 426 </td><td valign=top >function </td><td valign=top >If you supply a function handler here, it will be called right
 427 after the target field is updated with a new date.  You can use this to
 428 chain 2 calendars, for instance to setup a default date in the second just
 429 after a date was selected in the first.
 430 </td><td valign=top >null
 431 </td></tr>
 432 <tr><td valign=top ><tt>date</tt>
 433 </td><td valign=top >date </td><td valign=top >This allows you to setup an initial date where the calendar will be
 434 positioned to.  If absent then the calendar will open to the today date.
 435 </td><td valign=top >null
 436 </td></tr>
 437 <tr><td valign=top ><tt>showsTime</tt>
 438 </td><td valign=top >boolean </td><td valign=top >If this is set to <tt>true</tt> then the calendar will also
 439 allow time selection.
 440 </td><td valign=top >false
 441 </td></tr>
 442 <tr><td valign=top ><tt>timeFormat</tt>
 443 </td><td valign=top >string </td><td valign=top >Set this to &#8220;12&#8221; or &#8220;24&#8221; to configure the way that the
 444 calendar will display time.
 445 </td><td valign=top >&#8220;24&#8221;
 446 </td></tr>
 447 <tr><td valign=top ><tt>electric</tt>
 448 </td><td valign=top >boolean </td><td valign=top >Set this to &#8220;false&#8221; if you want the calendar to update the
 449 field only when closed (by default it updates the field at each date change,
 450 even if the calendar is not closed) </td><td valign=top >true
 451 </td></tr>
 452 <tr><td valign=top ><tt>position</tt>
 453 </td><td valign=top >array </td><td valign=top >Specifies the [x, y] position, relative to page&#8217;s top-left corner,
 454 where the calendar will be displayed.  If not passed then the position will
 455 be computed based on the &#8220;align&#8221; parameter.  Defaults to &#8220;null&#8221; (not
 456 used). </td><td valign=top >null
 457 </td></tr>
 458 <tr><td valign=top ><tt>cache</tt>
 459 </td><td valign=top >boolean </td><td valign=top >Set this to &#8220;true&#8221; if you want to cache the calendar object.
 460 This means that a single calendar object will be used for all fields that
 461 require a popup calendar </td><td valign=top >false
 462 </td></tr>
 463 <tr><td valign=top ><tt>showOthers</tt>
 464 </td><td valign=top >boolean </td><td valign=top >If set to &#8220;true&#8221; then days belonging to months overlapping
 465 with the currently displayed month will also be displayed in the calendar
 466 (but in a &#8220;faded-out&#8221; color) </td><td valign=top >false
 467
 468 </td></tr></table>
 469
 470 </span><p>
 471 </p>
 472 <a name="node_sec_3"></a>
 473 <h1><a href="#node_toc_node_sec_3">3&nbsp;&nbsp;The Calendar object overview</a></h1><p></p>
 474 <p>
 475 Basically you should be able to setup the calendar with the function presented
 476 in the previous section.  However, if for some reason <tt>Calendar.setup</tt>
 477 doesn&#8217;t provide all the functionality that you need and you want to tweak into
 478 the process of creating and configuring the calendar &#8220;by hand&#8221;, then this
 479 section is the way to go.</p>
 480 <p>
 481 The file <tt>calendar.js</tt> implements the functionality of the calendar.
 482 All (well, almost all) functions and variables are embedded in the JavaScript
 483 object &#8220;Calendar&#8221;.</p>
 484 <p>
 485 You can instantiate a <tt>Calendar</tt> object by calling the constructor, like
 486 this: <tt>var cal = new Calendar(<tt>...</tt>)</tt>.  We will discuss the parameters
 487 later.  After creating the object, the variable <tt>cal</tt> will contain a
 488 reference to it.  You can use this reference to access further options of the
 489 calendar, for instance:</p>
 490 <p>
 491 </p>
 492 <pre class=verbatim>cal.weekNumbers = false; // do not display week numbers
 493 cal.showsTime = true;    // include a time selector
 494 cal.setDateFormat(&quot;%Y.%m.%d %H:%M&quot;); // set this format: 2003.12.31 23:59
 495 cal.setDisabledHandler(function(date, year, month, day) {
 496   // verify date and return true if it has to be disabled
 497   // ``date'' is a JS Date object, but if you only need the
 498   // year, month and/or day you can get them separately as
 499   // next 3 parameters, as you can see in the declaration
 500   if (year == 2004) {
 501     // disable all dates from 2004
 502     return true;
 503   }
 504   return false;
 505 });
 506 </pre><p></p>
 507 <p>
 508 etc.  Prior to version
 509 0.9.3 this was the only way to configure it.  The <tt>Calendar.setup</tt>
 510 function, documented in section <a href="#node_sec_2">2</a>, basically does the same
 511 things (actually more) in order to setup the calendar, based on the parameters
 512 that you provided.</p>
 513 <p>
 514 </p>
 515 <a name="node_sec_3.1"></a>
 516 <h2><a href="#node_toc_node_sec_3.1">3.1&nbsp;&nbsp;Creating a calendar</a></h2><p>The calendar is created by following some steps (even the function
 517 <tt>Calendar.setup</tt>, described in section <a href="#node_sec_2">2</a>, does the
 518 same).  While you can skip optional (marked &#8220;opt&#8221;) steps if you&#8217;re happy with
 519 the defaults, please respect the order below.</p>
 520 <p>
 521 </p>
 522 <ol><p>
 523 </p>
 524 <li><p><em>Instantiate</em> a <tt>Calendar</tt> object.  Details about this in
 525 section <a href="#node_sec_4.1">4.1</a>.</p>
 526 <p>
 527 </p>
 528 <li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>weekNumbers</tt> property to <tt>false</tt> if you don&#8217;t want
 529 the calendar to display week numbers.</p>
 530 <p>
 531 </p>
 532 <li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>showsTime</tt> property to <tt>true</tt> if you
 533 want the calendar to also provide a time selector.</p>
 534 <p>
 535 </p>
 536 <li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>time24</tt> property to <tt>false</tt> if you want
 537 the time selector to be in 12-hour format.  Default is 24-hour format.  This
 538 property only has effect if you also set <tt>showsTime</tt> to
 539 <tt>true</tt>.</p>
 540 <p>
 541 </p>
 542 <li><p><b>opt</b>&nbsp;&nbsp; Set the range of years available for selection (see section
 543 <a href="#node_sec_4.3.15">4.3.15</a>).  The default range is [1970..2050].</p>
 544 <p>
 545 </p>
 546 <li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>getDateStatus</tt> property.  You should pass
 547 here a function that receives a JavaScript <tt>Date</tt> object and returns
 548 <tt>true</tt> if the given date should be disabled, false otherwise (details in
 549 section <a href="#node_sec_4.3.7">4.3.7</a>).</p>
 550 <p>
 551 </p>
 552 <li><p><b>opt</b>&nbsp;&nbsp; Set a date format.  Your handler function, passed to the
 553 calendar constructor, will be called when a date is selected with a reference
 554 to the calendar and a date string in this format.</p>
 555 <p>
 556 </p>
 557 <li><p><em>Create</em> the HTML elements related to the calendar.  This step
 558 practically puts the calendar in your HTML page.  You simply call
 559 <tt>Calendar.create()</tt>.  You can give an optional parameter if you wanna
 560 create a flat calendar (details in section <a href="#node_sec_4.3.1">4.3.1</a>).</p>
 561 <p>
 562 </p>
 563 <li><p><b>opt</b>&nbsp;&nbsp; Initialize the calendar to a certain date, for instance from
 564 the input field.</p>
 565 <p>
 566 </p>
 567 <li><p>Show the calendar (details in section <a href="#node_sec_4.3.9">4.3.9</a>).</p>
 568 <p>
 569 </p>
 570 </ol><p></p>
 571 <p>
 572 </p>
 573 <a name="node_sec_3.2"></a>
 574 <h2><a href="#node_toc_node_sec_3.2">3.2&nbsp;&nbsp;Order does matter ;-)</a></h2><p>As you could see in the previous section, there are more steps to be followed
 575 in order to setup the calendar.  This happens because there are two different
 576 things that need to be accomplished: first there is the JavaScript object, that
 577 is created with <tt>new Calendar(<tt>...</tt>)</tt>.  Secondly there are the HTML
 578 elements that actually lets you see and manipulate the calendar.</p>
 579 <p>
 580 </p>
 581 <span class=small>[ Those that did UI<a name="call_footnote_Temp_5"></a><a href="#footnote_Temp_5"><sup><small>4</small></sup></a> programming, no matter in what
 582 language and on what platform, may be familiar with this concept.  First there
 583 is the object in memory that lets you manipulate the UI element, and secondly
 584 there is the UI element (known as &#8220;control&#8221;, &#8220;window&#8221;, &#8220;widget&#8221;, etc.),
 585 also in memory but you don&#8217;t usually access it directly. ]
 586 </span><p>
 587 By instantiating the calendar we create the JavaScript object.  It lets us
 588 configure some properties and it also knows how to create the UI element (the
 589 HTML elements actually) that will eventually be what the end-user sees on
 590 screen.  Creation of the HTML element is accomplished by the function
 591 <tt>Calendar.create</tt>.  It knows how to create popup or flat calendars.
 592 This function is described in section <a href="#node_sec_4.3.1">4.3.1</a>.</p>
 593 <p>
 594 Some properties need to be set prior to creating the HTML elements, because
 595 otherwise they wouldn&#8217;t have any effect.  Such a property is
 596 <tt>weekNumbers</tt>&#8212;it has the default value &#8220;true&#8221;, and if you don&#8217;t
 597 want the calendar to display the week numbers you have to set it to false.  If,
 598 however, you do that <em>after</em> calling <tt>Calendar.create</tt> the calendar
 599 would still display the week numbers, because the HTML elements are already
 600 created (including the <tt>&lt;td&gt;</tt>-s in the <tt>&lt;table&gt;</tt> element that
 601 should contain the week numbers).  For this reason the order of the steps above
 602 is important.</p>
 603 <p>
 604 Another example is when you want to show the calendar.  The &#8220;create&#8221; function
 605 does create the HTML elements, but they are initially hidden (have the style
 606 &#8220;display: none&#8221;) unless the calendar is a flat calendar that should be always
 607 visible in the page.  Obviously, the <tt>Calendar.show</tt> function should be
 608 called <em>after</em> calling <tt>Calendar.create</tt>.</p>
 609 <p>
 610 </p>
 611 <a name="node_sec_3.3"></a>
 612 <h2><a href="#node_toc_node_sec_3.3">3.3&nbsp;&nbsp;Caching the object</a></h2><p>Suppose the end-user has popped up a calendar and selects a date.  The calendar
 613 then closes.  What really happens now?</p>
 614 <p>
 615 There are two approaches.  The first (used in very old versions of the
 616 calendar) was to drop completely the Calendar object and when the end-user pops
 617 up the calendar again to create another one.  This approach is bad for more
 618 reasons:</p>
 619 <p>
 620 </p>
 621 <ul><p>
 622 </p>
 623 <li><p>creating the JavaScript object and HTML elements is time-consuming</p>
 624 <p>
 625 </p>
 626 <li><p>we may loose some end-user preferences (i.e. he might prefer to have
 627 Monday for the first day of week and probably already clicked it the first time
 628 when the calendar was opened, but now he has to do it again)</p>
 629 <p>
 630 </p>
 631 </ul><p></p>
 632 <p>
 633 The second approach, implemented by the <tt>Calendar.setup</tt> function, is to
 634 cache the JavaScript object.  It does this by checking the global variable
 635 <tt>window.calendar</tt> and if it is not null it assumes it is the created
 636 Calendar object.  When the end-user closes the calendar, our code will only
 637 call &#8220;<tt>hide</tt>&#8221; on it, therefore keeping the JavaScript object and the
 638 HTML elements in place.</p>
 639 <p>
 640 <font color="red">CAVEAT:</font> &nbsp;&nbsp;&nbsp;&nbsp;Since time selection support was introduced, this
 641 &#8220;object caching&#8221; mechanism has the following drawback: if you once created
 642 the calendar with the time selection support, then other items that may not
 643 require this functionality will still get a calendar with the time selection
 644 support enabled.  And reciprocal. ;-)  Hopefully this will be corrected in a
 645 later version, but for now it doesn&#8217;t seem such a big problem.</p>
 646 <p>
 647 </p>
 648 <a name="node_sec_3.4"></a>
 649 <h2><a href="#node_toc_node_sec_3.4">3.4&nbsp;&nbsp;Callback functions</a></h2><p>You might rightfully wonder how is the calendar related to the input field?
 650 Who tells it that it has to update <em>that</em> input field when a date is
 651 selected, or that it has to jump to <em>that</em> URL when a date is clicked in
 652 flat mode?</p>
 653 <p>
 654 All this magic is done through callback functions.  The calendar doesn&#8217;t know
 655 anything about the existence of an input field, nor does it know where to
 656 redirect the browser when a date is clicked in flat mode.  It just calls your
 657 callback when a particular event is happening, and you&#8217;re responsible to handle
 658 it from there.  For a general purpose library I think this is the best model of
 659 making a truly reusable thing.</p>
 660 <p>
 661 The calendar supports the following user callbacks:</p>
 662 <p>
 663 </p>
 664 <ul><p>
 665 </p>
 666 <li><p><b>onSelect</b>&nbsp;&nbsp; &#8212; this gets called when the end-user changes the date in the
 667 calendar.  Documented in section <a href="#node_sec_4.1">4.1</a>.</p>
 668 <p>
 669 </p>
 670 <li><p><b>onClose</b>&nbsp;&nbsp; &#8212; this gets called when the calendar should close.  It&#8217;s
 671 user&#8217;s responsibility to close the calendar.  Details in section
 672 <a href="#node_sec_4.1">4.1</a>.</p>
 673 <p>
 674 </p>
 675 <li><p><b>getDateStatus</b>&nbsp;&nbsp; &#8212; this function gets called for any day in a month,
 676 just before displaying the month.  It is called with a JavaScript <tt>Date</tt>
 677 object and should return <tt>true</tt> if that date should be disabled, false
 678 if it&#8217;s an ordinary date and no action should be taken, or it can return a
 679 string in which case the returned value will be appended to the element&#8217;s CSS
 680 class (this way it provides a powerful way to make some dates &#8220;special&#8221;,
 681 i.e. highlight them differently).  Details in section
 682 <a href="#node_sec_4.3.8">4.3.8</a>.</p>
 683 <p>
 684 </p>
 685 </ul><p></p>
 686 <p>
 687 </p>
 688 <a name="node_sec_4"></a>
 689 <h1><a href="#node_toc_node_sec_4">4&nbsp;&nbsp;The Calendar object API reference</a></h1><p></p>
 690 <p>
 691 </p>
 692 <a name="node_sec_4.1"></a>
 693 <h2><a href="#node_toc_node_sec_4.1">4.1&nbsp;&nbsp;<tt>Calendar</tt> constructor</a></h2><p></p>
 694 <p>
 695 Synopsis:</p>
 696 <p>
 697 </p>
 698 <pre class=verbatim>var calendar = Calendar(firstDayOfWeek, date, onSelect, onClose);
 699 </pre><p></p>
 700 <p>
 701 Parameters are as follows:</p>
 702 <p>
 703 </p>
 704 <ul><p>
 705 </p>
 706 <li><p><b>firstDayOfWeek</b>&nbsp;&nbsp; &#8212; specifies which day is to be displayed as the first
 707 day of week.  Possible values are 0 to 6; 0 means Sunday, 1 means Monday,
 708 ..., 6 means Saturday.</p>
 709 <p>
 710 </p>
 711 <li><p><b>date</b>&nbsp;&nbsp; &#8212; a JavaScript Date object or <tt>null</tt>.  If <tt>null</tt>
 712 is passed then the calendar will default to today date.  Otherwise it will
 713 initialize on the given date.</p>
 714 <p>
 715 </p>
 716 <li><p><b>onSelect</b>&nbsp;&nbsp; &#8212; your callback for the &#8220;onChange&#8221; event.  See above.</p>
 717 <p>
 718 </p>
 719 <li><p><b>onClose</b>&nbsp;&nbsp; &#8212; your callback for the &#8220;onClose&#8221; event.  See above.</p>
 720 <p>
 721 </p>
 722 </ul><p></p>
 723 <p>
 724 </p>
 725 <a name="node_sec_Temp_6"></a>
 726 <h3><a href="#node_toc_node_sec_Temp_6">The <tt>onSelect</tt> event</a></h3><p></p>
 727 <p>
 728 Here is a typical implementation of this function:</p>
 729 <p>
 730 </p>
 731 <pre class=verbatim>function onSelect(calendar, date) {
 732   var input_field = document.getElementById(&quot;date&quot;);
 733   input_field.value = date;
 734 };
 735 </pre><p></p>
 736 <p>
 737 <tt>date</tt> is in the format selected with <tt>calendar.setDateFormat</tt>
 738 (see section <a href="#node_sec_4.3.5">4.3.5</a>).  This code simply updates the
 739 input field.  If you want the calendar to be in single-click mode then you
 740 should also close the calendar after you updated the input field, so we come to
 741 the following version:</p>
 742 <p>
 743 </p>
 744 <pre class=verbatim>function onSelect(calendar, date) {
 745   var input_field = document.getElementById(&quot;date&quot;);
 746   input_field.value = date;
 747   if (calendar.dateClicked) {
 748     calendar.callCloseHandler(); // this calls &quot;onClose&quot; (see above)
 749   }
 750 };
 751 </pre><p></p>
 752 <p>
 753 Note that we checked the member variable <tt>dateClicked</tt> and
 754 only hide the calendar if it&#8217;s <tt>true</tt>.  If this variable is <tt>false</tt> it
 755 means that no date was actually selected, but the user only changed the
 756 month/year using the navigation buttons or the menus.  We don&#8217;t want to hide
 757 the calendar in that case.</p>
 758 <p>
 759 </p>
 760 <a name="node_sec_Temp_7"></a>
 761 <h3><a href="#node_toc_node_sec_Temp_7">The <tt>onClose</tt> event</a></h3><p></p>
 762 <p>
 763 This event is triggered when the calendar should close.  It should hide or
 764 destroy the calendar object&#8212;the calendar itself just triggers the event, but
 765 it won&#8217;t close itself.</p>
 766 <p>
 767 A typical implementation of this function is the following:</p>
 768 <p>
 769 </p>
 770 <pre class=verbatim>function onClose(calendar) {
 771   calendar.hide();
 772   // or calendar.destroy();
 773 };
 774 </pre><p></p>
 775 <p>
 776 </p>
 777 <a name="node_sec_4.2"></a>
 778 <h2><a href="#node_toc_node_sec_4.2">4.2&nbsp;&nbsp;Useful member variables (properties)</a></h2><p></p>
 779 <p>
 780 After creating the Calendar object you can access the following properties:</p>
 781 <p>
 782 </p>
 783 <ul><p>
 784 </p>
 785 <li><p><tt>date</tt> &#8212; is a JavaScript <tt>Date</tt> object.  It will always
 786 reflect the date shown in the calendar (yes, even if the calendar is hidden).</p>
 787 <p>
 788 </p>
 789 <li><p><tt>isPopup</tt> &#8212; if this is true then the current Calendar object is
 790 a popup calendar.  Otherwise (false) we have a flat calendar.  This variable is
 791 set from <tt>Calendar.create</tt> and has no meaning before this function was
 792 called.</p>
 793 <p>
 794 </p>
 795 <li><p><tt>dateClicked</tt> &#8212; particularly useful in the <tt>onSelect</tt>
 796 handler, this variable tells us if a date was really clicked.  That&#8217;s because
 797 the <tt>onSelect</tt> handler is called even if the end-user only changed the
 798 month/year but did not select a date.  We don&#8217;t want to close the calendar in
 799 that case.</p>
 800 <p>
 801 </p>
 802 <li><p><tt>weekNumbers</tt> &#8212; if <tt>true</tt> (default) then the calendar
 803 displays week numbers.  If you don&#8217;t want week numbers you have to set this
 804 variable to <tt>false</tt> <em>before</em> calling <tt>Calendar.create</tt>.</p>
 805 <p>
 806 </p>
 807 <li><p><tt>showsTime</tt> &#8211; if you set this to <tt>true</tt> (it is
 808 <tt>false</tt> by default) then the calendar will also include a time selector.</p>
 809 <p>
 810 </p>
 811 <li><p><tt>time24</tt> &#8211; if you set this to <tt>false</tt> then the time
 812 selector will be in 12-hour format.  It is in 24-hour format by default.</p>
 813 <p>
 814 </p>
 815 <li><p><tt>firstDayOfWeek</tt> &#8212; specifies the first day of week (0 to 6, pass
 816 0 for Sunday, 1 for Monday, ..., 6 for Saturday).  This variable is set from
 817 constructor, but you still have a chance to modify it <em>before</em> calling
 818 <tt>Calendar.create</tt>.</p>
 819 <p>
 820 </p>
 821 </ul><p></p>
 822 <p>
 823 There are lots of other member variables, but one should access them only
 824 through member functions so I won&#8217;t document them here.</p>
 825 <p>
 826 </p>
 827 <a name="node_sec_4.3"></a>
 828 <h2><a href="#node_toc_node_sec_4.3">4.3&nbsp;&nbsp;Public methods</a></h2><p></p>
 829 <a name="node_sec_4.3.1"></a>
 830 <h3><a href="#node_toc_node_sec_4.3.1">4.3.1&nbsp;&nbsp;<tt>Calendar.create</tt></a></h3><p></p>
 831 <p>
 832 This function creates the afferent HTML elements that are needed to display the
 833 calendar.  You should call it after setting the calendar properties.  Synopsis:
 834 </p>
 835 <pre class=verbatim>calendar.create(); // creates a popup calendar
 836   // -- or --
 837 calendar.create(document.getElementById(parent_id)); // makes a flat calendar
 838 </pre><p></p>
 839 <p>
 840 It can create a popup calendar or a flat calendar.  If the &#8220;parent&#8221; argument
 841 is present (it should be a <em>reference</em>&#8212;not ID&#8212;to an HTML element) then
 842 a flat calendar is created and it is inserted in the given element.</p>
 843 <p>
 844 At any moment, given a reference to a calendar object, we can inspect if it&#8217;s a
 845 popup or a flat calendar by checking the boolean member variable
 846 <tt>isPopup</tt>:</p>
 847 <p>
 848 </p>
 849 <pre class=verbatim>if (calendar.isPopup) {
 850    // this is a popup calendar
 851 } else {
 852    // this is a flat calendar
 853 }
 854 </pre><p></p>
 855 <p>
 856 </p>
 857 <a name="node_sec_4.3.2"></a>
 858 <h3><a href="#node_toc_node_sec_4.3.2">4.3.2&nbsp;&nbsp;<tt>Calendar.callHandler</tt></a></h3><p></p>
 859 <p>
 860 This function calls the first user callback (the
 861 <tt>onSelect</tt> handler) with the required parameters.</p>
 862 <p>
 863 </p>
 864 <a name="node_sec_4.3.3"></a>
 865 <h3><a href="#node_toc_node_sec_4.3.3">4.3.3&nbsp;&nbsp;<tt>Calendar.callCloseHandler</tt></a></h3><p></p>
 866 <p>
 867 This function calls the second user callback (the
 868 <tt>onClose</tt> handler).  It&#8217;s useful when you want to have a
 869 &#8220;single-click&#8221; calendar&#8212;just call this in your <tt>onSelect</tt> handler,
 870 if a date was clicked.</p>
 871 <p>
 872 </p>
 873 <a name="node_sec_4.3.4"></a>
 874 <h3><a href="#node_toc_node_sec_4.3.4">4.3.4&nbsp;&nbsp;<tt>Calendar.hide</tt></a></h3><p></p>
 875 <p>
 876 Call this function to hide the calendar.  The calendar object and HTML elements
 877 will not be destroyed, thus you can later call one of the <tt>show</tt>
 878 functions on the same element.</p>
 879 <p>
 880 </p>
 881 <a name="node_sec_4.3.5"></a>
 882 <h3><a href="#node_toc_node_sec_4.3.5">4.3.5&nbsp;&nbsp;<tt>Calendar.setDateFormat</tt></a></h3><p></p>
 883 <p>
 884 This function configures the format in which the calendar reports the date to
 885 your &#8220;onSelect&#8221; handler.  Call it like this:</p>
 886 <p>
 887 </p>
 888 <pre class=verbatim>calendar.setDateFormat(&quot;%y/%m/%d&quot;);
 889 </pre><p></p>
 890 <p>
 891 As you can see, it receives only one parameter, the required format.  The magic
 892 characters are the following:</p>
 893 <p>
 894 </p>
 895 <table border=0><tr><td valign=top ></td></tr>
 896 <tr><td valign=top ><tt>%a</tt> </td><td valign=top >abbreviated weekday name </td></tr>
 897 <tr><td valign=top ><tt>%A</tt> </td><td valign=top >full weekday name </td></tr>
 898 <tr><td valign=top ><tt>%b</tt> </td><td valign=top >abbreviated month name </td></tr>
 899 <tr><td valign=top ><tt>%B</tt> </td><td valign=top >full month name </td></tr>
 900 <tr><td valign=top ><tt>%C</tt> </td><td valign=top >century number </td></tr>
 901 <tr><td valign=top ><tt>%d</tt> </td><td valign=top >the day of the month ( 00 .. 31 ) </td></tr>
 902 <tr><td valign=top ><tt>%e</tt> </td><td valign=top >the day of the month ( 0 .. 31 ) </td></tr>
 903 <tr><td valign=top ><tt>%H</tt> </td><td valign=top >hour ( 00 .. 23 ) </td></tr>
 904 <tr><td valign=top ><tt>%I</tt> </td><td valign=top >hour ( 01 .. 12 ) </td></tr>
 905 <tr><td valign=top ><tt>%j</tt> </td><td valign=top >day of the year ( 000 .. 366 ) </td></tr>
 906 <tr><td valign=top ><tt>%k</tt> </td><td valign=top >hour ( 0 .. 23 ) </td></tr>
 907 <tr><td valign=top ><tt>%l</tt> </td><td valign=top >hour ( 1 .. 12 ) </td></tr>
 908 <tr><td valign=top ><tt>%m</tt> </td><td valign=top >month ( 01 .. 12 ) </td></tr>
 909 <tr><td valign=top ><tt>%M</tt> </td><td valign=top >minute ( 00 .. 59 ) </td></tr>
 910 <tr><td valign=top ><tt>%n</tt> </td><td valign=top >a newline character </td></tr>
 911 <tr><td valign=top ><tt>%p</tt> </td><td valign=top >&#8220;PM&#8221; or &#8220;AM&#8221; </td></tr>
 912 <tr><td valign=top ><tt>%P</tt> </td><td valign=top >&#8220;pm&#8221; or &#8220;am&#8221; </td></tr>
 913 <tr><td valign=top ><tt>%S</tt> </td><td valign=top >second ( 00 .. 59 ) </td></tr>
 914 <tr><td valign=top ><tt>%s</tt> </td><td valign=top >number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC) </td></tr>
 915 <tr><td valign=top ><tt>%t</tt> </td><td valign=top >a tab character </td></tr>
 916 <tr><td valign=top ><tt>%U, %W, %V</tt> </td><td valign=top >the week number</td></tr>
 917 <tr><td valign=top ><tt>%u</tt> </td><td valign=top >the day of the week ( 1 .. 7, 1 = MON )</td></tr>
 918 <tr><td valign=top ><tt>%w</tt> </td><td valign=top >the day of the week ( 0 .. 6, 0 = SUN )</td></tr>
 919 <tr><td valign=top ><tt>%y</tt> </td><td valign=top >year without the century ( 00 .. 99 )</td></tr>
 920 <tr><td valign=top ><tt>%Y</tt> </td><td valign=top >year including the century ( ex. 1979 )</td></tr>
 921 <tr><td valign=top ><tt>%%</tt> </td><td valign=top >a literal <tt>%</tt> character
 922 </td></tr></table><p>
 923 There are more algorithms for computing the week number.  All
 924 three specifiers currently implement the same one, as defined by ISO 8601:
 925 &#8220;the week 01 is the week that has the Thursday in the current year, which is
 926 equivalent to the week that contains the fourth day of January.  Weeks start on
 927 Monday.&#8221;</p>
 928 <p>
 929 </p>
 930 <a name="node_sec_4.3.6"></a>
 931 <h3><a href="#node_toc_node_sec_4.3.6">4.3.6&nbsp;&nbsp;<tt>Calendar.setTtDateFormat</tt></a></h3><p></p>
 932 <p>
 933 Has the same prototype as <tt>Calendar.setDateFormat</tt>, but refers to the
 934 format of the date displayed in the &#8220;status bar&#8221; when the mouse is over some
 935 date.</p>
 936 <p>
 937 </p>
 938 <a name="node_sec_4.3.7"></a>
 939 <h3><a href="#node_toc_node_sec_4.3.7">4.3.7&nbsp;&nbsp;<tt>Calendar.setDisabledHandler</tt></a></h3><p></p>
 940 <p>
 941 This function allows you to specify a callback function that checks if a
 942 certain date must be disabled by the calendar.  You are responsible to write
 943 the callback function.  Synopsis:</p>
 944 <p>
 945 </p>
 946 <pre class=verbatim>function disallowDate(date) {
 947   // date is a JS Date object
 948   if (  date.getFullYear() == 2003 &amp;&amp;
 949         date.getMonth()    == 6 /* July, it's zero-based */ &amp;&amp;
 950         date.getDate()     == 5  ) {
 951     return true; // disable July 5 2003
 952   }
 953   return false; // enable other dates
 954 };
 955
 956 calendar.setDisabledHandler(disallowDate);
 957 </pre><p></p>
 958 <p>
 959 If you change this function in &#8220;real-time&#8221;, meaning, without creating a new
 960 calendar, then you have to call <tt>calendar.refresh()</tt> to make it
 961 redisplay the month and take into account the new disabledHandler.
 962 <tt>Calendar.setup</tt> does this, so you have no such trouble with it.</p>
 963 <p>
 964 Note that <tt>disallowDate</tt> should be very fast, as it is called for each
 965 date in the month.  Thus, it gets called, say, 30 times before displaying the
 966 calendar, and 30 times when the month is changed.  Tests I&#8217;ve done so far show
 967 that it&#8217;s still good, but in the future I might switch it to a different design
 968 (for instance, to call it once per month and to return an array of dates that
 969 must be disabled).</p>
 970 <p>
 971 This function should be considered deprecated in the favor of
 972 <tt>Calendar.setDateStatusHandler</tt>, described below.</p>
 973 <p>
 974 </p>
 975 <a name="node_sec_4.3.8"></a>
 976 <h3><a href="#node_toc_node_sec_4.3.8">4.3.8&nbsp;&nbsp;<tt>Calendar.setDateStatusHandler</tt></a></h3><p></p>
 977 <p>
 978 This function obsoletes <tt>Calendar.setDisabledHandler</tt>.  You call it with
 979 a function parameter, but this function can return a boolean
 980 <em>or a string</em>.  If the return value is a boolean (<tt>true</tt> or
 981 <tt>false</tt>) then it behaves just like <tt>setDisabledHandler</tt>,
 982 therefore disabling the date if the return value is <tt>true</tt>.</p>
 983 <p>
 984 If the returned value is a string then the given date will gain an additional
 985 CSS class, namely the returned value.  You can use this to highlight some dates
 986 in some way.  Note that you are responsible for defining the CSS class that you
 987 return.  If you return the string &#8220;disabled&#8221; then that date will be disabled,
 988 just as if you returned <tt>true</tt>.</p>
 989 <p>
 990 Here is a simple scenario that shows what you can do with this function.  The
 991 following should be present in some of your styles, or in the document head in
 992 a STYLE tag (but put it <em>after</em> the place where the calendar styles were
 993 loaded):</p>
 994 <p>
 995 </p>
 996 <pre class=verbatim>.special { background-color: #000; color: #fff; }
 997 </pre><p></p>
 998 <p>
 999 And you would use the following code before calling <tt>Calendar.create()</tt>:</p>
1000 <p>
1001 </p>
1002 <pre class=verbatim>// this table holds your special days, so that we can automatize
1003 // things a bit:
1004 var SPECIAL_DAYS = {
1005     0 : [ 13, 24 ],             // special days in January
1006     2 : [ 1, 6, 8, 12, 18 ],    // special days in March
1007     8 : [ 21, 11 ],             // special days in September
1008    11 : [ 25, 28 ]              // special days in December
1009 };
1010
1011 // this function returns true if the passed date is special
1012 function dateIsSpecial(year, month, day) {
1013     var m = SPECIAL_DAYS[month];
1014     if (!m) return false;
1015     for (var i in m) if (m[i] == day) return true;
1016     return false;
1017 }
1018
1019 // this is the actual date status handler.  Note that it receives the
1020 // date object as well as separate values of year, month and date, for
1021 // your confort.
1022 function dateStatusHandler(date, y, m, d) {
1023     if (dateIsSpecial(y, m, d)) return ``special'';
1024     else return false;
1025     // return true above if you want to disable other dates
1026 }
1027
1028 // configure it to the calendar
1029 calendar.setDateStatusHandler(dateStatusHandler);
1030 </pre><p></p>
1031 <p>
1032 The above code adds the &#8220;special&#8221; class name to some dates that are defined
1033 in the SPECIAL_DAYS table.  Other dates will simply be displayed as default,
1034 enabled.</p>
1035 <p>
1036 </p>
1037 <a name="node_sec_4.3.9"></a>
1038 <h3><a href="#node_toc_node_sec_4.3.9">4.3.9&nbsp;&nbsp;<tt>Calendar.show</tt></a></h3><p></p>
1039 <p>
1040 Call this function do show the calendar.  It basically sets the CSS &#8220;display&#8221;
1041 property to &#8220;block&#8221;.  It doesn&#8217;t modify the calendar position.</p>
1042 <p>
1043 This function only makes sense when the calendar is in popup mode.</p>
1044 <p>
1045 </p>
1046 <a name="node_sec_4.3.10"></a>
1047 <h3><a href="#node_toc_node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAt</tt></a></h3><p></p>
1048 <p>
1049 Call this to show the calendar at a certain (x, y) position.  Prototype:</p>
1050 <p>
1051 </p>
1052 <pre class=verbatim>calendar.showAt(x, y);
1053 </pre><p></p>
1054 <p>
1055 The parameters are absolute coordinates relative to the top left
1056 corner <em>of the page</em>, thus they are <em>page</em> coordinates not screen
1057 coordinates.</p>
1058 <p>
1059 After setting the given coordinates it calls Calendar.show.  This function only
1060 makes sense when the calendar is in popup mode.</p>
1061 <p>
1062 </p>
1063 <a name="node_sec_4.3.11"></a>
1064 <h3><a href="#node_toc_node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a></h3><p></p>
1065 <p>
1066 This function is useful if you want to display the calendar near some element.
1067 You call it like this:</p>
1068 <p>
1069 </p>
1070 <pre class=verbatim>calendar.showAtElement(element, align);
1071 </pre><p></p>
1072 <p>
1073 where element is a reference to your element (for instance it can be the input
1074 field that displays the date) and align is an optional parameter, of type string,
1075 containing one or two characters.  For instance, if you pass <tt>&quot;Br&quot;</tt> as
1076 align, the calendar will appear <em>below</em> the element and with its right
1077 margin continuing the element&#8217;s right margin.</p>
1078 <p>
1079 As stated above, align may contain one or two characters.  The first character
1080 dictates the vertical alignment, relative to the element, and the second
1081 character dictates the horizontal alignment.  If the second character is
1082 missing it will be assumed <tt>&quot;l&quot;</tt> (the left margin of the calendar will
1083 be at the same horizontal position as the left margin of the element).</p>
1084 <p>
1085 The characters given for the align parameters are case sensitive.  This
1086 function only makes sense when the calendar is in popup mode.  After computing
1087 the position it uses <tt>Calendar.showAt</tt> to display the calendar there.</p>
1088 <p>
1089 </p>
1090 <a name="node_sec_Temp_8"></a>
1091 <h4><a href="#node_toc_node_sec_Temp_8">Vertical alignment</a></h4><p>The first character in &#8220;<tt>align</tt>&#8221; can take one of the following values:</p>
1092 <p>
1093 </p>
1094 <ul><p>
1095 </p>
1096 <li><p><tt>T</tt> &#8212; completely above the reference element (bottom margin of
1097 the calendar aligned to the top margin of the element).</p>
1098 <p>
1099 </p>
1100 <li><p><tt>t</tt> &#8212; above the element but may overlap it (bottom margin of the calendar aligned to
1101 the bottom margin of the element).</p>
1102 <p>
1103 </p>
1104 <li><p><tt>c</tt> &#8212; the calendar displays vertically centered to the reference
1105 element.  It might overlap it (that depends on the horizontal alignment).</p>
1106 <p>
1107 </p>
1108 <li><p><tt>b</tt> &#8212; below the element but may overlap it (top margin of the calendar aligned to
1109 the top margin of the element).</p>
1110 <p>
1111 </p>
1112 <li><p><tt>B</tt> &#8212; completely below the element (top margin of the calendar
1113 aligned to the bottom margin of the element).</p>
1114 <p>
1115 </p>
1116 </ul><p></p>
1117 <p>
1118 </p>
1119 <a name="node_sec_Temp_9"></a>
1120 <h4><a href="#node_toc_node_sec_Temp_9">Horizontal alignment</a></h4><p>The second character in &#8220;<tt>align</tt>&#8221; can take one of the following values:</p>
1121 <p>
1122 </p>
1123 <ul><p>
1124 </p>
1125 <li><p><tt>L</tt> &#8212; completely to the left of the reference element (right
1126 margin of the calendar aligned to the left margin of the element).</p>
1127 <p>
1128 </p>
1129 <li><p><tt>l</tt> &#8212; to the left of the element but may overlap it (left margin
1130 of the calendar aligned to the left margin of the element).</p>
1131 <p>
1132 </p>
1133 <li><p><tt>c</tt> &#8212; horizontally centered to the element.  Might overlap it,
1134 depending on the vertical alignment.</p>
1135 <p>
1136 </p>
1137 <li><p><tt>r</tt> &#8212; to the right of the element but may overlap it (right
1138 margin of the calendar aligned to the right margin of the element).</p>
1139 <p>
1140 </p>
1141 <li><p><tt>R</tt> &#8212; completely to the right of the element (left margin of the
1142 calendar aligned to the right margin of the element).</p>
1143 <p>
1144 </p>
1145 </ul><p></p>
1146 <p>
1147 </p>
1148 <a name="node_sec_Temp_10"></a>
1149 <h4><a href="#node_toc_node_sec_Temp_10">Default values</a></h4><p>If the &#8220;<tt>align</tt>&#8221; parameter is missing the calendar will choose
1150 &#8220;<tt>Br</tt>&#8221;.</p>
1151 <p>
1152 </p>
1153 <a name="node_sec_4.3.12"></a>
1154 <h3><a href="#node_toc_node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setDate</tt></a></h3><p></p>
1155 <p>
1156 Receives a JavaScript <tt>Date</tt> object.  Sets the given date in the
1157 calendar.  If the calendar is visible the new date is displayed immediately.</p>
1158 <p>
1159 </p>
1160 <pre class=verbatim>calendar.setDate(new Date()); // go today
1161 </pre><p></p>
1162 <p>
1163 </p>
1164 <a name="node_sec_4.3.13"></a>
1165 <h3><a href="#node_toc_node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.setFirstDayOfWeek</tt></a></h3><p></p>
1166 <p>
1167 Changes the first day of week.  The parameter has to be a numeric value ranging
1168 from 0 to 6.  Pass 0 for Sunday, 1 for Monday, ..., 6 for Saturday.</p>
1169 <p>
1170 </p>
1171 <pre class=verbatim>calendar.setFirstDayOfWeek(5); // start weeks on Friday
1172 </pre><p></p>
1173 <p>
1174 </p>
1175 <a name="node_sec_4.3.14"></a>
1176 <h3><a href="#node_toc_node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a></h3><p></p>
1177 <p>
1178 Use this function to parse a date given as string and to move the calendar to
1179 that date.</p>
1180 <p>
1181 The algorithm tries to parse the date according to the format that was
1182 previously set with <tt>Calendar.setDateFormat</tt>; if that fails, it still
1183 tries to get some valid date out of it (it doesn&#8217;t read your thoughts, though).</p>
1184 <p>
1185 </p>
1186 <pre class=verbatim>calendar.parseDate(&quot;2003/07/06&quot;);
1187 </pre><p></p>
1188 <p>
1189 </p>
1190 <a name="node_sec_4.3.15"></a>
1191 <h3><a href="#node_toc_node_sec_4.3.15">4.3.15&nbsp;&nbsp;<tt>Calendar.setRange</tt></a></h3><p></p>
1192 <p>
1193 Sets the range of years that are allowed in the calendar.  Synopsis:</p>
1194 <p>
1195 </p>
1196 <pre class=verbatim>calendar.setRange(1970, 2050);
1197 </pre><p></p>
1198 <p>
1199 </p>
1200 <a name="node_sec_5"></a>
1201 <h1><a href="#node_toc_node_sec_5">5&nbsp;&nbsp;Side effects</a></h1><p>The calendar code was intentionally embedded in an object to make it have as
1202 less as possible side effects.  However, there are some&#8212;not harmful, after
1203 all.  Here is a list of side effects; you can count they already happened after
1204 <tt>calendar.js</tt> was loaded.</p>
1205 <p>
1206 </p>
1207 <ol><p>
1208 </p>
1209 <li><p>The global variable <tt>window.calendar</tt> will be set to null.  This
1210 variable is used by the calendar code, especially when doing drag &amp; drop for
1211 moving the calendar.  In the future I might get rid of it, but for now it
1212 didn&#8217;t harm anyone.</p>
1213 <p>
1214 </p>
1215 <li><p>The JavaScript <tt>Date</tt> object is modified.  We add some properties
1216 and functions that are very useful to our calendar.  It made more sense to add
1217 them directly to the <tt>Date</tt> object than to the calendar itself.
1218 Complete list:</p>
1219 <p>
1220 </p>
1221 <ol><p>
1222 </p>
1223 <li><p><tt>Date._MD    = new Array(31,28,31,30,31,30,31,31,30,31,30,31);</tt>
1224 </p>
1225 <li><p><tt>Date.SECOND = 1000 /* milliseconds */;</tt>
1226 </p>
1227 <li><p><tt>Date.MINUTE = 60 * Date.SECOND;</tt>
1228 </p>
1229 <li><p><tt>Date.HOUR   = 60 * Date.MINUTE;</tt>
1230 </p>
1231 <li><p><tt>Date.DAY    = 24 * Date.HOUR;</tt>
1232 </p>
1233 <li><p><tt>Date.WEEK   =  7 * Date.DAY;</tt></p>
1234 <p>
1235 </p>
1236 <li><p><tt>Date.prototype.getMonthDays</tt>(month) &#8212; returns the number of days
1237 of the given month, or of the current date object if no month was given.</p>
1238 <p>
1239 </p>
1240 <li><p><tt>Date.prototype.getWeekNumber</tt>() &#8212; returns the week number of the
1241 date in the current object.</p>
1242 <p>
1243 </p>
1244 <li><p><tt>Date.prototype.equalsTo</tt>(other_date) &#8212; compare the current date
1245 object with <tt>other_date</tt> and returns <tt>true</tt> if the dates are
1246 equal.  <em>It ignores time</em>.</p>
1247 <p>
1248 </p>
1249 <li><p><tt>Date.prototype.print</tt>(format) &#8212; returns a string with the
1250 current date object represented in the given format.  It implements the format
1251 specified in section <a href="#node_sec_4.3.5">4.3.5</a>.</p>
1252 <p>
1253 </p>
1254 </ol><p></p>
1255 <p>
1256 </p>
1257 </ol><p></p>
1258 <p>
1259 </p>
1260 <a name="node_sec_6"></a>
1261 <h1><a href="#node_toc_node_sec_6">6&nbsp;&nbsp;Credits</a></h1><p>The following people either sponsored, donated money to the project or bought
1262 commercial licenses (listed in reverse chronological order).  Your name could
1263 be here too!  If you wish to sponsor the project (for instance request a
1264 feature and pay me for implementing it) or donate some money please
1265 <em>please</em> contact me at <tt><a href="mailto:mishoo@infoiasi.ro">mishoo@infoiasi.ro</a></tt>.</p>
1266 <p>
1267 </p>
1268 <ul><p>
1269 </p>
1270 <li><p>Sunny Chowdhury (<a href="http://www.ex3.com">www.ex3.com</a>)</p>
1271 <p>
1272 </p>
1273 <li><p>Ian Barrack (<a href="http://www.simban.com">www.simban.com</a>)</p>
1274 <p>
1275 </p>
1276 <li><p>Himanshukumar Shah</p>
1277 <p>
1278 </p>
1279 <li><p>Seyhan Ersoy (<a href="http://www.oocgi.com">www.oocgi.com</a>)</p>
1280 <p>
1281 </p>
1282 <li><p>Jon Stokkeland (<a href="http://www.sauen.com">www.sauen.com</a>)</p>
1283 <p>
1284 </p>
1285 </ul><p></p>
1286 <p>
1287 </p>
1288 <div align=right><table><tr><td>
1289
1290 <b>Thank you!</b><br>
1291 &#8212; <tt>mishoo@infoiasi.ro</tt>
1292 </td></tr></table></div>
1293 <p>
1294 </p>
1295 <div class=footnoterule><hr></div><p></p>
1296 <div class=footnote><p><a name="footnote_Temp_2"></a><a href="#call_footnote_Temp_2"><sup><small>1</small></sup></a>
1297 by the term &#8220;widget&#8221; I understand a single element of user interface.
1298 But that&#8217;s in Linux world.  For those that did lots of Windows
1299 programming the term &#8220;control&#8221; might be more familiar
1300 </p>
1301 <p><a name="footnote_Temp_3"></a><a href="#call_footnote_Temp_3"><sup><small>2</small></sup></a> people report that the calendar does
1302 not work with IE5/Mac.  I don&#8217;t have access to a Macintosh,
1303 therefore&#8212;sorry&#8212;I can&#8217;t fix it.</p>
1304 <p><a name="footnote_Temp_4"></a><a href="#call_footnote_Temp_4"><sup><small>3</small></sup></a>  under Opera 7 the calendar still lacks some functionality, such as
1305 keyboard navigation; also Opera doesn&#8217;t seem to allow disabling text
1306 selection when one drags the mouse on the page; despite all that, the
1307 calendar is still highly functional under Opera 7 and looks as good as
1308 in other supported browsers. </p>
1309 <p><a name="footnote_Temp_5"></a><a href="#call_footnote_Temp_5"><sup><small>4</small></sup></a> user interface</p>
1310 </div>
1311 <div align=right class=colophon>
1312 <i>Last modified: Fri, Feb 6, 2004, 8:53 pm<br>
1313 HTML conversion by <a href="http://www.ccs.neu.edu/~dorai/tex2page/tex2page-doc.html">TeX2page 4r8f</a></i>
1314 </div>
1315 </body>
1316 </html>