📄 reference.html.svn-base
字号:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><!--Generated from ../reference.tex by tex2page, v 2004-09-11(running on MzScheme 209, unix), (c) Dorai Sitaram, http://www.ccs.neu.edu/~dorai/tex2page/tex2page-doc.html--><head><title>DHTML Calendar Widget</title><link rel="stylesheet" type="text/css" href="reference.css" title=default><link rel="stylesheet" type="text/css" href="reference-Z-S.css" title=default><meta name=robots content="index,follow"></head><body><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><h1 class=title align=center><br><br>DHTML Calendar Widget</h1><p></p><div align=center>Mihai Bazon, <tt><mihai_bazon@yahoo.com></tt><br>© Dynarch.com 2002-2005, <a href="http://www.dynarch.com/"><tt>www.dynarch.com</tt></a><p>March 7, 2005<br></p><p></p><p><span class=small>calendar version: 1.0 ``It is happening again''</span></p></div><p></p><p><span class=small><code class=verbatim>$Id$</code></span></p><span class=small><blockquote><div align=right><table><tr><td></td></tr></table></div></blockquote></span><a name="node_sec_Temp_1"></a><h1><a href="#node_toc_node_sec_Temp_1">Contents</a></h1><p><a name="node_toc_start"></a></p><p><b> <a name="node_toc_node_sec_1"></a><a href="#node_sec_1">1 Overview</a></b><br> <a name="node_toc_node_sec_1.1"></a><a href="#node_sec_1.1">1.1 How does this thing work?</a><br> <a name="node_toc_node_sec_1.2"></a><a href="#node_sec_1.2">1.2 Project files</a><br> <a name="node_toc_node_sec_1.3"></a><a href="#node_sec_1.3">1.3 License</a><br></p><p><b> <a name="node_toc_node_sec_2"></a><a href="#node_sec_2">2 Quick startup</a></b><br> <a name="node_toc_node_sec_2.1"></a><a href="#node_sec_2.1">2.1 Installing a popup calendar</a><br> <a name="node_toc_node_sec_2.2"></a><a href="#node_sec_2.2">2.2 Installing a flat calendar</a><br> <a name="node_toc_node_sec_2.3"></a><a href="#node_sec_2.3">2.3 <tt>Calendar.setup</tt> in detail</a><br></p><p><b> <a name="node_toc_node_sec_3"></a><a href="#node_sec_3">3 Recipes</a></b><br> <a name="node_toc_node_sec_3.1"></a><a href="#node_sec_3.1">3.1 Popup calendars</a><br> <a name="node_toc_node_sec_3.1.1"></a><a href="#node_sec_3.1.1">3.1.1 Simple text field with calendar attached to a button</a><br> <a name="node_toc_node_sec_3.1.2"></a><a href="#node_sec_3.1.2">3.1.2 Simple field with calendar attached to an image</a><br> <a name="node_toc_node_sec_3.1.3"></a><a href="#node_sec_3.1.3">3.1.3 Hidden field, plain text triggers</a><br> <a name="node_toc_node_sec_3.1.4"></a><a href="#node_sec_3.1.4">3.1.4 2 Linked fields, no trigger buttons</a><br> <a name="node_toc_node_sec_3.2"></a><a href="#node_sec_3.2">3.2 Flat calendars</a><br> <a name="node_toc_node_sec_3.3"></a><a href="#node_sec_3.3">3.3 Highlight special dates</a><br> <a name="node_toc_node_sec_3.4"></a><a href="#node_sec_3.4">3.4 Select multiple dates</a><br></p><p><b> <a name="node_toc_node_sec_4"></a><a href="#node_sec_4">4 The Calendar object overview</a></b><br> <a name="node_toc_node_sec_4.1"></a><a href="#node_sec_4.1">4.1 Creating a calendar</a><br> <a name="node_toc_node_sec_4.2"></a><a href="#node_sec_4.2">4.2 Order does matter ;-)</a><br> <a name="node_toc_node_sec_4.3"></a><a href="#node_sec_4.3">4.3 Caching the object</a><br> <a name="node_toc_node_sec_4.4"></a><a href="#node_sec_4.4">4.4 Callback functions</a><br></p><p><b> <a name="node_toc_node_sec_5"></a><a href="#node_sec_5">5 The Calendar object API reference</a></b><br> <a name="node_toc_node_sec_5.1"></a><a href="#node_sec_5.1">5.1 <tt>Calendar</tt> constructor</a><br> <a name="node_toc_node_sec_5.2"></a><a href="#node_sec_5.2">5.2 Useful member variables (properties)</a><br> <a name="node_toc_node_sec_5.3"></a><a href="#node_sec_5.3">5.3 Public methods</a><br> <a name="node_toc_node_sec_5.3.1"></a><a href="#node_sec_5.3.1">5.3.1 <tt>Calendar.create</tt></a><br> <a name="node_toc_node_sec_5.3.2"></a><a href="#node_sec_5.3.2">5.3.2 <tt>Calendar.callHandler</tt></a><br> <a name="node_toc_node_sec_5.3.3"></a><a href="#node_sec_5.3.3">5.3.3 <tt>Calendar.callCloseHandler</tt></a><br> <a name="node_toc_node_sec_5.3.4"></a><a href="#node_sec_5.3.4">5.3.4 <tt>Calendar.hide</tt></a><br> <a name="node_toc_node_sec_5.3.5"></a><a href="#node_sec_5.3.5">5.3.5 <tt>Calendar.setDateFormat</tt></a><br> <a name="node_toc_node_sec_5.3.6"></a><a href="#node_sec_5.3.6">5.3.6 <tt>Calendar.setTtDateFormat</tt></a><br> <a name="node_toc_node_sec_5.3.7"></a><a href="#node_sec_5.3.7">5.3.7 <tt>Calendar.setDisabledHandler</tt></a><br> <a name="node_toc_node_sec_5.3.8"></a><a href="#node_sec_5.3.8">5.3.8 <tt>Calendar.setDateStatusHandler</tt></a><br> <a name="node_toc_node_sec_5.3.9"></a><a href="#node_sec_5.3.9">5.3.9 <tt>Calendar.show</tt></a><br> <a name="node_toc_node_sec_5.3.10"></a><a href="#node_sec_5.3.10">5.3.10 <tt>Calendar.showAt</tt></a><br> <a name="node_toc_node_sec_5.3.11"></a><a href="#node_sec_5.3.11">5.3.11 <tt>Calendar.showAtElement</tt></a><br> <a name="node_toc_node_sec_5.3.12"></a><a href="#node_sec_5.3.12">5.3.12 <tt>Calendar.setDate</tt></a><br> <a name="node_toc_node_sec_5.3.13"></a><a href="#node_sec_5.3.13">5.3.13 <tt>Calendar.setFirstDayOfWeek</tt></a><br> <a name="node_toc_node_sec_5.3.14"></a><a href="#node_sec_5.3.14">5.3.14 <tt>Calendar.parseDate</tt></a><br> <a name="node_toc_node_sec_5.3.15"></a><a href="#node_sec_5.3.15">5.3.15 <tt>Calendar.setRange</tt></a><br></p><p><b> <a name="node_toc_node_sec_6"></a><a href="#node_sec_6">6 Side effects</a></b><br></p><p><b> <a name="node_toc_node_sec_7"></a><a href="#node_sec_7">7 Credits</a></b><br></p><p></p><p></p><a name="node_sec_1"></a><h1><a href="#node_toc_node_sec_1">1 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>is an (HTML) user interface element that gives end-users a friendly way toselect date and time. It works in a web browser. The first versions only providedsupport for popup calendars, while starting with version 0.9 it also supports``flat'' display. A ``flat'' calendar is a calendar that stays visible in thepage all the time. In this mode it could be very useful for ``blog'' pages andother pages that require the calendar to be always present.</p><p>The calendar is compatible with most popular browsers nowadays. While it'screated using web standards and it should generally work with any compliantbrowser, the following browsers were found to work: Mozilla/Firefox (thedevelopment platform), Netscape 6.0 or better, all other Gecko-based browsers,Internet Explorer 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 7<a name="call_footnote_Temp_4"></a><a href="#footnote_Temp_4"><sup><small>3</small></sup></a>, Konqueror 3.1.2 and Apple Safari forMacOSX.</p><p>You can find the latest info and version at the calendar homepage:</p><p></p><div align=center><table><tr><td><a href="http://www.dynarch.com/projects/calendar/"><tt>www.dynarch.com/projects/calendar</tt></a></td></tr></table></div><p></p><a name="node_sec_1.1"></a><h2><a href="#node_toc_node_sec_1.1">1.1 How does this thing work?</a></h2><p>DHTML is not ``another kind of HTML''. It's merely a naming convention. DHTMLrefers to the combination of HTML, CSS, JavaScript and DOM. DOM (DocumentObject Model) is a set of interfaces that glues the other three together. Inother words, DOM allows dynamic modification of an HTML page through a program.JavaScript is our programming language, since that's what browsers like. CSSis a way to make it look good ;-). So all this soup is generically known asDHTML.</p><p>Using DOM calls, the program dynamically creates a <tt><table></tt> elementthat contains a calendar for the given date and then inserts it in the documentbody. Then it shows this table at a specified position. Usually the positionis related to some element in which the date needs to be displayed/entered,such as an input field.</p><p>By assigning a certain CSS class to the table we can control the look of thecalendar through an external CSS file; therefore, in order to change thecolors, backgrounds, rollover effects and other stuff, you can only change aCSS file -- modification of the program itself is not necessary.</p><p></p><a name="node_sec_1.2"></a><h2><a href="#node_toc_node_sec_1.2">1.2 Project files</a></h2><p>Here's a description of the project files, excluding documentation and examplefiles.</p><p></p><ul><p></p><li><p>the main program file (<tt>calendar.js</tt>). This defines all the logicbehind the calendar widget.</p><p></p><li><p>the CSS files (<tt>calendar-*.css</tt>). Loading one of them isnecessary in order to see the calendar as intended.</p><p></p><li><p>the language definition files (<tt>lang/calendar-*.js</tt>). They areplain JavaScript files that contain all texts that are displayed by thecalendar. Loading one of them is necessary.</p><p></p><li><p>helper functions for quick setup of the calendar(<tt>calendar-setup.js</tt>). You can do fine without it, but starting withversion 0.9.3 this is the recommended way to setup a calendar.</p><p></p></ul><p></p><p></p><a name="node_sec_1.3"></a><h2><a href="#node_toc_node_sec_1.3">1.3 License</a></h2><p></p><div align=center><table><tr><td>© Dynarch.com 2002-2005,<a href="http://www.dynarch.com/"><tt>www.dynarch.com</tt></a>Author: Mihai Bazon</td></tr></table></div><p>The calendar is released under the<a href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a>.</p><p></p><a name="node_sec_2"></a><h1><a href="#node_toc_node_sec_2">2 Quick startup</a></h1><p></p><p>Installing the calendar used to be quite a task until version 0.9.3. Startingwith 0.9.3 I have included the file <tt>calendar-setup.js</tt> whose goal is toassist you to setup a popup or flat calendar in minutes. You areencouraged to modify this file and <em>not</em> calendar.js if you needextra customization, but you're on your own.</p><p>First you have to include the needed scripts and style-sheet. Make sure you dothis in your document's <tt><head></tt> section, also make sure you put thecorrect paths to the scripts.</p><p></p><pre class=verbatim><style type="text/css">@import url(calendar-win2k-1.css);</style><script type="text/javascript" src="calendar.js"></script><script type="text/javascript" src="lang/calendar-en.js"></script><script type="text/javascript" src="calendar-setup.js"></script></pre><p></p><p></p><a name="node_sec_2.1"></a><h2><a href="#node_toc_node_sec_2.1">2.1 Installing a popup calendar</a></h2><p></p><p>Now suppose you have the following HTML:</p><p></p><pre class=verbatim><form ...> <input type="text" id="data" name="data" /> <button id="trigger">...</button></form>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -