reference.html.svn-base

PHP 知识管理系统（基于树结构的知识管理系统）, 英文原版的PHP源码。

</pre><p></p>
<p>
You want the button to popup a calendar widget when clicked?  Just
insert the following code immediately <em>after</em> the HTML form:</p>
<p>
</p>
<pre class=verbatim>&lt;script type=&quot;text/javascript&quot;&gt;
  Calendar.setup(
    {
      inputField  : &quot;data&quot;,         // ID of the input field
      ifFormat    : &quot;%m %d, %Y&quot;,    // the date format
      button      : &quot;trigger&quot;       // ID of the button
    }
  );
&lt;/script&gt;
</pre><p></p>
<p>
The <tt>Calendar.setup</tt> function, defined in <tt>calendar-setup.js</tt>
takes care of ``patching'' the button to display a calendar when clicked.  The
calendar is by default in single-click mode and linked with the given input
field, so that when the end-user selects a date it will update the input field
with the date in the given format and close the calendar.  If you are a
long-term user of the calendar you probably remember that for doing this you
needed to write a couple functions and add an ``onclick'' handler for the
button by hand.</p>
<p>
By looking at the example above we can see that the function
<tt>Calendar.setup</tt> receives only one parameter: a JavaScript object.
Further, that object can have lots of properties that tell to the setup
function how would we like to have the calendar.  For instance, if we would
like a calendar that closes at double-click instead of single-click we would
also include the following: <tt>singleClick:false</tt>.</p>
<p>
For a list of all supported parameters please see the section
<a href="#node_sec_2.3">2.3</a>.</p>
<p>
</p>
<a name="node_sec_2.2"></a>
<h2><a href="#node_toc_node_sec_2.2">2.2&nbsp;&nbsp;Installing a flat calendar</a></h2>
<p></p>
<p>
Here's how to configure a flat calendar, using the same <tt>Calendar.setup</tt>
function.  First, you should have an empty element with an ID.  This element
will act as a container for the calendar.  It can be any block-level element,
such as DIV, TABLE, etc.  We will use a DIV in this example.</p>
<p>
</p>
<pre class=verbatim>&lt;div id=&quot;calendar-container&quot;&gt;&lt;/div&gt;
</pre><p></p>
<p>
Then there is the JavaScript code that sets up the calendar into the
``calendar-container'' DIV.  The code can occur anywhere in HTML
<em>after</em> the DIV element.</p>
<p>
</p>
<pre class=verbatim>&lt;script type=&quot;text/javascript&quot;&gt;
  function dateChanged(calendar) {
    // Beware that this function is called even if the end-user only
    // changed the month/year.  In order to determine if a date was
    // clicked you can use the dateClicked property of the calendar:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      window.location = &quot;/&quot; + y + &quot;/&quot; + m + &quot;/&quot; + d + &quot;/index.php&quot;;
    }
  };

  Calendar.setup(
    {
      flat         : &quot;calendar-container&quot;, // ID of the parent element
      flatCallback : dateChanged           // our callback function
    }
  );
