diff options
Diffstat (limited to 'javascript/dynarch/jscalendar/simple-1.html')
| -rw-r--r-- | javascript/dynarch/jscalendar/simple-1.html | 244 |
1 files changed, 0 insertions, 244 deletions
diff --git a/javascript/dynarch/jscalendar/simple-1.html b/javascript/dynarch/jscalendar/simple-1.html deleted file mode 100644 index c2a944a..0000000 --- a/javascript/dynarch/jscalendar/simple-1.html +++ /dev/null @@ -1,244 +0,0 @@ -<html style="background-color: buttonface; color: buttontext;"> - -<head> -<meta http-equiv="content-type" content="text/xml; charset=utf-8" /> - -<title>Simple calendar setups [popup calendar]</title> - - <!-- calendar stylesheet --> - <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /> - - <!-- main calendar program --> - <script type="text/javascript" src="calendar.js"></script> - - <!-- language for the calendar --> - <script type="text/javascript" src="lang/calendar-en.js"></script> - - <!-- the following script defines the Calendar.setup helper function, which makes - adding a calendar a matter of 1 or 2 lines of code. --> - <script type="text/javascript" src="calendar-setup.js"></script> - -</head> - -<body> - -<h2>DHTML Calendar — for the impatient</h2> - - <blockquote> - <p> - This page lists some common setups for the popup calendar. In - order to see how to do any of them please see the source of this - page. For each example it's structured like this: there's the - <form> that contains the input field, and following there is - the JavaScript snippet that setups that form. An example of - <em>flat</em> calendar is available in <a - href="simple-2.html">another page</a>. - </p> - <p> - The code in this page uses a helper function defined in - "calendar-setup.js". With it you can setup the calendar in - minutes. If you're not <em>that</em> impatient, ;-) <a - href="doc/html/reference.html">complete documenation</a> is - available. - </p> - </blockquote> - - - -<hr /> - -<p><b>Basic setup: one input per calendar.</b> Clicking in the input field -activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The -calendar defaults to "single-click mode".</p> - -<p>The example below has been updated to show you how to create "linked" -fields. Basically, when some field is filled with a date, the other -is updated so that the difference between them remains one week. The -property useful here is "onUpdate".</p> - -<form action="#" method="get"> -<input type="text" name="date" id="f_date_a" /> -<input type="text" name="date" id="f_calcdate" /> -</form> - -<script type="text/javascript"> - function catcalc(cal) { - var date = cal.date; - var time = date.getTime() - // use the _other_ field - var field = document.getElementById("f_calcdate"); - if (field == cal.params.inputField) { - field = document.getElementById("f_date_a"); - time -= Date.WEEK; // substract one week - } else { - time += Date.WEEK; // add one week - } - var date2 = new Date(time); - field.value = date2.print("%Y-%m-%d %H:%M"); - } - Calendar.setup({ - inputField : "f_date_a", // id of the input field - ifFormat : "%Y-%m-%d %H:%M", // format of the input field - showsTime : true, - timeFormat : "24", - onUpdate : catcalc - }); - Calendar.setup({ - inputField : "f_calcdate", - ifFormat : "%Y-%m-%d %H:%M", - showsTime : true, - timeFormat : "24", - onUpdate : catcalc - }); -</script> - - - -<hr /> - -<p><b>Input field with a trigger button.</b> Clicking the button activates -the calendar. Note that this one needs double-click (singleClick parameter -is explicitely set to false). Also demonstrates the "step" parameter -introduced in 0.9.6 (show all years in drop-down boxes, instead of every -other year as default).</p> - -<form action="#" method="get"> -<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button> -</form> - -<script type="text/javascript"> - Calendar.setup({ - inputField : "f_date_b", // id of the input field - ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field - showsTime : true, // will display a time selector - button : "f_trigger_b", // trigger for the calendar (button ID) - singleClick : false, // double-click mode - step : 1 // show all years in drop-down boxes (instead of every other year as default) - }); -</script> - - - -<hr /> - -<p><b>Input field with a trigger image.</b> Note that the Calendar.setup -function doesn't care if the trigger is a button, image, or anything else. -Also in this example we setup a different alignment, just to show how it's -done. The input field is read-only (that is set from HTML).</p> - -<form action="#" method="get"> -<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr> - <td><input type="text" name="date" id="f_date_c" readonly="1" /></td> - <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector" - onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td> -</table> -</form> - -<script type="text/javascript"> - Calendar.setup({ - inputField : "f_date_c", // id of the input field - ifFormat : "%B %e, %Y", // format of the input field - button : "f_trigger_c", // trigger for the calendar (button ID) - align : "Tl", // alignment (defaults to "Bl") - singleClick : true - }); -</script> - - - -<hr /> - -<p><b>Hidden field, display area.</b> The calendar now puts the date into 2 -elements: one is an input field of type "hidden"—so that the user -can't directly see or modify it— and one is a <span> element in -which the date is displayed. Note that if the trigger is not specified the -calendar will use the displayArea (or inputField as in the first example). -The display area can have it's own format. This is useful if, for instance, -we need to store one format in the database (thus pass it in the input -field) but we wanna show a friendlier format to the end-user.</p> - -<form action="#" method="get" style="visibility: hidden"> -<input type="hidden" name="date" id="f_date_d" /> -</form> - -<p>Your birthday: - <span style="background-color: #ff8; cursor: default;" - onmouseover="this.style.backgroundColor='#ff0';" - onmouseout="this.style.backgroundColor='#ff8';" - id="show_d" - >Click to open date selector</span>.</p> - -<script type="text/javascript"> - Calendar.setup({ - inputField : "f_date_d", // id of the input field - ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) - displayArea : "show_d", // ID of the span where the date is to be shown - daFormat : "%A, %B %d, %Y",// format of the displayed date - align : "Tl", // alignment (defaults to "Bl") - singleClick : true - }); -</script> - - - -<hr /> - -<p><b>Hidden field, display area, trigger image.</b> Very similar to the -previous example. The difference is that we also have a trigger image.</p> - -<form action="#" method="get" style="visibility: hidden"> -<input type="hidden" name="date" id="f_date_e" /> -</form> - -<p>Your birthday: <span id="show_e">-- not entered --</span> <img -src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid -red;" title="Date selector" onmouseover="this.style.background='red';" -onmouseout="this.style.background=''" />.</p> - -<script type="text/javascript"> - Calendar.setup({ - inputField : "f_date_e", // id of the input field - ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) - displayArea : "show_e", // ID of the span where the date is to be shown - daFormat : "%A, %B %d, %Y",// format of the displayed date - button : "f_trigger_e", // trigger button (well, IMG in our case) - align : "Tl", // alignment (defaults to "Bl") - singleClick : true - }); -</script> - - - -<hr /> - -<p><b>Hidden field, display area.</b> Very much like the previous examples, -but we now disable some dates (all weekends, that is, Saturdays and -Sundays).</p> - -<form action="#" method="get" style="visibility: hidden"> -<input type="hidden" name="date" id="f_date_f" /> -</form> - -<p>Your birthday: - <span style="background-color: #ff8; cursor: default;" - onmouseover="this.style.backgroundColor='#ff0';" - onmouseout="this.style.backgroundColor='#ff8';" - id="show_f" - >Click to open date selector</span>.</p> - -<script type="text/javascript"> - Calendar.setup({ - inputField : "f_date_f", // id of the input field - ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored) - displayArea : "show_f", // ID of the span where the date is to be shown - daFormat : "%A, %B %d, %Y",// format of the displayed date - align : "Tl", // alignment (defaults to "Bl") - dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0) - return (date.getDay() == 6 || date.getDay() == 0) ? true : false; - } - }); -</script> - - -</body> -</html> |