&lt;/script&gt;
</pre><p></p>
<p>
</p>
<a name="node_sec_2.3"></a>
<h2><a href="#node_toc_node_sec_2.3">2.3&nbsp;&nbsp;<tt>Calendar.setup</tt> in detail</a></h2>
<p></p>
<p>
Following there is the complete list of properties interpreted by
Calendar.setup.  All of them have default values, so you can pass only those
which you would like to customize.  Anyway, you <em>must</em> pass at least one
of <tt>inputField</tt>, <tt>displayArea</tt> or <tt>button</tt>, for a popup
calendar, or <tt>flat</tt> for a flat calendar.  Otherwise you will get a
warning message saying that there's nothing to setup.</p>
<p>
</p>
<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>
</td></tr>
<tr><td valign=top ><tt>inputField</tt>
</td><td valign=top >string </td><td valign=top >The ID of your input field.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>displayArea</tt>
</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.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>button</tt>
</td><td valign=top >string </td><td valign=top >The ID of the calendar ``trigger''. This is an element (ordinarily a button or an image) that will dispatch a certain event (usually ``click'') to the function that creates and displays the calendar.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>eventName</tt>
</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 ``on'' prefix, such as ``click'' instead of ``onclick''. Virtually all users will want to let this have the default value (``click''). 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 ``focus'' as the event name).
</td><td valign=top >``click''
</td></tr>
<tr><td valign=top ><tt>ifFormat</tt>
</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.
</td><td valign=top >``%Y/%m/%d''
</td></tr>
<tr><td valign=top ><tt>daFormat</tt>
</td><td valign=top >string </td><td valign=top >Format of the date displayed in the displayArea (if specified).
</td><td valign=top >``%Y/%m/%d''
</td></tr>
<tr><td valign=top ><tt>singleClick</tt>
</td><td valign=top >boolean </td><td valign=top >Wether the calendar is in ``single-click mode'' or ``double-click mode''. If true (the default) the calendar will be created in single-click mode.
</td><td valign=top >true
</td></tr>
<tr><td valign=top ><tt>disableFunc</tt>
</td><td valign=top >function </td><td valign=top >A function that receives a JS Date object.  It should return
<tt>true</tt> if that date has to be disabled, <tt>false</tt> otherwise.
<font color="red">DEPRECATED (see below).</font>
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>dateStatusFunc</tt>
</td><td valign=top >function </td><td valign=top >A function that receives a JS Date object and returns a boolean
or a string.  This function allows one to set a certain CSS class to some
date, therefore making it look different.  If it returns <tt>true</tt> then
the date will be disabled.  If it returns <tt>false</tt> nothing special
happens with the given date.  If it returns a string then that will be taken
as a CSS class and appended to the date element.  If this string is
``disabled'' then the date is also disabled (therefore is like returning
<tt>true</tt>).  For more information please also refer to section
<a href="#node_sec_5.3.8">5.3.8</a>.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>firstDay</tt>
</td><td valign=top >integer </td><td valign=top >Specifies which day is to be displayed as the first day of
week.  Possible values are 0 to 6; 0 means Sunday, 1 means Monday, ..., 6
means Saturday.  The end user can easily change this too, by clicking on the
day name in the calendar header.
</td><td valign=top >0
</td></tr>
<tr><td valign=top ><tt>weekNumbers</tt>
</td><td valign=top >boolean </td><td valign=top >If ``true'' then the calendar will display week numbers.
</td><td valign=top >true
</td></tr>
<tr><td valign=top ><tt>align</tt>
</td><td valign=top >string </td><td valign=top >Alignment of the calendar, relative to the reference element. The
reference element is dynamically chosen like this: if a displayArea is
specified then it will be the reference element. Otherwise, the input field
is the reference element.  For the meaning of the alignment characters
please section <a href="#node_sec_5.3.11">5.3.11</a>.
</td><td valign=top >``Bl''
</td></tr>
<tr><td valign=top ><tt>range</tt>
</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.
</td><td valign=top >[1900, 2999]
</td></tr>
<tr><td valign=top ><tt>flat</tt>
</td><td valign=top >string </td><td valign=top >If you want a flat calendar, pass the ID of the parent object in
this property.  If not, pass <tt>null</tt> here (or nothing at all as
<tt>null</tt> is the default value).
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>flatCallback</tt>
</td><td valign=top >function </td><td valign=top >You should provide this function if the calendar is flat.  It
will be called when the date in the calendar is changed with a reference to
the calendar object.  See section <a href="#node_sec_2.2">2.2</a> for an example
of how to setup a flat calendar.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>onSelect</tt>
</td><td valign=top >function </td><td valign=top >If you provide a function handler here then you have to manage
the ``click-on-date'' event by yourself.  Look in the calendar-setup.js and
take as an example the onSelect handler that you can see there.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>onClose</tt>
</td><td valign=top >function </td><td valign=top >This handler will be called when the calendar needs to close.
You don't need to provide one, but if you do it's your responsibility to
hide/destroy the calendar.  You're on your own.  Check the calendar-setup.js
file for an example.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>onUpdate</tt>
</td><td valign=top >function </td><td valign=top >If you supply a function handler here, it will be called right
after the target field is updated with a new date.  You can use this to
chain 2 calendars, for instance to setup a default date in the second just
after a date was selected in the first.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>date</tt>
</td><td valign=top >date </td><td valign=top >This allows you to setup an initial date where the calendar will be
positioned to.  If absent then the calendar will open to the today date.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>showsTime</tt>
</td><td valign=top >boolean </td><td valign=top >If this is set to <tt>true</tt> then the calendar will also
allow time selection.
</td><td valign=top >false
</td></tr>
<tr><td valign=top ><tt>timeFormat</tt>
</td><td valign=top >string </td><td valign=top >Set this to ``12'' or ``24'' to configure the way that the
calendar will display time.
</td><td valign=top >``24''
</td></tr>
<tr><td valign=top ><tt>electric</tt>
</td><td valign=top >boolean </td><td valign=top >Set this to ``false'' if you want the calendar to update the
field only when closed (by default it updates the field at each date change,
even if the calendar is not closed) </td><td valign=top >true
</td></tr>
<tr><td valign=top ><tt>position</tt>
</td><td valign=top >array </td><td valign=top >Specifies the [x, y] position, relative to page's top-left corner,
where the calendar will be displayed.  If not passed then the position will
be computed based on the ``align'' parameter.  Defaults to ``null'' (not
used). </td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>cache</tt>
</td><td valign=top >boolean </td><td valign=top >Set this to ``true'' if you want to cache the calendar object.
This means that a single calendar object will be used for all fields that
require a popup calendar </td><td valign=top >false
</td></tr>
<tr><td valign=top ><tt>showOthers</tt>
</td><td valign=top >boolean </td><td valign=top >If set to ``true'' then days belonging to months overlapping
with the currently displayed month will also be displayed in the calendar
(but in a ``faded-out'' color) </td><td valign=top >false

</td></tr></table>

</span><p>
</p>
<a name="node_sec_3"></a>
<h1><a href="#node_toc_node_sec_3">3&nbsp;&nbsp;Recipes</a></h1>
<p>This section presents some common ways to setup a calendar using the
<tt>Calendar.setup</tt> function detailed in the previous section.</p>
<p>
We don't discuss here about loading the JS or CSS code -- so make sure you
add the proper &lt;script&gt; and &lt;style&gt; or &lt;link&gt; elements in your
HTML code.  Also, when we present input fields, please note that they should
be embedded in some form in order for data to be actually sent to server; we
don't discuss these things here because they are not related to our
calendar.</p>
<p>
</p>
<a name="node_sec_3.1"></a>
<h2><a href="#node_toc_node_sec_3.1">3.1&nbsp;&nbsp;Popup calendars</a></h2>
<p>These samples can be found in the file 鈥