update to jscalendar ver. 0.9.5

This commit is contained in:
Ralf Becker 2003-11-11 14:51:10 +00:00
parent c4fb7bb0cf
commit 568bc3d513
35 changed files with 2604 additions and 593 deletions

View File

@ -1,8 +1,10 @@
<?php
/**************************************************************************\
* phpGroupWare - API jsCalendar setup (set up jsCalendar with user prefs) *
* http://www.phpgroupware.org *
* eGroupWare - API jsCalendar setup (set up jsCalendar with user prefs) *
* http://www.eGroupWare.org *
* Modified by Ralf Becker <RalfBecker@outdoor-training.de> *
* This file is derived from jscalendar's calendar-setup.js file and the *
* english translation in lang/calendar-en.js. *
* -------------------------------------------- *
* This program is free software; you can redistribute it and/or modify it *
* under the terms of the GNU General Public License as published by the *
@ -25,26 +27,33 @@ $GLOBALS['phpgw_info']['flags'] = Array(
include('../../header.inc.php');
$dateformat = $GLOBALS['phpgw_info']['user']['preferences']['common']['dateformat'];
$jsDateFormat = str_replace(array('Y','d','m'),array('y','dd','mm'),$dateformat);
$jsDateFormat = str_replace(array('Y','d','m','M'),array('%Y','%d','%m','%b'),$dateformat);
$dayFirst = strpos($dateformat,'d') < strpos($dateformat,'m');
$jsLongDateFormat = 'DD, '.($dayFirst ? 'd' : 'MM').($dateformat[1] == '.' ? '. ' : ' ').($dayFirst ? 'MM' : 'd');
$jsLongDateFormat = '%a, '.($dayFirst ? '%e' : '%b').($dateformat[1] == '.' ? '. ' : ' ').($dayFirst ? '%b' : '%e');
/* Copyright Mihai Bazon, 2002, 2003 | http://students.infoiasi.ro/~mishoo
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://students.infoiasi.ro/~mishoo/site/calendar.epl
* http://dynarch.com/mishoo/calendar.epl
*
* Feel free to use this script under the terms of the GNU Lesser General
* Public License, as long as you do not remove or alter this notice.
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly.
* quickly. This script should not be seen as part of the calendar. It just
* shows you what one can do with the calendar, while in the same time
* providing a quick and simple method for setting it up. If you need
* exhaustive customization of the calendar creation process feel free to
* modify this code to suit your needs (this is recommended and much better
* than modifying calendar.js itself).
*/
// $Id$
/**
* This function "patches" an input field (or other element) to use a calendar
* widget for date selection.
@ -60,19 +69,24 @@ $jsLongDateFormat = 'DD, '.($dayFirst ? 'd' : 'MM').($dateformat[1] == '.' ? '.
* ifFormat | date format that will be stored in the input field
* daFormat | the date format that will be used to display the date in displayArea
* singleClick | (true/false) wether the calendar is in single click mode or not (default: true)
* mondayFirst | (true/false) if true Monday is the first day of week, Sunday otherwise (default: false)
* mondayFirst | (true/false) if true Monday is the first day of week, Sunday otherwise (default: true)
* align | alignment (default: "Bl"); if you don't know what's this see the calendar documentation
* range | array with 2 elements. Default: [1900, 2999] -- the range of years available
* weekNumbers | (true/false) if it's true (default) the calendar will display week numbers
* flat | null or element ID; if not null the calendar will be a flat calendar having the parent with the given ID
* flatCallback | function that receives a JS Date object and returns an URL to point the browser to (for flat calendar)
* disableFunc | function that receives a JS Date object and should return true if that date has to be disabled in the calendar
* onSelect | function that gets called when a date is selected. You don't _have_ to supply this (the default is generally okay)
* onClose | function that gets called when the calendar is closed. [default]
* onUpdate | function that gets called after the date is updated in the input field. Receives a reference to the calendar.
* date | the date that the calendar will be initially displayed to
* showsTime | default: false; if true the calendar will include a time selector
* timeFormat | the time format; can be "12" or "24", default is "12"
*
* None of them is required, they all have default values. However, if you
* pass none of "inputField", "displayArea" or "button" you'll get a warning
* saying "nothing to setup".
*/
?>
Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
@ -81,16 +95,27 @@ Calendar.setup = function (params) {
param_default("displayArea", null);
param_default("button", null);
param_default("eventName", "click");
// param_default("ifFormat", "%Y/%m/%d");
param_default("ifFormat", "<?php echo $jsDateFormat; ?>");
// param_default("daFormat", "%Y/%m/%d");
param_default("daFormat", "<?php echo $jsDateFormat; ?>");
param_default("singleClick", true);
param_default("disableFunc", null);
param_default("dateStatusFunc", params["disableFunc"]); // takes precedence if both are defined
// param_default("mondayFirst", true);
param_default("mondayFirst", <?php echo $GLOBALS['phpgw_info']['user']['preferences']['common']['weekdaysstarts'] != 'sunday' ? 'true' : 'false'; ?>);
param_default("align", "Bl");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
// param_default("timeFormat", "24");
param_default("timeFormat", "<?php echo $GLOBALS['phpgw_info']['user']['preferences']['common']['timeformat']; ?>");
var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) {
@ -121,6 +146,9 @@ Calendar.setup = function (params) {
if (cal.params.singleClick && cal.dateClicked) {
cal.callCloseHandler();
}
if (typeof cal.params.onUpdate == "function") {
cal.params.onUpdate(cal);
}
};
if (params.flat != null) {
@ -129,11 +157,13 @@ Calendar.setup = function (params) {
alert("Calendar.setup:\n Flat specified but can't find parent.");
return false;
}
var cal = new Calendar(params.mondayFirst, null, onSelect);
var cal = new Calendar(params.mondayFirst, params.date, params.onSelect || onSelect);
cal.showsTime = params.showsTime;
cal.time24 = (params.timeFormat == "24");
cal.params = params;
cal.weekNumbers = params.weekNumbers;
cal.setRange(params.range[0], params.range[1]);
cal.setDisabledHandler(params.disableFunc);
cal.setDateStatusHandler(params.dateStatusFunc);
cal.create(params.flat);
cal.show();
return false;
@ -144,29 +174,42 @@ Calendar.setup = function (params) {
var dateEl = params.inputField || params.displayArea;
var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
var mustCreate = false;
var cal = window.calendar;
if (!window.calendar) {
window.calendar = new Calendar(params.mondayFirst, null, onSelect, function(cal) { cal.hide(); });
window.calendar.weekNumbers = params.weekNumbers;
window.calendar = cal = new Calendar(params.mondayFirst,
params.date,
params.onSelect || onSelect,
params.onClose || function(cal) { cal.hide(); });
cal.showsTime = params.showsTime;
cal.time24 = (params.timeFormat == "24");
cal.weekNumbers = params.weekNumbers;
mustCreate = true;
} else {
window.calendar.hide();
cal.hide();
}
window.calendar.setRange(params.range[0], params.range[1]);
window.calendar.params = params;
window.calendar.setDisabledHandler(params.disableFunc);
window.calendar.setDateFormat(dateFmt);
if (mustCreate) {
window.calendar.create();
}
window.calendar.parseDate(dateEl.value || dateEl.innerHTML);
window.calendar.refresh();
window.calendar.showAtElement(params.displayArea || params.inputField, params.align);
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.parseDate(dateEl.value || dateEl.innerHTML);
cal.refresh();
cal.showAtElement(params.displayArea || params.inputField, params.align);
return false;
};
};
// translations
// eGroupWare translations, are read from the database
// ** I18N
// Calendar EN language
// Author: Mihai Bazon, <mishoo@infoiasi.ro>
// Encoding: any
// Distributed under the same terms as the calendar itself.
// full day names
Calendar._DN = new Array
("<?php echo lang('Sunday') ?>",
"<?php echo lang('Monday'); ?>",
@ -176,6 +219,10 @@ Calendar._DN = new Array
"<?php echo lang('Friday'); ?>",
"<?php echo lang('Saturday'); ?>",
"<?php echo lang('Sunday'); ?>");
// please note eGW does NOT use the short month-names atm.
// full month names
Calendar._MN = new Array
("<?php echo lang('January'); ?>",
"<?php echo lang('February'); ?>",
@ -192,6 +239,24 @@ Calendar._MN = new Array
// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "<?php echo lang('About the calendar'); ?>";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"For latest version visit: http://dynarch.com/mishoo/calendar.epl\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"<?php echo lang('Date selection:'); ?>\n" +
"<?php echo lang('- Use the %1, %2 buttons to select year','\xab','\xbb'); ?>\n" +
"<?php echo lang('- Use the %1, %2 buttons to select month','" + String.fromCharCode(0x2039) + "','" + String.fromCharCode(0x203a) + "'); ?>\n" +
"<?php echo lang('- Hold mouse button on any of the above buttons for faster selection.'); ?>";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"<?php echo lang('Time selection:'); ?>\n" +
"<?php echo lang('- Click on any of the time parts to increase it'); ?>\n" +
"<?php echo lang('- or Shift-click to decrease it'); ?>\n" +
"<?php echo lang('- or click and drag for faster selection.'); ?>";
Calendar._TT["TOGGLE"] = "<?php echo lang('Toggle first day of week'); ?>";
Calendar._TT["PREV_YEAR"] = "<?php echo lang('Prev. year (hold for menu)'); ?>";
Calendar._TT["PREV_MONTH"] = "<?php echo lang('Prev. month (hold for menu)'); ?>";
@ -205,9 +270,12 @@ Calendar._TT["MON_FIRST"] = "<?php echo lang('Display Monday first'); ?>";
Calendar._TT["SUN_FIRST"] = "<?php echo lang('Display Sunday first'); ?>";
Calendar._TT["CLOSE"] = "<?php echo lang('Close'); ?>";
Calendar._TT["TODAY"] = "<?php echo lang('Today'); ?>";
Calendar._TT["TIME_PART"] = "<?php echo lang('(Shift-)Click or drag to change value'); ?>";
// date formats
//Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
Calendar._TT["DEF_DATE_FORMAT"] = "<?php echo $jsDateFormat; ?>";
//Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e";
Calendar._TT["TT_DATE_FORMAT"] = "<?php echo $jsLongDateFormat; ?>";
Calendar._TT["WK"] = "<?php echo lang('Wk'); ?>";

View File

@ -2,17 +2,13 @@ The DHTML Calendar
-------------------
Author: Mihai Bazon, <mishoo@infoiasi.ro>
http://students.infoiasi.ro/~mishoo
http://dynarch.com/mishoo/
This program is free software published under the
GNU Lesser General Public License.
terms of the GNU Lesser General Public License.
For the entire license text please refer to
http://www.gnu.org/licenses/lgpl
An additional restriction is that you are not allowed
to remove the comment note present at the beginning of
the script.
http://www.gnu.org/licenses/lgpl.html
Contents
---------
@ -31,5 +27,5 @@ Homepage
For details and latest versions please refer to calendar
homepage, located on my website:
http://students.infoiasi.ro/~mishoo/site/calendar.epl
http://dynarch.com/mishoo/calendar.epl

View File

@ -1,4 +1,4 @@
This directory contains the (unchanged) Version 0.9.3 of jsCalendar
This directory contains the (unchanged) Version 0.9.5 of jsCalendar
jsCalendar is called by the jscalendar wrapper-class in the phpGW API
@ -7,3 +7,7 @@ which sets all jscalendar preferences (partly from the users prefs) and read the
translations from the database for the language the user has spec. in his prefs.
RalfBecker@outdoor-training.de
History:
11-Nov-2003 updated to version 0.9.5
17-Aug-2003 inital import of version 0.9.3

View File

@ -18,6 +18,10 @@ div.calendar { position: relative; }
padding: 2px; /* Make the buttons seem like they're pressing */
}
.calendar .nav {
background: #778 url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
@ -47,14 +51,14 @@ div.calendar { position: relative; }
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #aaf;
background-color: #aaf;
color: #000;
border: 1px solid #04f;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background: #77c;
background-color: #77c;
padding: 2px 0px 0px 2px;
}
@ -161,9 +165,14 @@ div.calendar { position: relative; }
font-size: smaller;
}
.combo .label {
width: 100%;
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
@ -176,3 +185,40 @@ div.calendar { position: relative; }
background: #eef;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -18,6 +18,10 @@ div.calendar { position: relative; }
padding: 2px; /* Make the buttons seem like they're pressing */
}
.calendar .nav {
background: #edc url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
@ -43,14 +47,14 @@ div.calendar { position: relative; }
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #faa;
background-color: #faa;
color: #000;
border: 1px solid #f40;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background: #c77;
background-color: #c77;
padding: 2px 0px 0px 2px;
}
@ -154,9 +158,14 @@ div.calendar { position: relative; }
font-size: smaller;
}
.combo .label {
width: 100%;
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
@ -169,3 +178,40 @@ div.calendar { position: relative; }
background: #fee;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #a88;
padding: 1px 0px;
text-align: center;
background-color: #fed;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #988;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #866;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -21,6 +21,10 @@ div.calendar { position: relative; }
font-size: 90%;
}
.calendar .nav {
background: #676 url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
@ -44,14 +48,14 @@ div.calendar { position: relative; }
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #afa;
background-color: #afa;
color: #000;
border: 1px solid #084;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background: #7c7;
background-color: #7c7;
padding: 2px 0px 0px 2px;
}
@ -70,7 +74,7 @@ div.calendar { position: relative; }
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
border-right: 1px solid #8a8;
background: #dfb;
}
@ -158,9 +162,14 @@ div.calendar { position: relative; }
font-size: smaller;
}
.combo .label {
width: 100%;
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
@ -173,3 +182,40 @@ div.calendar { position: relative; }
background: #efe;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #8a8;
padding: 1px 0px;
text-align: center;
background-color: #dfb;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #898;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #686;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -1,17 +1,22 @@
/* Copyright Mihai Bazon, 2002, 2003 | http://students.infoiasi.ro/~mishoo
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://students.infoiasi.ro/~mishoo/site/calendar.epl
* http://dynarch.com/mishoo/calendar.epl
*
* Feel free to use this script under the terms of the GNU Lesser General
* Public License, as long as you do not remove or alter this notice.
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly.
* quickly. This script should not be seen as part of the calendar. It just
* shows you what one can do with the calendar, while in the same time
* providing a quick and simple method for setting it up. If you need
* exhaustive customization of the calendar creation process feel free to
* modify this code to suit your needs (this is recommended and much better
* than modifying calendar.js itself).
*/
// $Id$
@ -31,13 +36,19 @@
* ifFormat | date format that will be stored in the input field
* daFormat | the date format that will be used to display the date in displayArea
* singleClick | (true/false) wether the calendar is in single click mode or not (default: true)
* mondayFirst | (true/false) if true Monday is the first day of week, Sunday otherwise (default: false)
* mondayFirst | (true/false) if true Monday is the first day of week, Sunday otherwise (default: true)
* align | alignment (default: "Bl"); if you don't know what's this see the calendar documentation
* range | array with 2 elements. Default: [1900, 2999] -- the range of years available
* weekNumbers | (true/false) if it's true (default) the calendar will display week numbers
* flat | null or element ID; if not null the calendar will be a flat calendar having the parent with the given ID
* flatCallback | function that receives a JS Date object and returns an URL to point the browser to (for flat calendar)
* disableFunc | function that receives a JS Date object and should return true if that date has to be disabled in the calendar
* onSelect | function that gets called when a date is selected. You don't _have_ to supply this (the default is generally okay)
* onClose | function that gets called when the calendar is closed. [default]
* onUpdate | function that gets called after the date is updated in the input field. Receives a reference to the calendar.
* date | the date that the calendar will be initially displayed to
* showsTime | default: false; if true the calendar will include a time selector
* timeFormat | the time format; can be "12" or "24", default is "12"
*
* None of them is required, they all have default values. However, if you
* pass none of "inputField", "displayArea" or "button" you'll get a warning
@ -50,16 +61,23 @@ Calendar.setup = function (params) {
param_default("displayArea", null);
param_default("button", null);
param_default("eventName", "click");
param_default("ifFormat", "y/mm/dd");
param_default("daFormat", "y/mm/dd");
param_default("ifFormat", "%Y/%m/%d");
param_default("daFormat", "%Y/%m/%d");
param_default("singleClick", true);
param_default("disableFunc", null);
param_default("mondayFirst", false);
param_default("dateStatusFunc", params["disableFunc"]); // takes precedence if both are defined
param_default("mondayFirst", true);
param_default("align", "Bl");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) {
@ -90,6 +108,9 @@ Calendar.setup = function (params) {
if (cal.params.singleClick && cal.dateClicked) {
cal.callCloseHandler();
}
if (typeof cal.params.onUpdate == "function") {
cal.params.onUpdate(cal);
}
};
if (params.flat != null) {
@ -98,11 +119,13 @@ Calendar.setup = function (params) {
alert("Calendar.setup:\n Flat specified but can't find parent.");
return false;
}
var cal = new Calendar(params.mondayFirst, null, onSelect);
var cal = new Calendar(params.mondayFirst, params.date, params.onSelect || onSelect);
cal.showsTime = params.showsTime;
cal.time24 = (params.timeFormat == "24");
cal.params = params;
cal.weekNumbers = params.weekNumbers;
cal.setRange(params.range[0], params.range[1]);
cal.setDisabledHandler(params.disableFunc);
cal.setDateStatusHandler(params.dateStatusFunc);
cal.create(params.flat);
cal.show();
return false;
@ -113,23 +136,28 @@ Calendar.setup = function (params) {
var dateEl = params.inputField || params.displayArea;
var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
var mustCreate = false;
var cal = window.calendar;
if (!window.calendar) {
window.calendar = new Calendar(params.mondayFirst, null, onSelect, function(cal) { cal.hide(); });
window.calendar.weekNumbers = params.weekNumbers;
window.calendar = cal = new Calendar(params.mondayFirst,
params.date,
params.onSelect || onSelect,
params.onClose || function(cal) { cal.hide(); });
cal.showsTime = params.showsTime;
cal.time24 = (params.timeFormat == "24");
cal.weekNumbers = params.weekNumbers;
mustCreate = true;
} else {
window.calendar.hide();
cal.hide();
}
window.calendar.setRange(params.range[0], params.range[1]);
window.calendar.params = params;
window.calendar.setDisabledHandler(params.disableFunc);
window.calendar.setDateFormat(dateFmt);
if (mustCreate) {
window.calendar.create();
}
window.calendar.parseDate(dateEl.value || dateEl.innerHTML);
window.calendar.refresh();
window.calendar.showAtElement(params.displayArea || params.inputField, params.align);
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.parseDate(dateEl.value || dateEl.innerHTML);
cal.refresh();
cal.showAtElement(params.displayArea || params.inputField, params.align);
return false;
};
};

View File

@ -1,16 +1,21 @@
/* Copyright Mihai Bazon, 2002, 2003 | http://students.infoiasi.ro/~mishoo
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://students.infoiasi.ro/~mishoo/site/calendar.epl
* http://dynarch.com/mishoo/calendar.epl
*
* Feel free to use this script under the terms of the GNU Lesser General
* Public License, as long as you do not remove or alter this notice.
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly.
* quickly. This script should not be seen as part of the calendar. It just
* shows you what one can do with the calendar, while in the same time
* providing a quick and simple method for setting it up. If you need
* exhaustive customization of the calendar creation process feel free to
* modify this code to suit your needs (this is recommended and much better
* than modifying calendar.js itself).
*/
Calendar.setup=function(params){function param_default(pname,def){if(typeof params[pname]=="undefined"){params[pname]=def;}};param_default("inputField",null);param_default("displayArea",null);param_default("button",null);param_default("eventName","click");param_default("ifFormat","y/mm/dd");param_default("daFormat","y/mm/dd");param_default("singleClick",true);param_default("disableFunc",null);param_default("mondayFirst",false);param_default("align","Bl");param_default("range",[1900,2999]);param_default("weekNumbers",true);param_default("flat",null);param_default("flatCallback",null);var tmp=["inputField","displayArea","button"];for(var i in tmp){if(typeof params[tmp[i]]=="string"){params[tmp[i]]=document.getElementById(params[tmp[i]]);}}if(!(params.flat||params.inputField||params.displayArea||params.button)){alert("Calendar.setup:\n Nothing to setup (no fields found). Please check your code");return false;}function onSelect(cal){if(cal.params.flat){if(typeof cal.params.flatCallback=="function"){cal.params.flatCallback(cal);}else{alert("No flatCallback given -- doing nothing.");}return false;}if(cal.params.inputField){cal.params.inputField.value=cal.date.print(cal.params.ifFormat);}if(cal.params.displayArea){cal.params.displayArea.innerHTML=cal.date.print(cal.params.daFormat);}if(cal.params.singleClick&&cal.dateClicked){cal.callCloseHandler();}};if(params.flat!=null){params.flat=document.getElementById(params.flat);if(!params.flat){alert("Calendar.setup:\n Flat specified but can't find parent.");return false;}var cal=new Calendar(params.mondayFirst,null,onSelect);cal.params=params;cal.weekNumbers=params.weekNumbers;cal.setRange(params.range[0],params.range[1]);cal.setDisabledHandler(params.disableFunc);cal.create(params.flat);cal.show();return false;}var triggerEl=params.button||params.displayArea||params.inputField;triggerEl["on"+params.eventName]=function(){var dateEl=params.inputField||params.displayArea;var dateFmt=params.inputField?params.ifFormat:params.daFormat;var mustCreate=false;if(!window.calendar){window.calendar=new Calendar(params.mondayFirst,null,onSelect,function(cal){cal.hide();});window.calendar.weekNumbers=params.weekNumbers;mustCreate=true;}else{window.calendar.hide();}window.calendar.setRange(params.range[0],params.range[1]);window.calendar.params=params;window.calendar.setDisabledHandler(params.disableFunc);window.calendar.setDateFormat(dateFmt);if(mustCreate){window.calendar.create();}window.calendar.parseDate(dateEl.value||dateEl.innerHTML);window.calendar.refresh();window.calendar.showAtElement(params.displayArea||params.inputField,params.align);return false;};};
Calendar.setup=function(params){function param_default(pname,def){if(typeof params[pname]=="undefined"){params[pname]=def;}};param_default("inputField",null);param_default("displayArea",null);param_default("button",null);param_default("eventName","click");param_default("ifFormat","%Y/%m/%d");param_default("daFormat","%Y/%m/%d");param_default("singleClick",true);param_default("disableFunc",null);param_default("dateStatusFunc",params["disableFunc"]);param_default("mondayFirst",true);param_default("align","Bl");param_default("range",[1900,2999]);param_default("weekNumbers",true);param_default("flat",null);param_default("flatCallback",null);param_default("onSelect",null);param_default("onClose",null);param_default("onUpdate",null);param_default("date",null);param_default("showsTime",false);param_default("timeFormat","24");var tmp=["inputField","displayArea","button"];for(var i in tmp){if(typeof params[tmp[i]]=="string"){params[tmp[i]]=document.getElementById(params[tmp[i]]);}}if(!(params.flat||params.inputField||params.displayArea||params.button)){alert("Calendar.setup:\n Nothing to setup (no fields found). Please check your code");return false;}function onSelect(cal){if(cal.params.flat){if(typeof cal.params.flatCallback=="function"){cal.params.flatCallback(cal);}else{alert("No flatCallback given -- doing nothing.");}return false;}if(cal.params.inputField){cal.params.inputField.value=cal.date.print(cal.params.ifFormat);}if(cal.params.displayArea){cal.params.displayArea.innerHTML=cal.date.print(cal.params.daFormat);}if(cal.params.singleClick&&cal.dateClicked){cal.callCloseHandler();}if(typeof cal.params.onUpdate=="function"){cal.params.onUpdate(cal);}};if(params.flat!=null){params.flat=document.getElementById(params.flat);if(!params.flat){alert("Calendar.setup:\n Flat specified but can't find parent.");return false;}var cal=new Calendar(params.mondayFirst,params.date,params.onSelect||onSelect);cal.showsTime=params.showsTime;cal.time24=(params.timeFormat=="24");cal.params=params;cal.weekNumbers=params.weekNumbers;cal.setRange(params.range[0],params.range[1]);cal.setDateStatusHandler(params.dateStatusFunc);cal.create(params.flat);cal.show();return false;}var triggerEl=params.button||params.displayArea||params.inputField;triggerEl["on"+params.eventName]=function(){var dateEl=params.inputField||params.displayArea;var dateFmt=params.inputField?params.ifFormat:params.daFormat;var mustCreate=false;var cal=window.calendar;if(!window.calendar){window.calendar=cal=new Calendar(params.mondayFirst,params.date,params.onSelect||onSelect,params.onClose||function(cal){cal.hide();});cal.showsTime=params.showsTime;cal.time24=(params.timeFormat=="24");cal.weekNumbers=params.weekNumbers;mustCreate=true;}else{cal.hide();}cal.setRange(params.range[0],params.range[1]);cal.params=params;cal.setDateStatusHandler(params.dateStatusFunc);cal.setDateFormat(dateFmt);if(mustCreate)cal.create();cal.parseDate(dateEl.value||dateEl.innerHTML);cal.refresh();cal.showAtElement(params.displayArea||params.inputField,params.align);return false;};};

View File

@ -32,6 +32,10 @@
background: ButtonFace;
}
.calendar .nav {
background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
@ -60,8 +64,9 @@
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border-width: 2px;
border: 2px solid;
padding: 0px;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.calendar thead .active { /* Active (pressed) buttons in header */
@ -86,8 +91,8 @@
}
.calendar tbody .rowhilite td {
background: #eee;
color: #000;
background: Highlight;
color: HighlightText;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
@ -109,6 +114,8 @@
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 2px 0px 2px;
background: ButtonFace;
color: ButtonText;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
@ -178,11 +185,16 @@
padding: 1px;
}
.combo .label {
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
padding: 0px;
border: 1px solid #000;
@ -192,3 +204,40 @@
background: Highlight;
color: HighlightText;
}
.calendar td.time {
border-top: 1px solid ButtonShadow;
padding: 1px 0px;
text-align: center;
background-color: ButtonFace;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: Menu;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: Highlight;
color: HighlightText;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -37,6 +37,10 @@
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background: #e4e0d8;
background-color: #e4e0d8;
}
.calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background: #c4c0b8;
background-color: #c4c0b8;
}
/* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px;
}
.combo .label {
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c4c0b8;
padding: 0px;
@ -215,3 +224,40 @@
background: #048;
color: #fea;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #766;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -37,6 +37,10 @@
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background: #e4d8e0;
background-color: #e4d8e0;
}
.calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background: #c4b8c0;
background-color: #c4b8c0;
}
/* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px;
}
.combo .label {
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #d4c8d0;
padding: 0px;
@ -215,3 +224,40 @@
background: #408;
color: #fea;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #766;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -37,6 +37,10 @@
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background: #d8e0e4;
background-color: #d8e0e4;
}
.calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background: #b8c0c4;
background-color: #b8c0c4;
}
/* The body part -- contains all the days in month. */
@ -191,11 +195,16 @@
padding: 1px;
}
.combo .label {
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c8d0d4;
padding: 0px;
@ -209,3 +218,40 @@
background: #048;
color: #aef;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #e8f0f4;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -37,6 +37,10 @@
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background: #d8e4e0;
background-color: #d8e4e0;
}
.calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background: #b8c4c0;
background-color: #b8c4c0;
}
/* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px;
}
.combo .label {
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c8d4d0;
padding: 0px;
@ -215,3 +224,40 @@
background: #048;
color: #aef;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #e8f0f4;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}

View File

@ -1,13 +1,13 @@
/* Copyright Mihai Bazon, 2002, 2003 | http://students.infoiasi.ro/~mishoo
* ---------------------------------------------------------------------------
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ------------------------------------------------------------------
*
* The DHTML Calendar, version 0.9.3 "It's still alive & keeps rocking"
* The DHTML Calendar, version 0.9.5 "Your favorite time, bis"
*
* Details and latest version at:
* http://students.infoiasi.ro/~mishoo/site/calendar.epl
* http://dynarch.com/mishoo/calendar.epl
*
* Feel free to use this script under the terms of the GNU Lesser General
* Public License, as long as you do not remove or alter this notice.
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*/
// $Id$
@ -17,7 +17,7 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
this.checkDisabled = null;
this.getDateStatus = null;
this.timeout = null;
this.onSelected = onSelected || null;
this.onClose = onClose || null;
@ -32,6 +32,8 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
this.mondayFirst = mondayFirst;
this.dateStr = dateStr;
this.ar_days = null;
this.showsTime = false;
this.time24 = true;
// HTML elements
this.table = null;
this.element = null;
@ -48,19 +50,23 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
this.dateClicked = false;
// one-time initializations
if (!Calendar._DN3) {
if (typeof Calendar._SDN == "undefined") {
// table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array();
for (var i = 8; i > 0;) {
ar[--i] = Calendar._DN[i].substr(0, 3);
ar[--i] = Calendar._DN[i].substr(0, Calendar._SDN_len);
}
Calendar._DN3 = ar;
Calendar._SDN = ar;
// table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array();
for (var i = 12; i > 0;) {
ar[--i] = Calendar._MN[i].substr(0, 3);
ar[--i] = Calendar._MN[i].substr(0, Calendar._SMN_len);
}
Calendar._MN3 = ar;
Calendar._SMN = ar;
}
};
@ -73,17 +79,23 @@ Calendar._C = null;
Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) );
// short day names array (initialized at first constructor call)
Calendar._DN3 = null;
/// detect Opera browser
Calendar.is_opera = /opera/i.test(navigator.userAgent);
// short month names array (initialized at first constructor call)
Calendar._MN3 = null;
/// detect KHTML-based browsers
Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent);
// BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate
// library, at some point.
Calendar.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
var SL = 0, ST = 0;
var is_div = /^div$/i.test(el.tagName);
if (is_div && el.scrollLeft)
SL = el.scrollLeft;
if (is_div && el.scrollTop)
ST = el.scrollTop;
var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
if (el.offsetParent) {
var tmp = Calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
@ -147,9 +159,10 @@ Calendar.getTargetElement = function(ev) {
};
Calendar.stopEvent = function(ev) {
ev || (ev = window.event);
if (Calendar.is_ie) {
window.event.cancelBubble = true;
window.event.returnValue = false;
ev.cancelBubble = true;
ev.returnValue = false;
} else {
ev.preventDefault();
ev.stopPropagation();
@ -162,7 +175,7 @@ Calendar.addEvent = function(el, evname, func) {
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else { // Opera (or old browsers)
} else {
el["on" + evname] = func;
}
};
@ -172,7 +185,7 @@ Calendar.removeEvent = function(el, evname, func) {
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else { // Opera (or old browsers)
} else {
el["on" + evname] = null;
}
};
@ -244,9 +257,13 @@ Calendar.showMonthsCombo = function () {
var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
Calendar.addClass(mon, "active");
cal.activeMonth = mon;
mc.style.left = cd.offsetLeft + "px";
mc.style.top = (cd.offsetTop + cd.offsetHeight) + "px";
mc.style.display = "block";
var s = mc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else
s.left = (cd.offsetLeft + cd.offsetWidth - mc.offsetWidth) + "px";
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
};
Calendar.showYearsCombo = function (fwd) {
@ -280,9 +297,13 @@ Calendar.showYearsCombo = function (fwd) {
Y += fwd ? 2 : -2;
}
if (show) {
yc.style.left = cd.offsetLeft + "px";
yc.style.top = (cd.offsetTop + cd.offsetHeight) + "px";
yc.style.display = "block";
var s = yc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else
s.left = (cd.offsetLeft + cd.offsetWidth - yc.offsetWidth) + "px";
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
}
};
@ -301,9 +322,10 @@ Calendar.tableMouseUp = function(ev) {
return false;
}
var target = Calendar.getTargetElement(ev);
ev || (ev = window.event);
Calendar.removeClass(el, "active");
if (target == el || target.parentNode == el) {
Calendar.cellClick(el);
Calendar.cellClick(el, ev);
}
var mon = Calendar.findMonth(target);
var date = null;
@ -348,10 +370,42 @@ Calendar.tableMouseOver = function (ev) {
Calendar.addClass(el, "hilite active");
Calendar.addClass(el.parentNode, "rowhilite");
} else {
if (typeof el.navtype == "undefined" || (el.navtype != 50 && (el.navtype == 0 || Math.abs(el.navtype) > 2)))
Calendar.removeClass(el, "active");
Calendar.removeClass(el, "hilite");
Calendar.removeClass(el.parentNode, "rowhilite");
}
ev || (ev = window.event);
if (el.navtype == 50 && target != el) {
var pos = Calendar.getAbsolutePos(el);
var w = el.offsetWidth;
var x = ev.clientX;
var dx;
var decrease = true;
if (x > pos.x + w) {
dx = x - pos.x - w;
decrease = false;
} else
dx = pos.x - x;
if (dx < 0) dx = 0;
var range = el._range;
var current = el._current;
var count = Math.floor(dx / 10) % range.length;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
while (count-- > 0)
if (decrease) {
if (!(--i in range))
i = range.length - 1;
} else if (!(++i in range))
i = 0;
var newval = range[i];
el.firstChild.data = newval;
cal.onUpdateTime();
}
var mon = Calendar.findMonth(target);
if (mon) {
if (mon.month != cal.date.getMonth()) {
@ -364,6 +418,9 @@ Calendar.tableMouseOver = function (ev) {
Calendar.removeClass(cal.hilitedMonth, "hilite");
}
} else {
if (cal.hilitedMonth) {
Calendar.removeClass(cal.hilitedMonth, "hilite");
}
var year = Calendar.findYear(target);
if (year) {
if (year.year != cal.date.getFullYear()) {
@ -375,6 +432,8 @@ Calendar.tableMouseOver = function (ev) {
} else if (cal.hilitedYear) {
Calendar.removeClass(cal.hilitedYear, "hilite");
}
} else if (cal.hilitedYear) {
Calendar.removeClass(cal.hilitedYear, "hilite");
}
}
return Calendar.stopEvent(ev);
@ -431,6 +490,8 @@ Calendar.dayMouseDown = function(ev) {
cal.activeDiv = el;
Calendar._C = cal;
if (el.navtype != 300) with (Calendar) {
if (el.navtype == 50)
el._current = el.firstChild.data;
addClass(el, "hilite active");
addEvent(document, "mouseover", tableMouseOver);
addEvent(document, "mousemove", tableMouseOver);
@ -439,8 +500,10 @@ Calendar.dayMouseDown = function(ev) {
cal._dragStart(ev);
}
if (el.navtype == -1 || el.navtype == 1) {
if (cal.timeout) clearTimeout(cal.timeout);
cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250);
} else if (el.navtype == -2 || el.navtype == 2) {
if (cal.timeout) clearTimeout(cal.timeout);
cal.timeout = setTimeout((el.navtype > 0) ? "Calendar.showYearsCombo(true)" : "Calendar.showYearsCombo(false)", 250);
} else {
cal.timeout = null;
@ -449,7 +512,7 @@ Calendar.dayMouseDown = function(ev) {
};
Calendar.dayMouseDblClick = function(ev) {
Calendar.cellClick(Calendar.getElement(ev));
Calendar.cellClick(Calendar.getElement(ev), ev || window.event);
if (Calendar.is_ie) {
document.selection.empty();
}
@ -498,7 +561,7 @@ Calendar.dayMouseOut = function(ev) {
* A generic "click" handler :) handles all types of buttons defined in this
* calendar.
*/
Calendar.cellClick = function(el) {
Calendar.cellClick = function(el, ev) {
var cal = el.calendar;
var closing = false;
var newdate = false;
@ -525,7 +588,8 @@ Calendar.cellClick = function(el) {
// unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when
// in single-click mode.
cal.dateClicked = (el.navtype == 0);
// cal.dateClicked = (el.navtype == 0);
cal.dateClicked = false;
var year = date.getFullYear();
var mon = date.getMonth();
function setMonth(m) {
@ -537,6 +601,22 @@ Calendar.cellClick = function(el) {
date.setMonth(m);
};
switch (el.navtype) {
case 400:
Calendar.removeClass(el, "hilite");
var text = Calendar._TT["ABOUT"];
if (typeof text != "undefined") {
text += cal.showsTime ? Calendar._TT["ABOUT_TIME"] : "";
} else {
// FIXME: this should be removed as soon as lang files get updated!
text = "Help and about box text is not translated into this language.\n" +
"If you know this language and you feel generous please update\n" +
"the corresponding file in \"lang\" subdir to match calendar-en.js\n" +
"and send it back to <mishoo@infoiasi.ro> to get it into the distribution ;-)\n\n" +
"Thank you!\n" +
"http://dynarch.com/mishoo/calendar.epl\n";
}
alert(text);
return;
case -2:
if (year > cal.minYear) {
date.setFullYear(year - 1);
@ -566,9 +646,24 @@ Calendar.cellClick = function(el) {
case 100:
cal.setMondayFirst(!cal.mondayFirst);
return;
case 50:
var range = el._range;
var current = el.firstChild.data;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
if (ev && ev.shiftKey) {
if (!(--i in range))
i = range.length - 1;
} else if (!(++i in range))
i = 0;
var newval = range[i];
el.firstChild.data = newval;
cal.onUpdateTime();
return;
case 0:
// TODAY will bring us here
if ((typeof cal.checkDisabled == "function") && cal.checkDisabled(date)) {
if ((typeof cal.getDateStatus == "function") && cal.getDateStatus(date, date.getFullYear(), date.getMonth(), date.getDate())) {
// remember, "date" was previously set to new
// Date() if TODAY was clicked; thus, it
// contains today date.
@ -638,6 +733,8 @@ Calendar.prototype.create = function (_par) {
cell = Calendar.createElement("td", row);
cell.colSpan = cs;
cell.className = "button";
if (navtype != 0 && Math.abs(navtype) <= 2)
cell.className += " nav";
Calendar._add_evs(cell);
cell.calendar = cal;
cell.navtype = navtype;
@ -656,7 +753,7 @@ Calendar.prototype.create = function (_par) {
(this.isPopup) && --title_length;
(this.weekNumbers) && ++title_length;
hh("-", 1, 100).ttip = Calendar._TT["TOGGLE"];
hh("?", 1, 400).ttip = Calendar._TT["INFO"];
this.title = hh("", title_length, 300);
this.title.className = "title";
if (this.isPopup) {
@ -720,6 +817,96 @@ Calendar.prototype.create = function (_par) {
}
}
if (this.showsTime) {
row = Calendar.createElement("tr", tbody);
row.className = "time";
cell = Calendar.createElement("td", row);
cell.className = "time";
cell.colSpan = 2;
cell.innerHTML = "&nbsp;";
cell = Calendar.createElement("td", row);
cell.className = "time";
cell.colSpan = this.weekNumbers ? 4 : 3;
(function(){
function makeTimePart(className, init, range_start, range_end) {
var part = Calendar.createElement("span", cell);
part.className = className;
part.appendChild(document.createTextNode(init));
part.calendar = cal;
part.ttip = Calendar._TT["TIME_PART"];
part.navtype = 50;
part._range = [];
if (typeof range_start != "number")
part._range = range_start;
else {
for (var i = range_start; i <= range_end; ++i) {
var txt;
if (i < 10 && range_end >= 10) txt = '0' + i;
else txt = '' + i;
part._range[part._range.length] = txt;
}
}
Calendar._add_evs(part);
return part;
};
var hrs = cal.date.getHours();
var mins = cal.date.getMinutes();
var t12 = !cal.time24;
var pm = (hrs > 12);
if (t12 && pm) hrs -= 12;
var H = makeTimePart("hour", hrs, t12 ? 1 : 0, t12 ? 12 : 23);
var span = Calendar.createElement("span", cell);
span.appendChild(document.createTextNode(":"));
span.className = "colon";
var M = makeTimePart("minute", mins, 0, 59);
var AP = null;
cell = Calendar.createElement("td", row);
cell.className = "time";
cell.colSpan = 2;
if (t12)
AP = makeTimePart("ampm", pm ? "pm" : "am", ["am", "pm"]);
else
cell.innerHTML = "&nbsp;";
cal.onSetTime = function() {
var hrs = this.date.getHours();
var mins = this.date.getMinutes();
var pm = (hrs > 12);
if (pm && t12) hrs -= 12;
H.firstChild.data = (hrs < 10) ? ("0" + hrs) : hrs;
M.firstChild.data = (mins < 10) ? ("0" + mins) : mins;
if (t12)
AP.firstChild.data = pm ? "pm" : "am";
};
cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.firstChild.data, 10);
if (t12) {
if (/pm/i.test(AP.firstChild.data) && h < 12)
h += 12;
else if (/am/i.test(AP.firstChild.data) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.firstChild.data, 10));
date.setFullYear(y);
date.setMonth(m);
date.setDate(d);
this.dateClicked = false;
this.callHandler();
};
})();
} else {
this.onSetTime = this.onUpdateTime = function() {};
}
var tfoot = Calendar.createElement("tfoot", table);
row = Calendar.createElement("tr", tfoot);
@ -738,9 +925,9 @@ Calendar.prototype.create = function (_par) {
div.className = "combo";
for (i = 0; i < Calendar._MN.length; ++i) {
var mn = Calendar.createElement("div");
mn.className = "label";
mn.className = Calendar.is_ie ? "label-IEfix" : "label";
mn.month = i;
mn.appendChild(document.createTextNode(Calendar._MN3[i]));
mn.appendChild(document.createTextNode(Calendar._SMN[i]));
div.appendChild(mn);
}
@ -749,7 +936,7 @@ Calendar.prototype.create = function (_par) {
div.className = "combo";
for (i = 12; i > 0; --i) {
var yr = Calendar.createElement("div");
yr.className = "label";
yr.className = Calendar.is_ie ? "label-IEfix" : "label";
yr.appendChild(document.createTextNode(""));
div.appendChild(yr);
}
@ -874,7 +1061,7 @@ Calendar.prototype._init = function (mondayFirst, date) {
}
var iday = 1;
var row = this.tbody.firstChild;
var MN = Calendar._MN3[month];
var MN = Calendar._SMN[month];
var hasToday = ((today.getFullYear() == year) && (today.getMonth() == month));
var todayDate = today.getDate();
var week_number = date.getWeekNumber();
@ -904,11 +1091,16 @@ Calendar.prototype._init = function (mondayFirst, date) {
}
cell.disabled = false;
cell.firstChild.data = iday;
if (typeof this.checkDisabled == "function") {
if (typeof this.getDateStatus == "function") {
date.setDate(iday);
if (this.checkDisabled(date)) {
var status = this.getDateStatus(date, year, month, iday);
if (status === true) {
cell.className += " disabled";
cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
}
}
if (!cell.disabled) {
@ -935,6 +1127,7 @@ Calendar.prototype._init = function (mondayFirst, date) {
}
this.ar_days = ar_days;
this.title.firstChild.data = Calendar._MN[month] + ", " + year;
this.onSetTime();
// PROFILE
// this.tooltips.firstChild.data = "Generated in " + ((new Date()) - today) + " ms";
};
@ -971,8 +1164,8 @@ Calendar.prototype.setMondayFirst = function (mondayFirst) {
* object) and returns a boolean value. If the returned value is true then
* the passed date will be marked as disabled.
*/
Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.checkDisabled = unaryFunction;
Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.getDateStatus = unaryFunction;
};
/** Customization of allowed year range for the calendar. */
@ -1001,6 +1194,7 @@ Calendar.prototype.destroy = function () {
var el = this.element.parentNode;
el.removeChild(this.element);
Calendar._C = null;
window.calendar = null;
};
/**
@ -1082,15 +1276,17 @@ Calendar.prototype.showAt = function (x, y) {
/** Shows the calendar near a given element. */
Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight);
return true;
}
this.show();
var w = this.element.offsetWidth;
var h = this.element.offsetHeight;
this.hide();
this.element.style.display = "block";
Calendar.continuation_for_the_fucking_khtml_browser = function() {
var w = self.element.offsetWidth;
var h = self.element.offsetHeight;
self.element.style.display = "none";
var valign = opts.substr(0, 1);
var halign = "l";
if (opts.length > 1) {
@ -1112,7 +1308,12 @@ Calendar.prototype.showAtElement = function (el, opts) {
case "r": p.x += el.offsetWidth - w; break;
case "l": break; // already there
}
this.showAt(p.x, p.y);
self.showAt(p.x, p.y);
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
};
/** Customizes the date format. */
@ -1137,30 +1338,42 @@ Calendar.prototype.parseDate = function (str, fmt) {
if (!fmt) {
fmt = this.dateFormat;
}
var b = fmt.split(/\W+/);
var b = [];
fmt.replace(/(%.)/g, function(str, par) {
return b[b.length] = par;
});
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (b[i] == "D" || b[i] == "DD") {
if (b[i] == "%a" || b[i] == "%A") {
continue;
}
if (b[i] == "d" || b[i] == "dd") {
if (b[i] == "%d" || b[i] == "%e") {
d = parseInt(a[i], 10);
}
if (b[i] == "m" || b[i] == "mm") {
if (b[i] == "%m") {
m = parseInt(a[i], 10) - 1;
}
if ((b[i] == "y") || (b[i] == "yy")) {
if (b[i] == "%Y" || b[i] == "%y") {
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
}
if (b[i] == "M" || b[i] == "MM") {
if (b[i] == "%b" || b[i] == "%B") {
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
} else if (/%[HIkl]/.test(b[i])) {
hr = parseInt(a[i], 10);
} else if (/%[pP]/.test(b[i])) {
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
} else if (b[i] == "%M") {
min = parseInt(a[i], 10);
}
}
if (y != 0 && m != -1 && d != 0) {
this.setDate(new Date(y, m, d));
this.setDate(new Date(y, m, d, hr, min, 0));
return;
}
y = 0; m = -1; d = 0;
@ -1190,28 +1403,32 @@ Calendar.prototype.parseDate = function (str, fmt) {
y = today.getFullYear();
}
if (m != -1 && d != 0) {
this.setDate(new Date(y, m, d));
this.setDate(new Date(y, m, d, hr, min, 0));
}
};
Calendar.prototype.hideShowCovered = function () {
function getStyleProp(obj, style){
var value = obj.style[style];
var self = this;
Calendar.continuation_for_the_fucking_khtml_browser = function() {
function getVisib(obj){
var value = obj.style.visibility;
if (!value) {
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
if (!Calendar.is_khtml)
value = document.defaultView.
getComputedStyle(obj, "").getPropertyValue(style);
getComputedStyle(obj, "").getPropertyValue("visibility");
else
value = '';
} else if (obj.currentStyle) { // IE
value = obj.currentStyle[style];
} else {
value = obj.style[style];
}
value = obj.currentStyle.visibility;
} else
value = '';
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = this.element;
var el = self.element;
var p = Calendar.getAbsolutePos(el);
var EX1 = p.x;
@ -1232,20 +1449,25 @@ Calendar.prototype.hideShowCovered = function () {
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
if (self.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getStyleProp(cc, "visibility");
cc.__msh_save_visibility = getVisib(cc);
}
cc.style.visibility = cc.__msh_save_visibility;
} else {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getStyleProp(cc, "visibility");
cc.__msh_save_visibility = getVisib(cc);
}
cc.style.visibility = "hidden";
}
}
}
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
};
/** Internal function; it displays the bar with the names of the weekday. */
Calendar.prototype._displayWeekdays = function () {
@ -1264,7 +1486,7 @@ Calendar.prototype._displayWeekdays = function () {
if (i == SUN || i == SAT) {
Calendar.addClass(cell, "weekend");
}
cell.firstChild.data = Calendar._DN3[i + 1 - MON];
cell.firstChild.data = Calendar._SDN[i + 1 - MON];
cell = cell.nextSibling;
}
};
@ -1325,14 +1547,22 @@ Date.prototype.getMonthDays = function(month) {
}
};
/** Returns the number of the week. The algorithm was "stolen" from PPK's
* website, hope it's correct :) http://www.xs4all.nl/~ppk/js/week.html */
/** Returns the number of day in the year. */
Date.prototype.getDayOfYear = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0);
var then = new Date(this.getFullYear(), 0, 1, 0, 0, 0);
var time = now - then;
return Math.floor(time / Date.DAY);
};
/** Returns the number of the week in year, as defined in ISO 8601. */
Date.prototype.getWeekNumber = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0);
var then = new Date(this.getFullYear(), 0, 1, 0, 0, 0);
var time = now - then;
var day = then.getDay();
(day > 3) && (day -= 4) || (day += 3);
var day = then.getDay(); // 0 means Sunday
if (day == 0) day = 7;
(day > 4) && (day -= 4) || (day += 3);
return Math.round(((time / Date.DAY) + day) / 7);
};
@ -1340,37 +1570,69 @@ Date.prototype.getWeekNumber = function() {
Date.prototype.equalsTo = function(date) {
return ((this.getFullYear() == date.getFullYear()) &&
(this.getMonth() == date.getMonth()) &&
(this.getDate() == date.getDate()));
(this.getDate() == date.getDate()) &&
(this.getHours() == date.getHours()) &&
(this.getMinutes() == date.getMinutes()));
};
/** Prints the date in a string according to the given format. */
Date.prototype.print = function (frm) {
var str = new String(frm);
Date.prototype.print = function (str) {
var m = this.getMonth();
var d = this.getDate();
var y = this.getFullYear();
var wn = this.getWeekNumber();
var w = this.getDay();
var s = new Array();
s["d"] = d;
s["dd"] = (d < 10) ? ("0" + d) : d;
s["m"] = 1+m;
s["mm"] = (m < 9) ? ("0" + (1+m)) : (1+m);
s["y"] = y;
s["yy"] = new String(y).substr(2, 2);
s["w"] = wn;
s["ww"] = (wn < 10) ? ("0" + wn) : wn;
with (Calendar) {
s["D"] = _DN3[w];
s["DD"] = _DN[w];
s["M"] = _MN3[m];
s["MM"] = _MN[m];
var s = {};
var hr = this.getHours();
var pm = (hr >= 12);
var ir = (pm) ? (hr - 12) : hr;
var dy = this.getDayOfYear();
if (ir == 0)
ir = 12;
var min = this.getMinutes();
var sec = this.getSeconds();
s["%a"] = Calendar._SDN[w]; // abbreviated weekday name [FIXME: I18N]
s["%A"] = Calendar._DN[w]; // full weekday name
s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["%B"] = Calendar._MN[m]; // full month name
// FIXME: %c : preferred date and time representation for the current locale
s["%C"] = 1 + Math.floor(y / 100); // the century number
s["%d"] = (d < 10) ? ("0" + d) : d; // the day of the month (range 01 to 31)
s["%e"] = d; // the day of the month (range 1 to 31)
// FIXME: %D : american date style: %m/%d/%y
// FIXME: %E, %F, %G, %g, %h (man strftime)
s["%H"] = (hr < 10) ? ("0" + hr) : hr; // hour, range 00 to 23 (24h format)
s["%I"] = (ir < 10) ? ("0" + ir) : ir; // hour, range 01 to 12 (12h format)
s["%j"] = (dy < 100) ? ((dy < 10) ? ("00" + dy) : ("0" + dy)) : dy; // day of the year (range 001 to 366)
s["%k"] = hr; // hour, range 0 to 23 (24h format)
s["%l"] = ir; // hour, range 1 to 12 (12h format)
s["%m"] = (m < 9) ? ("0" + (1+m)) : (1+m); // month, range 01 to 12
s["%M"] = (min < 10) ? ("0" + min) : min; // minute, range 00 to 59
s["%n"] = "\n"; // a newline character
s["%p"] = pm ? "PM" : "AM";
s["%P"] = pm ? "pm" : "am";
// FIXME: %r : the time in am/pm notation %I:%M:%S %p
// FIXME: %R : the time in 24-hour notation %H:%M
s["%s"] = Math.floor(this.getTime() / 1000);
s["%S"] = (sec < 10) ? ("0" + sec) : sec; // seconds, range 00 to 59
s["%t"] = "\t"; // a tab character
// FIXME: %T : the time in 24-hour notation (%H:%M:%S)
s["%U"] = s["%W"] = s["%V"] = (wn < 10) ? ("0" + wn) : wn;
s["%u"] = w + 1; // the day of the week (range 1 to 7, 1 = MON)
s["%w"] = w; // the day of the week (range 0 to 6, 0 = SUN)
// FIXME: %x : preferred date representation for the current locale without the time
// FIXME: %X : preferred time representation for the current locale without the date
s["%y"] = ('' + y).substr(2, 2); // year without the century (range 00 to 99)
s["%Y"] = y; // year with the century
s["%%"] = "%"; // a literal '%' character
var re = Date._msh_formatRegexp;
if (typeof re == "undefined") {
var tmp = "";
for (var i in s)
tmp += tmp ? ("|" + i) : i;
Date._msh_formatRegexp = re = new RegExp("(" + tmp + ")", 'g');
}
var re = /(.*)(\W|^)(d|dd|m|mm|y|yy|MM|M|DD|D|w|ww)(\W|$)(.*)/;
while (re.exec(str) != null) {
str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
}
return str;
return str.replace(re, function(match, par) { return s[par]; });
};
// END: DATE OBJECT PATCHES

File diff suppressed because one or more lines are too long

View File

@ -42,28 +42,25 @@ DHTML Calendar Widget
</p>
<p>
</p>
<p>
</p>
<h1 class=title align=center><br><br>DHTML Calendar Widget</h1>
<p></p>
<div align=center>
Mihai Bazon, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><p>July 9, 2003<br></p>
Mihai Bazon, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><p>November 5, 2003<br></p>
<p></p>
<p>
<span class=small>calendar version: 0.9.3<br>
document version: 0.1
</span>
<span class=small>calendar version: 0.9.5 &#8220;Your favorite time, bis&#8221;</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>
&#8220;Though a program be but three lines of code, someday it will have to be
maintained.&#8221;<br>
&#8212; <em>The Tao of Programming</em>
</td></tr></table></div>
</blockquote></span>
@ -100,19 +97,20 @@ maintained.&#8221;<br>
&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>
&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>
&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>
&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.show</tt></a><br>
&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.showAt</tt></a><br>
&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.showAtElement</tt></a><br>
&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.setDate</tt></a><br>
&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.setMondayFirst</tt></a><br>
&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.parseDate</tt></a><br>
&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.setRange</tt></a><br>
&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>
&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>
&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>
&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>
&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>
&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.setMondayFirst</tt></a><br>
&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>
&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>
</p>
<p><b>
&nbsp; &nbsp; <a name="node_toc_node_sec_5"></a><a href="#node_sec_5">5&nbsp;&nbsp;Side effects</a></b><br>
</p>
<p><b>
&nbsp; &nbsp; <a name="node_toc_node_sec_6"></a><a href="#node_sec_6">6&nbsp;&nbsp;Sponsors</a></b><br>
&nbsp; &nbsp; <a name="node_toc_node_sec_6"></a><a href="#node_sec_6">6&nbsp;&nbsp;Credits</a></b><br>
</p>
<p>
</p>
@ -121,7 +119,7 @@ maintained.&#8221;<br>
<a name="node_sec_1"></a>
<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>
is an (HTML) user interface element that gives end-users a friendly way to
input dates. It works in a web browser. The first versions only provided
select date and time. It works in a web browser. The first versions only provided
support for popup calendars, while starting with version 0.9 it also supports
&#8220;flat&#8221; display. A &#8220;flat&#8221; calendar is a calendar that stays visible in the
page all the time. In this mode it could be very useful for &#8220;blog&#8221; pages and
@ -129,16 +127,17 @@ other pages that require the calendar to be always present.</p>
<p>
The calendar is compatible with most popular browsers nowadays. While it&#8217;s
created using web standards and it should generally work with any compliant
browser, the following browsers were found to work: Mozilla (the main
browser, the following browsers were found to work: Mozilla (the
development platform), Netscape&nbsp;6.0 or better, all other Gecko-based browsers,
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>.</p>
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
same dysfunctions as in Opera).</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://students.infoiasi.ro/~mishoo/site/calendar.epl"><tt>http://students.infoiasi.ro/~mishoo/site/calendar.epl</tt></a>
<a href="http://dynarch.com/mishoo/calendar.epl"><tt>http://dynarch.com/mishoo/calendar.epl</tt></a>
</td></tr></table></div>
<p>
</p>
@ -148,7 +147,8 @@ refers to the combination of HTML, CSS, JavaScript and DOM. DOM (Document
Object Model) is a set of interfaces that glues the other three together. In
other words, DOM allows dynamic modification of an HTML page through a program.
JavaScript is our programming language, since that&#8217;s what browsers like. CSS
is a way to make it look good ;-).</p>
is a way to make it look good ;-). So all this soup is generically known as
DHTML.</p>
<p>
Using DOM calls, the program dynamically creates a <tt>&lt;table&gt;</tt> element
that contains a calendar for the given date and then inserts it in the document
@ -195,14 +195,13 @@ version 0.9.3 this is the recommended way to setup a calendar.</p>
<div align=center><table><tr><td>
&copy; Mihai Bazon, 2002 &#8211; 2003, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><br>
<a href="http://students.infoiasi.ro/~mishoo"><tt>http://students.infoiasi.ro/~mishoo</tt></a>
<a href="http://dynarch.com/mishoo/"><tt>http://dynarch.com/mishoo/</tt></a>
</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>. This basically means that you are allowed to use it for anything you
like, except selling it for profit or claiming it&#8217;s authorship. You can read
the entire license text <a href="http://www.gnu.org/licenses/lgpl.html">here</a>.</p>
<a href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a>. You
can <a href="http://www.gnu.org/licenses/lgpl.html">read the entire license text
here</a>.</p>
<p>
</p>
<a name="node_sec_2"></a>
@ -210,7 +209,9 @@ the entire license text <a href="http://www.gnu.org/licenses/lgpl.html">here</a>
<p>
Installing the calendar used to be quite a task until version 0.9.3. Starting
with 0.9.3 I have included the file <tt>calendar-setup.js</tt> whose goal is to
assist you to setup a popup or flat calendar within minutes.</p>
assist you to setup a popup or flat calendar in minutes. You are
encouraged to modify this file and <em>not</em> calendar.js if you need
extra customization, but you&#8217;re on your own.</p>
<p>
First you have to include the needed scripts and style-sheet. Make sure you do
this in your document&#8217;s <tt>&lt;head&gt;</tt> section, also make sure you put the
@ -344,11 +345,11 @@ warning message saying that there&#8217;s nothing to setup.</p>
</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 >&#8220;y/mm/dd&#8221;
</td><td valign=top >&#8220;%Y/%m/%d&#8221;
</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 >&#8220;y/mm/dd&#8221;
</td><td valign=top >&#8220;%Y/%m/%d&#8221;
</td></tr>
<tr><td valign=top ><tt>singleClick</tt>
</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.
@ -357,11 +358,28 @@ warning message saying that there&#8217;s nothing to setup.</p>
<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
&#8220;disabled&#8221; 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_4.3.8">4.3.8</a>.
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>mondayFirst</tt>
</td><td valign=top >boolean </td><td valign=top >If &#8220;true&#8221; then the calendar will display with Monday being the first day of week.
</td><td valign=top >false
</td><td valign=top >boolean </td><td valign=top >If <tt>true</tt> (default) then the calendar will display with
Monday being the first day of week. If <tt>false</tt> then Sunday will be
the first day of week. This has changed from default <tt>false</tt> to
default <tt>true</tt> because the ISO 8601 defines week as starting Monday
and this definition is used for computing the week number.
</td><td valign=top >true
</td></tr>
<tr><td valign=top ><tt>weekNumbers</tt>
</td><td valign=top >boolean </td><td valign=top >If &#8220;true&#8221; then the calendar will display week numbers.
@ -372,7 +390,7 @@ warning message saying that there&#8217;s nothing to setup.</p>
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_4.3.10">4.3.10</a>.
please section <a href="#node_sec_4.3.11">4.3.11</a>.
</td><td valign=top >&#8220;Bl&#8221;
</td></tr>
<tr><td valign=top ><tt>range</tt>
@ -382,7 +400,7 @@ please section <a href="#node_sec_4.3.10">4.3.10</a>.
<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.
<tt>null</tt> is the default value).
</td><td valign=top >null
</td></tr>
<tr><td valign=top ><tt>flatCallback</tt>
@ -391,6 +409,41 @@ 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 &#8220;click-on-date&#8221; 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&#8217;t need to provide one, but if you do it&#8217;s your responsibility to
hide/destroy the calendar. You&#8217;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 &#8220;12&#8221; or &#8220;24&#8221; to configure the way that the
calendar will display time.
</td><td valign=top >&#8220;24&#8221;
</td></tr></table>
@ -400,7 +453,7 @@ of how to setup a flat calendar.
<h1><a href="#node_toc_node_sec_3">3&nbsp;&nbsp;The Calendar object overview</a></h1><p></p>
<p>
Basically you should be able to setup the calendar with the function presented
in the last section. However, if for some reason <tt>Calendar.setup</tt>
in the previous section. However, if for some reason <tt>Calendar.setup</tt>
doesn&#8217;t provide all the functionality that you need and you want to tweak into
the process of creating and configuring the calendar &#8220;by hand&#8221;, then this
section is the way to go.</p>
@ -417,13 +470,18 @@ calendar, for instance:</p>
<p>
</p>
<pre class=verbatim>cal.weekNumbers = false; // do not display week numbers
cal.setDateFormat(&quot;y.mm.dd&quot;); // set this format: 2003.12.31
cal.setDisabledHandler(function(date) {
cal.showsTime = true; // include a time selector
cal.setDateFormat(&quot;%Y.%m.%d %H:%M&quot;); // set this format: 2003.12.31 23:59
cal.setDisabledHandler(function(date, year, month, day) {
// verify date and return true if it has to be disabled
if (date.getFullYear() == 2004) {
// ``date'' is a JS Date object, but if you only need the
// year, month and/or day you can get them separately as
// next 3 parameters, as you can see in the declaration
if (year == 2004) {
// disable all dates from 2004
return false;
return true;
}
return false;
});
</pre><p></p>
<p>
@ -437,7 +495,8 @@ that you provided.</p>
<a name="node_sec_3.1"></a>
<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
<tt>Calendar.setup</tt>, described in section <a href="#node_sec_2">2</a>, does the
same):</p>
same). While you can skip optional (marked &#8220;opt&#8221;) steps if you&#8217;re happy with
the defaults, please respect the order below.</p>
<p>
</p>
<ol><p>
@ -446,22 +505,31 @@ same):</p>
section <a href="#node_sec_4.1">4.1</a>.</p>
<p>
</p>
<li><p><b>optional</b>&nbsp;&nbsp; Set the <tt>weekNumbers</tt> property to <tt>false</tt> if you don&#8217;t want
the calendar to display week numbers. This step must take place <em>before</em>
calling <tt>Calendar.create</tt>.</p>
<li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>weekNumbers</tt> property to <tt>false</tt> if you don&#8217;t want
the calendar to display week numbers.</p>
<p>
</p>
<li><p><b>optional</b>&nbsp;&nbsp; Set the range of years available for selection (see section
<a href="#node_sec_4.3.14">4.3.14</a>). The default range is [1970..2050].</p>
<li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>showsTime</tt> property to <tt>true</tt> if you
want the calendar to also provide a time selector.</p>
<p>
</p>
<li><p><b>optional</b>&nbsp;&nbsp; Set the <tt>disabledHandler</tt> property. You should pass
<li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>time24</tt> property to <tt>false</tt> if you want
the time selector to be in 12-hour format. Default is 24-hour format. This
property only has effect if you also set <tt>showsTime</tt> to
<tt>true</tt>.</p>
<p>
</p>
<li><p><b>opt</b>&nbsp;&nbsp; Set the range of years available for selection (see section
<a href="#node_sec_4.3.15">4.3.15</a>). The default range is [1970..2050].</p>
<p>
</p>
<li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>getDateStatus</tt> property. You should pass
here a function that receives a JavaScript <tt>Date</tt> object and returns
<tt>true</tt> if the given date should be disabled, false otherwise (details in
section <a href="#node_sec_4.3.7">4.3.7</a>).</p>
<p>
</p>
<li><p><b>optional</b>&nbsp;&nbsp; Set a date format. Your handler function, passed to the
<li><p><b>opt</b>&nbsp;&nbsp; Set a date format. Your handler function, passed to the
calendar constructor, will be called when a date is selected with a reference
to the calendar and a date string in this format.</p>
<p>
@ -472,11 +540,11 @@ practically puts the calendar in your HTML page. You simply call
create a flat calendar (details in section <a href="#node_sec_4.3.1">4.3.1</a>).</p>
<p>
</p>
<li><p><b>optional</b>&nbsp;&nbsp; Initialize the calendar to a certain date, for instance from
<li><p><b>opt</b>&nbsp;&nbsp; Initialize the calendar to a certain date, for instance from
the input field.</p>
<p>
</p>
<li><p>Show the calendar (details in section <a href="#node_sec_4.3.8">4.3.8</a>).</p>
<li><p>Show the calendar (details in section <a href="#node_sec_4.3.9">4.3.9</a>).</p>
<p>
</p>
</ol><p></p>
@ -549,6 +617,13 @@ Calendar object. When the end-user closes the calendar, our code will only
call &#8220;<tt>hide</tt>&#8221; on it, therefore keeping the JavaScript object and the
HTML elements in place.</p>
<p>
<font color="red">CAVEAT:</font> &nbsp;&nbsp;&nbsp;&nbsp;Since time selection support was introduced, this
&#8220;object caching&#8221; mechanism has the following drawback: if you once created
the calendar with the time selection support, then other items that may not
require this functionality will still get a calendar with the time selection
support enabled. And reciprocal. ;-) Hopefully this will be corrected in a
later version, but for now it doesn&#8217;t seem such a big problem.</p>
<p>
</p>
<a name="node_sec_3.4"></a>
<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?
@ -577,10 +652,14 @@ user&#8217;s responsibility to close the calendar. Details in section
<a href="#node_sec_4.1">4.1</a>.</p>
<p>
</p>
<li><p><b>disabledHandler</b>&nbsp;&nbsp; &#8212; this function gets called for any day in a month,
<li><p><b>getDateStatus</b>&nbsp;&nbsp; &#8212; this function gets called for any day in a month,
just before displaying the month. It is called with a JavaScript <tt>Date</tt>
object and should return <tt>true</tt> if that date should be disabled
or false otherwise. Details in section <a href="#node_sec_4.3.7">4.3.7</a>.</p>
object and should return <tt>true</tt> if that date should be disabled, false
if it&#8217;s an ordinary date and no action should be taken, or it can return a
string in which case the returned value will be appended to the element&#8217;s CSS
class (this way it provides a powerful way to make some dates &#8220;special&#8221;,
i.e. highlight them differently). Details in section
<a href="#node_sec_4.3.8">4.3.8</a>.</p>
<p>
</p>
</ul><p></p>
@ -704,6 +783,14 @@ displays week numbers. If you don&#8217;t want week numbers you have to set thi
variable to <tt>false</tt> <em>before</em> calling <tt>Calendar.create</tt>.</p>
<p>
</p>
<li><p><tt>showsTime</tt> &#8211; if you set this to <tt>true</tt> (it is
<tt>false</tt> by default) then the calendar will also include a time selector.</p>
<p>
</p>
<li><p><tt>time24</tt> &#8211; if you set this to <tt>false</tt> then the time
selector will be in 12-hour format. It is in 24-hour format by default.</p>
<p>
</p>
<li><p><tt>mondayFirst</tt> &#8212; if <tt>true</tt> then the calendar uses Monday
as first day of week, otherwise Sunday. This variable is set from constructor,
but you still have a chance to modify it <em>before</em> calling
@ -777,7 +864,7 @@ This function configures the format in which the calendar reports the date to
your &#8220;onSelect&#8221; handler. Call it like this:</p>
<p>
</p>
<pre class=verbatim>calendar.setDateFormat(&quot;y/mm/dd&quot;);
<pre class=verbatim>calendar.setDateFormat(&quot;%y/%m/%d&quot;);
</pre><p></p>
<p>
As you can see, it receives only one parameter, the required format. The magic
@ -785,27 +872,38 @@ characters are the following:</p>
<p>
</p>
<table border=0><tr><td valign=top ></td></tr>
<tr><td valign=top >d </td><td valign=top >the date ( ex: 1 .. 31 ) </td></tr>
<tr><td valign=top >dd </td><td valign=top >the date, zero padded ( ex: 01 .. 31 ) </td></tr>
<tr><td valign=top >m </td><td valign=top >month as a number ( ex: 1 .. 12 ) </td></tr>
<tr><td valign=top >mm </td><td valign=top >month, zero padded ( ex: 01 .. 12 ) </td></tr>
<tr><td valign=top >y </td><td valign=top >4 digit year ( ex: 1979 ) </td></tr>
<tr><td valign=top >yy </td><td valign=top >2 digit year, yy - 1900 ( ex: 79 ) (USING THIS IS NOT RECOMMENDED) </td></tr>
<tr><td valign=top >w </td><td valign=top >the number of the week in the year (1 or 2 digits) </td></tr>
<tr><td valign=top >ww </td><td valign=top >the number of the week, zero padded (2 digits) </td></tr>
<tr><td valign=top >D </td><td valign=top >short weekday name ( ex: Sun, Wed, Fri ) </td></tr>
<tr><td valign=top >DD </td><td valign=top >long weekday name ( ex: Sunday, Wednesday, Friday ) </td></tr>
<tr><td valign=top >M </td><td valign=top >short month name ( ex: Mar, Jan, Oct ) </td></tr>
<tr><td valign=top >MM </td><td valign=top >long month name ( ex: March, January, October )</td></tr>
<tr><td valign=top ></td></tr>
<tr><td valign=top ></td></tr></table><p>
<font color="red"><b>WARNING!</b></font>&nbsp;&nbsp;&nbsp;&nbsp;The format specifiers are likely to change.
The current is a complete mess, in that that, for instance, you can&#8217;t have a
format like this: &#8220;ymmdd&#8221;&#8212;you have to separate them through non-word
characters, like for example &#8220;y-mm-dd&#8221;. In next versions of calendar the
format will probably use a &#8220;%&#8221; prefix, like in <tt>strftime</tt> from
ANSI-C, so the format above will be possible to write like this:
&#8220;%y%mm%dd&#8221;.</p>
<tr><td valign=top ><tt>%a</tt> </td><td valign=top >abbreviated weekday name </td></tr>
<tr><td valign=top ><tt>%A</tt> </td><td valign=top >full weekday name </td></tr>
<tr><td valign=top ><tt>%b</tt> </td><td valign=top >abbreviated month name </td></tr>
<tr><td valign=top ><tt>%B</tt> </td><td valign=top >full month name </td></tr>
<tr><td valign=top ><tt>%C</tt> </td><td valign=top >century number </td></tr>
<tr><td valign=top ><tt>%d</tt> </td><td valign=top >the day of the month ( 00 .. 31 ) </td></tr>
<tr><td valign=top ><tt>%e</tt> </td><td valign=top >the day of the month ( 0 .. 31 ) </td></tr>
<tr><td valign=top ><tt>%H</tt> </td><td valign=top >hour ( 00 .. 23 ) </td></tr>
<tr><td valign=top ><tt>%I</tt> </td><td valign=top >hour ( 01 .. 12 ) </td></tr>
<tr><td valign=top ><tt>%j</tt> </td><td valign=top >day of the year ( 000 .. 366 ) </td></tr>
<tr><td valign=top ><tt>%k</tt> </td><td valign=top >hour ( 0 .. 23 ) </td></tr>
<tr><td valign=top ><tt>%l</tt> </td><td valign=top >hour ( 1 .. 12 ) </td></tr>
<tr><td valign=top ><tt>%m</tt> </td><td valign=top >month ( 01 .. 12 ) </td></tr>
<tr><td valign=top ><tt>%M</tt> </td><td valign=top >minute ( 00 .. 59 ) </td></tr>
<tr><td valign=top ><tt>%n</tt> </td><td valign=top >a newline character </td></tr>
<tr><td valign=top ><tt>%p</tt> </td><td valign=top >&#8220;PM&#8221; or &#8220;AM&#8221; </td></tr>
<tr><td valign=top ><tt>%P</tt> </td><td valign=top >&#8220;pm&#8221; or &#8220;am&#8221; </td></tr>
<tr><td valign=top ><tt>%S</tt> </td><td valign=top >second ( 00 .. 59 ) </td></tr>
<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>
<tr><td valign=top ><tt>%t</tt> </td><td valign=top >a tab character </td></tr>
<tr><td valign=top ><tt>%U, %W, %V</tt> </td><td valign=top >the week number</td></tr>
<tr><td valign=top ><tt>%u</tt> </td><td valign=top >the day of the week ( 1 .. 7, 1 = MON )</td></tr>
<tr><td valign=top ><tt>%w</tt> </td><td valign=top >the day of the week ( 0 .. 6, 0 = SUN )</td></tr>
<tr><td valign=top ><tt>%y</tt> </td><td valign=top >year without the century ( 00 .. 99 )</td></tr>
<tr><td valign=top ><tt>%Y</tt> </td><td valign=top >year including the century ( ex. 1979 )</td></tr>
<tr><td valign=top ><tt>%%</tt> </td><td valign=top >a literal <tt>%</tt> character
</td></tr></table><p>
There are more algorithms for computing the week number. All
three specifiers currently implement the same one, as defined by ISO 8601:
&#8220;the week 01 is the week that has the Thursday in the current year, which is
equivalent to the week that contains the fourth day of January. Weeks start on
Monday.</p>
<p>
</p>
<a name="node_sec_4.3.6"></a>
@ -849,9 +947,74 @@ that it&#8217;s still good, but in the future I might switch it to a different d
(for instance, to call it once per month and to return an array of dates that
must be disabled).</p>
<p>
This function should be considered deprecated in the favor of
<tt>Calendar.setDateStatusHandler</tt>, described below.</p>
<p>
</p>
<a name="node_sec_4.3.8"></a>
<h3><a href="#node_toc_node_sec_4.3.8">4.3.8&nbsp;&nbsp;<tt>Calendar.show</tt></a></h3><p></p>
<h3><a href="#node_toc_node_sec_4.3.8">4.3.8&nbsp;&nbsp;<tt>Calendar.setDateStatusHandler</tt></a></h3><p></p>
<p>
This function obsoletes <tt>Calendar.setDisabledHandler</tt>. You call it with
a function parameter, but this function can return a boolean
<em>or a string</em>. If the return value is a boolean (<tt>true</tt> or
<tt>false</tt>) then it behaves just like <tt>setDisabledHandler</tt>,
therefore disabling the date if the return value is <tt>true</tt>.</p>
<p>
If the returned value is a string then the given date will gain an additional
CSS class, namely the returned value. You can use this to highlight some dates
in some way. Note that you are responsible for defining the CSS class that you
return. If you return the string &#8220;disabled&#8221; then that date will be disabled,
just as if you returned <tt>true</tt>.</p>
<p>
Here is a simple scenario that shows what you can do with this function. The
following should be present in some of your styles, or in the document head in
a STYLE tag (but put it <em>after</em> the place where the calendar styles were
loaded):</p>
<p>
</p>
<pre class=verbatim>.special { background-color: #000; color: #fff; }
</pre><p></p>
<p>
And you would use the following code before calling <tt>Calendar.create()</tt>:</p>
<p>
</p>
<pre class=verbatim>// this table holds your special days, so that we can automatize
// things a bit:
var SPECIAL_DAYS = {
0 : [ 13, 24 ], // special days in January
2 : [ 1, 6, 8, 12, 18 ], // special days in March
8 : [ 21, 11 ], // special days in September
11 : [ 25, 28 ] // special days in December
};
// this function returns true if the passed date is special
function dateIsSpecial(year, month, day) {
var m = SPECIAL_DAYS[month];
if (!m) return false;
for (var i in m) if (m[i] == day) return true;
return false;
}
// this is the actual date status handler. Note that it receives the
// date object as well as separate values of year, month and date, for
// your confort.
function dateStatusHandler(date, y, m, d) {
if (dateIsSpecial(y, m, d)) return ``special'';
else return false;
// return true above if you want to disable other dates
}
// configure it to the calendar
calendar.setDateStatusHandler(dateStatusHandler);
</pre><p></p>
<p>
The above code adds the &#8220;special&#8221; class name to some dates that are defined
in the SPECIAL_DAYS table. Other dates will simply be displayed as default,
enabled.</p>
<p>
</p>
<a name="node_sec_4.3.9"></a>
<h3><a href="#node_toc_node_sec_4.3.9">4.3.9&nbsp;&nbsp;<tt>Calendar.show</tt></a></h3><p></p>
<p>
Call this function do show the calendar. It basically sets the CSS &#8220;display&#8221;
property to &#8220;block&#8221;. It doesn&#8217;t modify the calendar position.</p>
@ -859,8 +1022,8 @@ property to &#8220;block&#8221;. It doesn&#8217;t modify the calendar position.
This function only makes sense when the calendar is in popup mode.</p>
<p>
</p>
<a name="node_sec_4.3.9"></a>
<h3><a href="#node_toc_node_sec_4.3.9">4.3.9&nbsp;&nbsp;<tt>Calendar.showAt</tt></a></h3><p></p>
<a name="node_sec_4.3.10"></a>
<h3><a href="#node_toc_node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAt</tt></a></h3><p></p>
<p>
Call this to show the calendar at a certain (x, y) position. Prototype:</p>
<p>
@ -876,8 +1039,8 @@ After setting the given coordinates it calls Calendar.show. This function only
makes sense when the calendar is in popup mode.</p>
<p>
</p>
<a name="node_sec_4.3.10"></a>
<h3><a href="#node_toc_node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a></h3><p></p>
<a name="node_sec_4.3.11"></a>
<h3><a href="#node_toc_node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a></h3><p></p>
<p>
This function is useful if you want to display the calendar near some element.
You call it like this:</p>
@ -967,8 +1130,8 @@ calendar aligned to the right margin of the element).</p>
0.9.3) which did not support custom alignment.</p>
<p>
</p>
<a name="node_sec_4.3.11"></a>
<h3><a href="#node_toc_node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.setDate</tt></a></h3><p></p>
<a name="node_sec_4.3.12"></a>
<h3><a href="#node_toc_node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setDate</tt></a></h3><p></p>
<p>
Receives a JavaScript <tt>Date</tt> object. Sets the given date in the
calendar. If the calendar is visible the new date is displayed immediately.</p>
@ -978,8 +1141,8 @@ calendar. If the calendar is visible the new date is displayed immediately.</p>
</pre><p></p>
<p>
</p>
<a name="node_sec_4.3.12"></a>
<h3><a href="#node_toc_node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setMondayFirst</tt></a></h3><p></p>
<a name="node_sec_4.3.13"></a>
<h3><a href="#node_toc_node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.setMondayFirst</tt></a></h3><p></p>
<p>
Changes the first day of week. If the parameter is <tt>true</tt> then Monday
will be the first day of week, otherwise Sunday.</p>
@ -989,8 +1152,8 @@ will be the first day of week, otherwise Sunday.</p>
</pre><p></p>
<p>
</p>
<a name="node_sec_4.3.13"></a>
<h3><a href="#node_toc_node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a></h3><p></p>
<a name="node_sec_4.3.14"></a>
<h3><a href="#node_toc_node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a></h3><p></p>
<p>
Use this function to parse a date given as string and to move the calendar to
that date.</p>
@ -1004,8 +1167,8 @@ tries to get some valid date out of it (it doesn&#8217;t read your thoughts, tho
</pre><p></p>
<p>
</p>
<a name="node_sec_4.3.14"></a>
<h3><a href="#node_toc_node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.setRange</tt></a></h3><p></p>
<a name="node_sec_4.3.15"></a>
<h3><a href="#node_toc_node_sec_4.3.15">4.3.15&nbsp;&nbsp;<tt>Calendar.setRange</tt></a></h3><p></p>
<p>
Sets the range of years that are allowed in the calendar. Synopsis:</p>
<p>
@ -1075,15 +1238,18 @@ specified in section <a href="#node_sec_4.3.5">4.3.5</a>.</p>
<p>
</p>
<a name="node_sec_6"></a>
<h1><a href="#node_toc_node_sec_6">6&nbsp;&nbsp;Sponsors</a></h1><p>The following people either sponsored, donated money to the project or bought
developer licenses (listed in reverse chronological order). Your name could be here
too! If you wish to sponsor the project (for instance request a feature and
pay me for implementing it) or donate some money please
<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
commercial licenses (listed in reverse chronological order). Your name could
be here too! If you wish to sponsor the project (for instance request a
feature and pay me for implementing it) or donate some money please
<em>please</em> contact me at <tt><a href="mailto:mishoo@infoiasi.ro">mishoo@infoiasi.ro</a></tt>.</p>
<p>
</p>
<ul><p>
</p>
<li><p>Himanshukumar Shah</p>
<p>
</p>
<li><p>Seyhan Ersoy (<a href="http://www.oocgi.com">http://www.oocgi.com</a>)</p>
<p>
</p>
@ -1117,7 +1283,7 @@ in other supported browsers. </p>
<p><a name="footnote_Temp_5"></a><a href="#call_footnote_Temp_5"><sup><small>4</small></sup></a> user interface</p>
</div>
<div align=right class=colophon>
<i>Last modified: Mon, July 7, 2003, 5:18 pm<br>
<i>Last modified: Wed, Nov 5, 2003, 7:30 pm<br>
HTML conversion by <a href="http://www.ccs.neu.edu/~dorai/tex2page/tex2page-doc.html">TeX2page 4r8f</a></i>
</div>
</body>

View File

@ -1,13 +1,10 @@
<!--
<?xml version="1.0" encoding="iso-8859-2"?>
< ! DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<!-- $Id$ -->
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<!-- $Id$ -->
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>The Coolest DHTML Calendar - Online Demo</title>
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue.css" title="winter" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-brown.css" title="summer" />
@ -18,20 +15,12 @@
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-2.css" title="win2k-cold-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-system.css" title="system" />
<!-- for ro -->
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-2" />
<!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script>
<!-- import the language module -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- <script type="text/javascript" src="lang/calendar-ro.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-da.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-it.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-fr.js"></script> -->
<!-- other languages might be available in the lang directory; please check
your distribution archive. -->
@ -69,21 +58,27 @@ function selected(cal, date) {
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
cal.destroy();
calendar = null;
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format) {
function showCalendar(id, format, showsTime) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(false, null, selected, closeHandler);
var cal = new Calendar(true, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
@ -129,14 +124,14 @@ function showFlatCalendar() {
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(false, null, flatSelected);
var cal = new Calendar(true, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
cal.setDateFormat("%A, %B %e");
// this call must be the last as it might use data initialized above; if
// we specify a parent, as opposite to the "showCalendar" function above,
@ -151,7 +146,8 @@ function showFlatCalendar() {
<style type="text/css">
.ex { font-weight: bold; background: #fed; color: #080 }
.help { color: #080; font-style: italic; }
body { background: #fea; }
body { background: #fea; font: 10pt tahoma,verdana,sans-serif; }
table { font: 13px verdana,tahoma,sans-serif; }
a { color: #00f; }
a:visited { color: #00f; }
a:hover { color: #f00; background: #fefaf0; }
@ -163,16 +159,19 @@ padding: 0px 5px; cursor: default; font-size: 80%; }
</head>
<body onload="showFlatCalendar()">
<h2>The coolest DHTML calendar, v. 0.9.3 "It's still alife"</h2>
<h2><a href="http://dynarch.com/mishoo/calendar.epl"
title="Visit the project website">jscalendar</a>-0.9.5
"Your favorite time, bis"</h2>
<p>Theme
[
<p>
<div style="float: right; border: 1px solid #b87; padding: 2px; font-size: 90%; background: #ffb;">
Theme:<br />
<a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
|
<br />
<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
@ -180,74 +179,35 @@ padding: 0px 5px; cursor: default; font-size: 80%; }
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-1');">win2k-cold-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
|
<br />
<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
<script type="text/javascript">
setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1");
</script>
]
</div>
<a href="release-notes.html">Release notes</a>.
<br />
<a href="release-notes.html">Release notes for 0.9.3</a>
<br />
Setup a calendar in minutes:
Set it up in minutes:
<a href="simple-1.html">popup calendar</a>,
<a href="simple-2.html">flat calendar</a>.
<br />
Documentation:
<a href="doc/html/reference.html">HTML</a>,
<a href="doc/reference.pdf">PDF</a>
<a href="doc/reference.pdf">PDF</a>.
<br />
<b style="color: red">Donate! Keep me on it! Details on <a href="http://dynarch.com/mishoo/calendar.epl">the Calendar website</a>.</b>
</p>
<div style="
float: right;
padding: 5px;
margin: 5px;
border: 1px solid #984;
background: #ed9;
">
<div style="background: #984; color: #fea;
font-weight: bold; padding: 2px; text-align: center">
Flat calendar
</div>
<p style="width: 12em"><small>A non-popup version will appear below as soon
as the page is loaded. Note that it doesn't show the week number.</small></p>
<!-- the calendar will be inserted here -->
<div id="display"></div>
<div id="preview" style="font-size: 80%; text-align: center; padding: 2px"></div>
<p style="width: 12em"><small>
The example above uses the <code>setDisabledHandler()</code> member function
to setup a handler that would only enable days withing a range of 10 days,
forward or backward, from the current date.
</small></p>
</div>
<div style="padding-left:20px; font-size: 90%; font-style: italic;">
<p><span style="color: red">Easy I18N</span>: all messages are separate JS
files (see <a href="lang/calendar-en.js">calendar-en.js</a> for an example).
Check the lang directory in your distribution archive to see what languages
are available. You just need to include the right one from the HTML
page.</p>
<p><span style="color: red">NOTE:</span> I made the English and Romanian
versions only. The other lang files were submitted by people. I thank them
very much, and you should too! :) Unfortunately, I lost track of these files
and the persons who sent them, so if you send me a translation file please
include a small comment with your name and email address, as you are the
author. Also, a statement that the file is distributed under the GNU LGPL
would be welcome :)</p>
</div>
<table style="width: 100%">
<tr valign="top">
<td style="background: #ffa; padding: 5px; border: 1px solid #995;">
<form action="#">
<div style="background: #ffa; padding: 5px; border: 1px solid #995;">
<div style="background: #995; color: #ffa;
font-weight: bold; padding: 2px;">
<div style="background: #995; color: #ffa; font-weight: bold; padding: 2px;">
Popup examples
</div>
@ -255,12 +215,12 @@ Popup examples
<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel1', 'y-m-d [ww]');"> [<b>y-m-d [ww]</b>] -- single
onclick="return showCalendar('sel1', '%Y-%m-%d [%W] %H:%M', '24');"> %Y-%m-%d [%W] %H:%M -- single
click<br />
<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel2', 'DD, MM d, y');"> [<b>DD, MM d, y</b>]
onclick="return showCalendar('sel2', '%a, %b %e, %Y [%I:%M%p]', '12');"> %a, %b %e, %Y [%I:%M%p]
-- double click
<br /><br />
@ -282,24 +242,19 @@ this select should hide when the calendar is above it.
<b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel3', 'dd/mm/y');"> [<b>dd/mm/y</b>]
onclick="return showCalendar('sel3', '%d/%m/%Y');"> %d/%m/%Y
-- single click
<br />
<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel4', 'D, M d, y');"> [<b>D, M d, y</b>] --
onclick="return showCalendar('sel4', '%A, %B %e, %Y');"> %A, %B %e, %Y --
double click
</div>
</form>
<p>You can find more information about this script (and how to use/customize
it) <a href="http://students.infoiasi.ro/~mishoo/site/calendar.epl">on my
page</a>.</p>
<p>This is release <b>0.9.3</b>. Works on MSIE 5.0, 5.5, 6.0, Opera 7,
Mozilla, Netscape 6.x, 7.0 and all other Gecko-s.</p>
<p>This is release <b>0.9.5</b>. Works on MSIE/Win 5.0 or better, Opera 7,
Mozilla, Netscape 6.x, 7.0 and all other Gecko-s, Konqueror and Safari.</p>
<p class="help">You can click on "Mo"/"Su" (first day name displayed) to
change the first day of week (Sunday/Monday) (since 0.8 this is also mapped
@ -314,7 +269,7 @@ currently selected month/year shows up) to move the whole calendar.</p>
<p>Starting with version 0.9.2, you can also use the keyboard to select
dates (only for popup calendars; does <em>not</em> work with Opera
7). The following keys are available:</p>
7 or Konqueror/Safari). The following keys are available:</p>
<ul>
@ -330,49 +285,39 @@ dates (only for popup calendars; does <em>not</em> work with Opera
</ul>
<h4>Date formatting</h4>
<small>
<ul>
<li><b>d</b> -- the date ( ex: <span class="ex">1 .. 31</span> )
<li><b>dd</b> -- the date, zero padded ( ex: <span class="ex">01 .. 31</span> )
<li><b>m</b> -- month as a number ( ex: <span class="ex">1 .. 12</span> )
<li><b>mm</b> -- month, zero padded ( ex: <span class="ex">01 .. 12</span> )
<li><b>y</b> -- 4 digit year ( ex: <span class="ex">1979</span> )
<li><b>yy</b> -- 2 digit year, <bb>yy</bb> - 1900 ( ex: <span class="ex">79</span> ) (USING THIS IS NOT RECOMMENDED)
<li><b>w</b> -- the number of the week in the year (1 or 2 digits)
<li><b>ww</b> -- the number of the week, zero padded (2 digits)
<li><b>D</b> -- short weekday name ( ex: <span class="ex">Sun, Wed, Fri</span> )
<li><b>DD</b> -- long weekday name ( ex: <span class="ex">Sunday, Wednesday, Friday</span> )
<li><b>M</b> -- short month name ( ex: <span class="ex">Mar, Jan, Oct</span> )
<li><b>MM</b> -- long month name ( ex: <span class="ex">March, January, October</span> )
</ul>
</small>
<h4>Date parsing</h4>
</td>
<p>The algorithm will first try to read the date in the specified
format.</p>
<td style="padding: 5px; margin: 5px; border: 1px solid #984; background: #ed9; width: 15em;">
<p>If it doesn't work, it will try different methods to recognize a valid
date -- general behavior is: if some part of the input is the <em>name</em>
of a month, i.e. "Mar", then that will be considered the month, the
next/previous 1 .. 31 number will be considered the date and the next big
number (hopefully there) will be the year; if it's missing we assume the
current year. If no such name exists, then the first 1 .. 12 number will be
taken as the month, the next 1 .. 31 as the date; year selection is the same
as discussed.</p>
<div style="background: #984; color: #fea; font-weight: bold; padding: 2px; text-align: center">
Flat calendar
</div>
<p>Examples: <span class="ex">3/8/1979</span> as well as <span class="ex">03
08 79</span> as well as <span class="ex">1979 mar 8</span>, as well as <span
class="ex">79+3+8</span> will all lead to the same date: my birthday (March
8, 1979). To try the algo, just input the date using whatever format you
like in one of the fields above and click on the "..." button. The calendar
that shows up should contain your date, otherwise you and this algorithm
don't get too well together :)</p>
<p style="width: 12em"><small>A non-popup version will appear below as soon
as the page is loaded. Note that it doesn't show the week number.</small></p>
<hr /><address> Author: <a href="http://students.infoiasi.ro/~mishoo/">Mihai
Bazon</a> &copy; 2002<br /> Feel free to use / redistribute under the <a
href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.<br /> Please no
<b>not</b> remove or alter the comment at the script start.</address>
<!-- the calendar will be inserted here -->
<div id="display" style="float: right; clear: both;"></div>
<div id="preview" style="font-size: 80%; text-align: center; padding: 2px"></div>
<p style="width: 12em"><small>
The example above uses the <code>setDisabledHandler()</code> member function
to setup a handler that would only enable days withing a range of 10 days,
forward or backward, from the current date.
</small></p>
</div>
</td>
</tr>
</table>
<hr /><address>
&copy; <a href="http://dynarch.com">dynarch.com</a> 2002-2003 <br />
Author: <a href="http://dynarch.com/mishoo/">Mihai
Bazon</a><br /> Distributed under the <a
href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.</address>
<p style="font-size: smaller">If you use this script on a public page it
would be nice if you would <a href="mailto:mishoo@infoiasi.ro">let me

View File

@ -0,0 +1,39 @@
// ** I18N Afrikaans
Calendar._DN = new Array
("Sondag",
"Maandag",
"Dinsdag",
"Woensdag",
"Donderdag",
"Vrydag",
"Saterdag",
"Sondag");
Calendar._MN = new Array
("Januarie",
"Februarie",
"Maart",
"April",
"Mei",
"Junie",
"Julie",
"Augustus",
"September",
"Oktober",
"November",
"Desember");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Verander eerste dag van die week";
Calendar._TT["PREV_YEAR"] = "Vorige jaar (hou vir keuselys)";
Calendar._TT["PREV_MONTH"] = "Vorige maand (hou vir keuselys)";
Calendar._TT["GO_TODAY"] = "Gaan na vandag";
Calendar._TT["NEXT_MONTH"] = "Volgende maand (hou vir keuselys)";
Calendar._TT["NEXT_YEAR"] = "Volgende jaar (hou vir keuselys)";
Calendar._TT["SEL_DATE"] = "Kies datum";
Calendar._TT["DRAG_TO_MOVE"] = "Sleep om te skuif";
Calendar._TT["PART_TODAY"] = " (vandag)";
Calendar._TT["MON_FIRST"] = "Vertoon Maandag eerste";
Calendar._TT["SUN_FIRST"] = "Display Sunday first";
Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";

View File

@ -0,0 +1,100 @@
// Author: Hartwig Weinkauf h_weinkauf@gmx.de
// Überarbeitet und fehlende Texte hinzugefügt von Gerhard Neinert (gerhard at neinert punkt de)
// Feel free to use / redistribute under the GNU LGPL.
// ** I18N
// short day names
Calendar._SDN = new Array
("So",
"Mo",
"Di",
"Mi",
"Do",
"Fr",
"Sa",
"So");
// full day names
Calendar._DN = new Array
("Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
"Sonntag");
// short day names only use 2 letters instead of 3
Calendar._SDN_len = 2;
// full month names
Calendar._MN = new Array
("Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember");
// short month names
Calendar._SMN = new Array
("Jan",
"Feb",
"Mär",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez");
// tooltips
Calendar._TT = {};
Calendar._TT["ABOUT"] =
"DHTML Datum/Zeit Selector\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"Donwload neueste Version: http://dynarch.com/mishoo/calendar.epl\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Datumsauswahl:\n" +
"- Jahr auswählen mit \xab und \xbb\n" +
"- Monat auswählen mit " + String.fromCharCode(0x2039) + " und " + String.fromCharCode(0x203a) + "\n" +
"- Für Auswahl aus Liste Maustaste gedrückt halten.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Zeit wählen:\n" +
"- Stunde/Minute weiter mit Mausklick\n" +
"- Stunde/Minute zurück mit Shift-Mausklick\n" +
"- oder für schnellere Auswahl nach links oder rechts ziehen.";
Calendar._TT["TOGGLE"] = "Ersten Tag der Woche waehlen";
Calendar._TT["PREV_YEAR"] = "Jahr zurück (halten -> Auswahlmenue)";
Calendar._TT["PREV_MONTH"] = "Monat zurück (halten -> Auswahlmenue)";
Calendar._TT["GO_TODAY"] = "Gehe zum heutigen Datum";
Calendar._TT["NEXT_MONTH"] = "Monat vor (halten -> Auswahlmenue)";
Calendar._TT["NEXT_YEAR"] = "Jahr vor (halten -> Auswahlmenue)";
Calendar._TT["SEL_DATE"] = "Datum auswaehlen";
Calendar._TT["DRAG_TO_MOVE"] = "Klicken und halten um zu verschieben";
Calendar._TT["PART_TODAY"] = " (heute)";
Calendar._TT["MON_FIRST"] = "Wochenanzeige mit Montag beginnen";
Calendar._TT["SUN_FIRST"] = "Wochenanzeige mit Sonntag beginnen";
Calendar._TT["CLOSE"] = "Schliessen";
Calendar._TT["TODAY"] = "Heute";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "dd-mm-y";
Calendar._TT["TT_DATE_FORMAT"] = "Datum auswählen";
Calendar._TT["WK"] = "KW";

View File

@ -1,4 +1,15 @@
// ** I18N
// Calendar EN language
// Author: Mihai Bazon, <mishoo@infoiasi.ro>
// Encoding: any
// Distributed under the same terms as the calendar itself.
// For translators: please use UTF-8 if possible. We strongly believe that
// Unicode is the answer to a real internationalized world. Also please
// include your contact information in the header, as can be seen above.
// full day names
Calendar._DN = new Array
("Sunday",
"Monday",
@ -8,6 +19,31 @@ Calendar._DN = new Array
"Friday",
"Saturday",
"Sunday");
// Please note that the following array of short day names (and the same goes
// for short month names, _SMN) isn't absolutely necessary. We give it here
// for exemplification on how one can customize the short day names, but if
// they are simply the first N letters of the full name you can simply say:
//
// Calendar._SDN_len = N; // short day name length
// Calendar._SMN_len = N; // short month name length
//
// If N = 3 then this is not needed either since we assume a value of 3 if not
// present, to be compatible with translation files that were written before
// this feature.
// short day names
Calendar._SDN = new Array
("Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun");
// full month names
Calendar._MN = new Array
("January",
"February",
@ -22,9 +58,41 @@ Calendar._MN = new Array
"November",
"December");
// short month names
Calendar._SMN = new Array
("Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Toggle first day of week";
Calendar._TT["INFO"] = "About the calendar";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"For latest version visit: http://dynarch.com/mishoo/calendar.epl\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";
Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today";
@ -37,9 +105,10 @@ Calendar._TT["MON_FIRST"] = "Display Monday first";
Calendar._TT["SUN_FIRST"] = "Display Sunday first";
Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d";
Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e";
Calendar._TT["WK"] = "wk";

View File

@ -1,13 +1,49 @@
// ** I18N
// Calendar EN language
// Author: Mihai Bazon, <mishoo@infoiasi.ro>
// Encoding: any
// Distributed under the same terms as the calendar itself.
// For translators: please use UTF-8 if possible. We strongly believe that
// Unicode is the answer to a real internationalized world. Also please
// include your contact information in the header, as can be seen above.
// full day names
Calendar._DN = new Array
("Domingo",
"Lunes",
"Martes",
"Miércoles",
"Miircoles",
"Jueves",
"Viernes",
"Sábado",
"Sabado",
"Domingo");
// Please note that the following array of short day names (and the same goes
// for short month names, _SMN) isn't absolutely necessary. We give it here
// for exemplification on how one can customize the short day names, but if
// they are simply the first N letters of the full name you can simply say:
//
// Calendar._SDN_len = N; // short day name length
// Calendar._SMN_len = N; // short month name length
//
// If N = 3 then this is not needed either since we assume a value of 3 if not
// present, to be compatible with translation files that were written before
// this feature.
// short day names
Calendar._SDN = new Array
("Dom",
"Lun",
"Mar",
"Mii",
"Jue",
"Vie",
"Sab",
"Dom");
// full month names
Calendar._MN = new Array
("Enero",
"Febrero",
@ -22,14 +58,46 @@ Calendar._MN = new Array
"Noviembre",
"Diciembre");
// short month names
Calendar._SMN = new Array
("Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dic");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Cambia el primer día de la semana";
Calendar._TT["PREV_YEAR"] = "Año anterior (mantener para menu)";
Calendar._TT["INFO"] = "Acerca del calendario";
Calendar._TT["ABOUT"] =
"Selector DHTML de Fecha/Hora\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"Para conseguir la zltima versisn visite: http://dynarch.com/mishoo/calendar.epl\n" +
"Distribuido bajo licencia GNU LGPL. Visite http://gnu.org/licenses/lgpl.html para mas detalles." +
"\n\n" +
"Seleccisn de fecha:\n" +
"- Use los botones \xab, \xbb para seleccionar el aqo\n" +
"- Use los botones " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " para seleccionar el mes\n" +
"- Mantenga pulsado el ratsn en cualquiera de estos botones para una seleccisn rapida.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Seleccisn de hora:\n" +
"- Pulse en cualquiera de las partes de la hora para incrementarla\n" +
"- s pulse las mayzsculas mientras hace clic para decrementarla\n" +
"- s haga clic y arrastre el ratsn para una seleccisn mas rapida.";
Calendar._TT["PREV_YEAR"] = "Aqo anterior (mantener para menu)";
Calendar._TT["PREV_MONTH"] = "Mes anterior (mantener para menu)";
Calendar._TT["GO_TODAY"] = "Ir a hoy";
Calendar._TT["NEXT_MONTH"] = "Mes siguiente (mantener para menu)";
Calendar._TT["NEXT_YEAR"] = "Año siguiente (mantener para menu)";
Calendar._TT["NEXT_YEAR"] = "Aqo siguiente (mantener para menu)";
Calendar._TT["SEL_DATE"] = "Seleccionar fecha";
Calendar._TT["DRAG_TO_MOVE"] = "Arrastrar para mover";
Calendar._TT["PART_TODAY"] = " (hoy)";
@ -37,9 +105,10 @@ Calendar._TT["MON_FIRST"] = "Mostrar lunes primero";
Calendar._TT["SUN_FIRST"] = "Mostrar domingo primero";
Calendar._TT["CLOSE"] = "Cerrar";
Calendar._TT["TODAY"] = "Hoy";
Calendar._TT["TIME_PART"] = "(Mayzscula-)Clic o arrastre para cambiar valor";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "dd-mm-yy";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d";
Calendar._TT["DEF_DATE_FORMAT"] = "%d/%m/%Y";
Calendar._TT["TT_DATE_FORMAT"] = "%A, %e de %B de %Y";
Calendar._TT["WK"] = "sem";

View File

@ -24,14 +24,14 @@ Calendar._MN = new Array
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Toggle first day of week";
Calendar._TT["PREV_YEAR"] = "Elõzõ év (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Elõzõ hónap (hold for menu)";
Calendar._TT["TOGGLE"] = "A hét első napjának beállítása";
Calendar._TT["PREV_YEAR"] = "Előző év (tartsa nyomva a menühöz)";
Calendar._TT["PREV_MONTH"] = "Előző hónap (tartsa nyomva a menühöz)";
Calendar._TT["GO_TODAY"] = "Mai napra ugrás";
Calendar._TT["NEXT_MONTH"] = "Köv. hónap (hold for menu)";
Calendar._TT["NEXT_YEAR"] = "Köv. év (hold for menu)";
Calendar._TT["NEXT_MONTH"] = "Köv. hónap (tartsa nyomva a menühöz)";
Calendar._TT["NEXT_YEAR"] = "Köv. év (tartsa nyomva a menühöz)";
Calendar._TT["SEL_DATE"] = "Válasszon dátumot";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["DRAG_TO_MOVE"] = "Húzza a mozgatáshoz";
Calendar._TT["PART_TODAY"] = " (ma)";
Calendar._TT["MON_FIRST"] = "Hétfõ legyen a hét elsõ napja";
Calendar._TT["SUN_FIRST"] = "Vasárnap legyen a hét elsõ napja";

View File

@ -22,8 +22,42 @@ Calendar._MN = new Array
"Novembre",
"Dicembre");
// short month names
Calendar._SMN = new Array
("Gen",
"Feb",
"Mar",
"Apr",
"Mag",
"Giu",
"Lug",
"Ago",
"Set",
"Ott",
"Nov",
"Dic");
// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "a proposito del calendario";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"Per le ultime versioni vai a: http://dynarch.com/mishoo/calendar.epl\n" +
"Distribuito su licenza GNU LGPL. Vedi http://gnu.org/licenses/lgpl.html per i dettagli." +
"\n\n" +
"selezione della data:\n" +
"- Usa i bottoni \xab, \xbb per selezionare l'anno\n" +
"- Usa i bottoni " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " per selezionare il mese\n" +
"- Utilizza il mouse per una selezione rapida.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"selezione dell'ora:\n" +
"- Clicca sull'ora visualizzata per aumentarla\n" +
"- o Shift-click per diminuirla\n" +
"- o click a trascina per la selezione rapida.";
Calendar._TT["TOGGLE"] = "Modifica il primo giorno della settimana";
Calendar._TT["PREV_YEAR"] = "Anno prec. (tieni premuto per menu)";
Calendar._TT["PREV_MONTH"] = "Mese prec. (tieni premuto per menu)";
@ -39,7 +73,7 @@ Calendar._TT["CLOSE"] = "Chiudi";
Calendar._TT["TODAY"] = "Oggi";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d";
Calendar._TT["DEF_DATE_FORMAT"] = "%d-%m-%Y";
Calendar._TT["TT_DATE_FORMAT"] = "%a, %e %b ";
Calendar._TT["WK"] = "wk";
Calendar._TT["WK"] = "Setti";

View File

@ -0,0 +1,45 @@
// ** I18N
Calendar._DN = new Array
("日",
"月",
"火",
"水",
"木",
"金",
"土",
"日");
Calendar._MN = new Array
("1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "週の最初の曜日を切り替え";
Calendar._TT["PREV_YEAR"] = "前年";
Calendar._TT["PREV_MONTH"] = "前月";
Calendar._TT["GO_TODAY"] = "今日";
Calendar._TT["NEXT_MONTH"] = "翌月";
Calendar._TT["NEXT_YEAR"] = "翌年";
Calendar._TT["SEL_DATE"] = "日付選択";
Calendar._TT["DRAG_TO_MOVE"] = "ウィンドウの移動";
Calendar._TT["PART_TODAY"] = " (今日)";
Calendar._TT["MON_FIRST"] = "月曜日を先頭に";
Calendar._TT["SUN_FIRST"] = "日曜日を先頭に";
Calendar._TT["CLOSE"] = "閉じる";
Calendar._TT["TODAY"] = "今日";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "M d日 (D)";
Calendar._TT["WK"] = "週";

View File

@ -1,13 +1,14 @@
// ** I18N
Calendar._DN = new Array
("Duminică",
("Duminică",
"Luni",
"Marţi",
"Marţi",
"Miercuri",
"Joi",
"Vineri",
"Sâmbătă",
"Duminică");
"Sâmbătă",
"Duminică");
Calendar._SDN_len = 2;
Calendar._MN = new Array
("Ianuarie",
"Februarie",
@ -24,22 +25,41 @@ Calendar._MN = new Array
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Schimbă prima zi din săptămână";
Calendar._TT["INFO"] = "Despre calendar";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"Pentru ultima versiune vizitaţi: http://dynarch.com/mishoo/calendar.epl\n" +
"Distribuit sub GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Selecţia datei:\n" +
"- Folosiţi butoanele \xab, \xbb pentru a selecta anul\n" +
"- Folosiţi butoanele " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " pentru a selecta luna\n" +
"- Tineţi butonul mouse-ului apăsat pentru selecţie mai rapidă.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Selecţia orei:\n" +
"- Click pe ora sau minut pentru a mări valoarea cu 1\n" +
"- Sau Shift-Click pentru a micşora valoarea cu 1\n" +
"- Sau Click şi drag pentru a selecta mai repede.";
Calendar._TT["PREV_YEAR"] = "Anul precedent (lung pt menu)";
Calendar._TT["PREV_MONTH"] = "Luna precedentă (lung pt menu)";
Calendar._TT["PREV_MONTH"] = "Luna precedentă (lung pt menu)";
Calendar._TT["GO_TODAY"] = "Data de azi";
Calendar._TT["NEXT_MONTH"] = "Luna următoare (lung pt menu)";
Calendar._TT["NEXT_YEAR"] = "Anul următor (lung pt menu)";
Calendar._TT["SEL_DATE"] = "Selectează data";
Calendar._TT["DRAG_TO_MOVE"] = "Trage pentru a mişca";
Calendar._TT["PART_TODAY"] = " (astăzi)";
Calendar._TT["NEXT_MONTH"] = "Luna următoare (lung pt menu)";
Calendar._TT["NEXT_YEAR"] = "Anul următor (lung pt menu)";
Calendar._TT["SEL_DATE"] = "Selectează data";
Calendar._TT["DRAG_TO_MOVE"] = "Trage pentru a mişca";
Calendar._TT["PART_TODAY"] = " (astăzi)";
Calendar._TT["MON_FIRST"] = "Prima zi -> Luni";
Calendar._TT["SUN_FIRST"] = "Prima zi -> Duminică";
Calendar._TT["CLOSE"] = "Închide";
Calendar._TT["TODAY"] = "Astăzi";
Calendar._TT["SUN_FIRST"] = "Prima zi -> Duminică";
Calendar._TT["CLOSE"] = "Închide";
Calendar._TT["TODAY"] = "Astăzi";
Calendar._TT["TIME_PART"] = "(Shift-)Click sau drag pentru a selecta";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "dd-mm-y";
Calendar._TT["TT_DATE_FORMAT"] = "D, d M";
Calendar._TT["DEF_DATE_FORMAT"] = "%d-%m-%Y";
Calendar._TT["TT_DATE_FORMAT"] = "%A, %d %B";
Calendar._TT["WK"] = "wk";
Calendar._TT["WK"] = "spt";

View File

@ -0,0 +1,99 @@
// ** I18N
// Calendar SK language
// Author: Peter Valach (pvalach@gmx.net)
// Encoding: utf-8
// Last update: 2003/10/29
// Distributed under the same terms as the calendar itself.
// full day names
Calendar._DN = new Array
("NedeÄľa",
"Pondelok",
"Utorok",
"Streda",
 tvrtok",
"Piatok",
"Sobota",
"NedeÄľa");
// short day names
Calendar._SDN = new Array
("Ned",
"Pon",
"Uto",
"Str",
 tv",
"Pia",
"Sob",
"Ned");
// full month names
Calendar._MN = new Array
("Január",
"Február",
"Marec",
"AprĂ­l",
"Máj",
"JĂşn",
"JĂşl",
"August",
"September",
"OktĂłber",
"November",
"December");
// short month names
Calendar._SMN = new Array
("Jan",
"Feb",
"Mar",
"Apr",
"Máj",
"JĂşn",
"JĂşl",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec");
// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "O kalendári";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2003\n" +
"Poslednú verziu nájdete na: http://dynarch.com/mishoo/calendar.epl\n" +
"Distribuované pod GNU LGPL. Viď http://gnu.org/licenses/lgpl.html pre detaily." +
"\n\n" +
"Výber dátumu:\n" +
"- Použite tlačidlá \xab, \xbb pre výber roku\n" +
"- Použite tlačidlá " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " pre výber mesiaca\n" +
"- Ak ktorékoľvek z týchto tlačidiel podržíte dlhšie, zobrazí sa rýchly výber.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Výber času:\n" +
"- Kliknutie na niektorú položku času ju zvýši\n" +
"- Shift-klik ju znĂ­Ĺľi\n" +
"- Ak podržíte tlačítko stlačené, posúvaním meníte hodnotu.";
Calendar._TT["PREV_YEAR"] = "Predošlý rok (podržte pre menu)";
Calendar._TT["PREV_MONTH"] = "Predošlý mesiac (podržte pre menu)";
Calendar._TT["GO_TODAY"] = "Prejsť na dnešok";
Calendar._TT["NEXT_MONTH"] = "Nasl. mesiac (podrĹľte pre menu)";
Calendar._TT["NEXT_YEAR"] = "Nasl. rok (podrĹľte pre menu)";
Calendar._TT["SEL_DATE"] = "Zvoľte dátum";
Calendar._TT["DRAG_TO_MOVE"] = "PodrĹľanĂ­m tlaÄŤĂ­tka zmenĂ­te polohu";
Calendar._TT["PART_TODAY"] = " (dnes)";
Calendar._TT["MON_FIRST"] = "ZobraziĹĄ pondelok ako prvĂ˝";
Calendar._TT["SUN_FIRST"] = "ZobraziĹĄ nedeÄľu ako prvĂş";
Calendar._TT["CLOSE"] = "ZavrieĹĄ";
Calendar._TT["TODAY"] = "Dnes";
Calendar._TT["TIME_PART"] = "(Shift-)klik/ĹĄahanie zmenĂ­ hodnotu";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "$d. %m. %Y";
Calendar._TT["TT_DATE_FORMAT"] = "%a, %e. %b";
Calendar._TT["WK"] = "týž";

View File

@ -0,0 +1,93 @@
// ** I18N
// Calendar SV language (Swedish, svenska)
// Author: Mihai Bazon, <mishoo@infoiasi.ro>
// Translation team: <sv@li.org>
// Translator: Leonard Norrgård <leonard.norrgard@refactor.fi>
// Last translator: Leonard Norrgård <leonard.norrgard@refactor.fi>
// Encoding: iso-latin-1
// Distributed under the same terms as the calendar itself.
// For translators: please use UTF-8 if possible. We strongly believe that
// Unicode is the answer to a real internationalized world. Also please
// include your contact information in the header, as can be seen above.
// full day names
Calendar._DN = new Array
("söndag",
"måndag",
"tisdag",
"onsdag",
"torsdag",
"fredag",
"lördag",
"söndag");
// Please note that the following array of short day names (and the same goes
// for short month names, _SMN) isn't absolutely necessary. We give it here
// for exemplification on how one can customize the short day names, but if
// they are simply the first N letters of the full name you can simply say:
//
// Calendar._SDN_len = N; // short day name length
// Calendar._SMN_len = N; // short month name length
//
// If N = 3 then this is not needed either since we assume a value of 3 if not
// present, to be compatible with translation files that were written before
// this feature.
Calendar._SDN_len = 2;
Calendar._SMN_len = 3;
// full month names
Calendar._MN = new Array
("januari",
"februari",
"mars",
"april",
"maj",
"juni",
"juli",
"augusti",
"september",
"oktober",
"november",
"december");
// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "Om kalendern";
Calendar._TT["ABOUT"] =
"DHTML Datum/tid-väljare\n" +
"(c) dynarch.com 2002-2003\n" + // don't translate this this ;-)
"För senaste version gå till: http://dynarch.com/mishoo/calendar.epl\n" +
"Distribueras under GNU LGPL. Se http://gnu.org/licenses/lgpl.html för detaljer." +
"\n\n" +
"Val av datum:\n" +
"- Använd knapparna \xab, \xbb för att välja år\n" +
"- Använd knapparna " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " för att välja månad\n" +
"- Håll musknappen nedtryckt på någon av ovanstående knappar för snabbare val.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Val av tid:\n" +
"- Klicka på en del av tiden för att öka den delen\n" +
"- eller skift-klicka för att minska den\n" +
"- eller klicka och drag för snabbare val.";
Calendar._TT["PREV_YEAR"] = "Föregående år (håll för menu)";
Calendar._TT["PREV_MONTH"] = "Föregående månad (håll för menu)";
Calendar._TT["GO_TODAY"] = "Gå till dagens datum";
Calendar._TT["NEXT_MONTH"] = "Följande månad (håll för menu)";
Calendar._TT["NEXT_YEAR"] = "Följande år (håll för menu)";
Calendar._TT["SEL_DATE"] = "Välj datum";
Calendar._TT["DRAG_TO_MOVE"] = "Drag för att flytta";
Calendar._TT["PART_TODAY"] = " (idag)";
Calendar._TT["MON_FIRST"] = "Visa måndag först";
Calendar._TT["SUN_FIRST"] = "Visa söndag först";
Calendar._TT["CLOSE"] = "Stäng";
Calendar._TT["TODAY"] = "Idag";
Calendar._TT["TIME_PART"] = "(Skift-)klicka eller drag för att ändra tid";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
Calendar._TT["TT_DATE_FORMAT"] = "%A %d %b %Y";
Calendar._TT["WK"] = "vecka";

View File

@ -1,45 +0,0 @@
// ** I18N
Calendar._DN = new Array
("Söndag",
"Måndag",
"Tisdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lördag",
"Söndag");
Calendar._MN = new Array
("Januari",
"Februari",
"Mars",
"April",
"Maj",
"Juni",
"Juli",
"Augusti",
"September",
"Oktober",
"November",
"December");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Skifta första veckodag";
Calendar._TT["PREV_YEAR"] = "Förra året (tryck för meny)";
Calendar._TT["PREV_MONTH"] = "Förra månaden (tryck för meny)";
Calendar._TT["GO_TODAY"] = "Gå till dagens datum";
Calendar._TT["NEXT_MONTH"] = "Nästa månad (tryck för meny)";
Calendar._TT["NEXT_YEAR"] = "Nästa år (tryck för meny)";
Calendar._TT["SEL_DATE"] = "Välj dag";
Calendar._TT["DRAG_TO_MOVE"] = "Flytta fönstret";
Calendar._TT["PART_TODAY"] = " (idag)";
Calendar._TT["MON_FIRST"] = "Visa Måndag först";
Calendar._TT["SUN_FIRST"] = "Visa Söndag först";
Calendar._TT["CLOSE"] = "Stäng fönstret";
Calendar._TT["TODAY"] = "Idag";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd";
Calendar._TT["TT_DATE_FORMAT"] = "DD, d MM y";
Calendar._TT["WK"] = "wk";

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 B

View File

@ -1,13 +1,166 @@
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html>
<head>
<title>jscalendar-0.9.3 release notes</title>
<title>jscalendar release notes</title>
<style type="text/css">
h1 { border-bottom: 1px solid #000; }
h2 { border-bottom: 1px solid #444; }
ul li { margin-top: 0.5em; margin-bottom: 0.5em; }
</style>
</head>
<body>
<h1>jscalendar-0.9.3 release notes</h1>
<h1>jscalendar release notes</h1>
<p>This release compiled at Wednesday, 9 Jul 2003 (00:39).</p>
<p>This release compiled at Wednesday, 5 Nov 2003 (19:30).</p>
<h2>0.9.5</h2>
<p>
This release's primary goal is to fix a wrong license statement which
can be found in some files from 0.9.4. For instance in README or
calendar.js, the statement was that the code is distributed under the
GNU GPL; that's because I had plans to change the license, then
changed my mind but unfortunately I committed files so. I am sorry
for this inconvenience, please use the latest (0.9.5) release which is
fully covered by LGPL.
</p>
<p>Other changes:</p>
<ul>
<li>
<b>Fixed</b> an annoying bug that prevented the calendar to display
correctly when it was configured for an input field inside a
<b>scrolling area</b>. <b>Many thanks</b> to Ian Barrack (<a
href="http://www.simban.com">Simban.com</a>) who pointed it up and
donated quote some money for the Calendar project!
</li>
<li>
All examples use UTF-8 now; the translations may not be all
up-to-date, but I <strong>strongly</strong> suggest everyone to use
UTF-8; other encodings are a plain mess. So far I know for sure
that Romanian translation will work with UTF-8 and <em>not
anymore</em> with ISO-8859-2. Other translations are probably
usable under UTF-8, but if your preferred language isn't... ;-)
please make it and send it to me for inclusion.
</li>
<li>
Fixed small bug in the documentation (one footnote didn't appear
where it should have).
</li>
<li>
Updated translations: DE, ES, HU, IT, RO. Thanks to everyone who
sent translations!
</li>
</ul>
<h2>0.9.4</h2>
<h3>New stuff</h3>
<ul>
<li>Supports time selection. Yes. ;-) This work has been largely
sponsored by <strong>Himanshukumar Shah</strong> (thank you!). See
the docs and example files for details on how to setup.</li>
<li>Easy to link 2 or more fields by using the new
<code>onUpdate</code> parameter of <code>Calendar.setup</code>. This
is useful, say, to automatically set a value in a second field based
on the value selected in the first field. See the documentation and
first sample in <a href="simple-1.html">simple-1.html</a>.</li>
<li>Other <code>Calendar.setup</code> low-level parameters, for those
wanting to have the complete control: <code>onSelect</code> and
<code>onClose</code>. The handlers are called when something is
selected in the calendar or when the calendar is closed.</li>
<li>The translation files can optionally include the short day names
and the short month names. That's because in some languages, like
German, the short form is not the first 3 letters of the entire name
but only the first 2. Also in other languages short names can't be
as easily derived from the full name by just calling substr, so this
patch solves the problem.</li>
<li>Implemented a nice way to make some dates "special" (look
different). Specifically, the <code>setDisabledHandler</code> method
was replaced with the more general <code>setDateStatusHandler</code>
method (the old one is still available for backwards compatibility but
<em>will</em> be removed). More details about this in the
documentation. Also see <a href="simple-3.html">simple-3.html</a>
for a live sample.</li>
<li>Date parsing and formatting engine is now rewritten and supports a
subset of <code>strftime</code> format specifiers from ANSI C. This
makes it possible to use dates like "YYYYMMDD" (the corresponding
format for this would be "%Y%m%d"). Details in the documentation.
<b>Please note that the new engine is not compatibile with older
calendar releases!</b></li>
<li>Along with the new date parser I workarounded an unpleasant crash
that occurred in IE when certain accented characters appeared in the
texts. I think German was one of the language with such problems, and
the workaround was to use the letter without an accent. Well, now you
can translate to whatever you want.</li>
<li>"Fixes" (I mean, "horrible workarounds") for Konqueror (and
hopefully Safari). Unfortunately, this otherwise excellent browser
still has some bugs that keep the calendar from working
<em>exactly</em> as it should.. But they're going to be fixed,
right? ;-)</li>
<li>CSS themes got pretty much modified too so if you wrote your theme
you need to update it. Aside for the time selector support, the CSS
themes contain a simple hack that makes the navigation buttons show
a little arrow in the lower-right corner which indicates that if one
holds the mouse a menu will appear.</li>
</ul>
<h3>Translation files</h3>
<p>The translation files need to be updated in order for the calendar to
work properly. Currently the only updated files are calendar-en.js
(main file) and calendar-ro.js (well, yes, I am a Romanian ;-).</p>
<p>Specifically, they need the following:</p>
<ul>
<li>Correct date format, according with the new format specifiers
introduced in 0.9.4. Details about the available format specifiers
in the documentation</li>
<li>Short day or month names, <em>if required</em>. If they can be
derived by taking the first N letters of the full name then a simple
Calendar._SDN_len = N or Calendar._SMN_len = N will suffice. If N
is 3 then nothing needs to be done as we take it for granted if no
other option is offered ;-)</li>
<li>We have some new texts that shows short usage information as well
as copyright information.</li>
</ul>
<p>If your favorite language is not there yet, or it is but not updated
according to the main calendar-en.js file, then please consider
translating calendar-en.js and send the translation back to me so that
I include it in the official distribution.</p>
<h3>Bug status</h3>
<p>Check <a
href="http://sourceforge.net/tracker/?atid=544285&group_id=75569&func=browse">SourceForge</a>,
I didn't keep track. However, there were a lot of bugfixes.</p>
<h2>0.9.3</h2>
<h3>New stuff</h3>
@ -68,10 +221,10 @@
</ol>
<hr />
<address><a href="http://students.infoiasi.ro/~mishoo/">Mihai Bazon</a></address>
<address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address>
<!-- Created: Tue Jul 8 17:29:37 EEST 2003 -->
<!-- hhmts start -->
Last modified on Tue Jul 8 21:52:23 2003
Last modified on Wed Oct 29 02:37:07 2003
<!-- hhmts end -->
<!-- doc-lang: English -->
</body>

View File

@ -1,6 +1,7 @@
<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>
@ -46,21 +47,48 @@
<hr />
<p><b>Basic setup: one input field only.</b> Clicking in the input field
activates the calendar. Default date format is "y/mm/dd". The calendar
defaults to "single-click mode".</p>
<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><span style="color:red">Note:</span> for some reason this example works
only with Mozilla. It seems that IE and Opera can't set the onclick handler
correctly for the input field.</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>
@ -79,7 +107,8 @@ is explicitely set to false).</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_b", // id of the input field
ifFormat : "mm/dd/y", // format 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
});
@ -105,7 +134,7 @@ done. The input field is read-only (that is set from HTML).</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_c", // id of the input field
ifFormat : "MM d, y", // format 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
@ -139,9 +168,9 @@ field) but we wanna show a friendlier format to the end-user.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_d", // id of the input field
ifFormat : "y/dd/mm", // format of the input field (even if hidden, this format will be honored)
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 : "DD, MM d, y", // format of the displayed date
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
@ -166,9 +195,9 @@ onmouseout="this.style.background=''" />.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_e", // id of the input field
ifFormat : "y/dd/mm", // format of the input field (even if hidden, this format will be honored)
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 : "DD, MM d, y", // format of the displayed date
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
@ -197,12 +226,12 @@ Sundays).</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_f", // id of the input field
ifFormat : "y/dd/mm", // format of the input field (even if hidden, this format will be honored)
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 : "DD, MM d, y", // format of the displayed date
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
disableFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0);
dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
}
});
</script>

View File

@ -1,6 +1,7 @@
<html style="background-color: buttonface; color: buttontext;">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Simple calendar setup [flat calendar]</title>

View File

@ -0,0 +1,130 @@
<html style="background-color: buttonface; color: buttontext;">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Simple calendar setup [flat 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>
<style type="text/css">
.special { background-color: #000; color: #fff; }
</style>
</head>
<body>
<h2>DHTML Calendar &mdash; for the impatient</h2>
<blockquote>
<p>
This page demonstrates how to setup a flat calendar. Examples of
<em>popup</em> calendars are available in <a
href="simple-1.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 />
<div style="float: right; margin-left: 1em; margin-bottom: 1em;"
id="calendar-container"></div>
<script type="text/javascript">
var SPECIAL_DAYS = {
0 : [ 13, 24 ], // special days in January
2 : [ 1, 6, 8, 12, 18 ], // special days in March
8 : [ 21, 11 ] // special days in September
};
function dateIsSpecial(year, month, day) {
var m = SPECIAL_DAYS[month];
if (!m) return false;
for (var i in m) if (m[i] == day) return true;
return false;
};
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 = "/" + y + "/" + m + "/" + d + "/index.php";
}
};
Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged, // our callback function
dateStatusFunc : function(date, y, m, d) {
if (dateIsSpecial(y, m, d)) return "special";
else return false; // other dates are enabled
// return true if you want to disable other dates
}
}
);
</script>
<p>The positioning of the DIV that contains the calendar is entirely your
job. For instance, the "calendar-container" DIV from this page has the
following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
<p>Following there is the code that has been used to create this calendar.
You can find the full description of the <tt>Calendar.setup()</tt> function
in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
<pre
>&lt;div style="float: right; margin-left: 1em; margin-bottom: 1em;"
id="calendar-container"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&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 = "/" + y + "/" + m + "/" + d + "/index.php";
}
};
Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged // our callback function
}
);
&lt;/script&gt;</pre>
</body>
</html>

View File

@ -0,0 +1,330 @@
<html style="background-color: buttonface; color: buttontext;">
<head>
<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>
<script language="JavaScript">
function rightAlign(div,offset){
if(typeof div=='string'){div=document.getElementById(div)}
if(isNaN(offset)){offset=0}
div.style.left=document.body.clientWidth-parseInt(div.offsetWidth)+offset;
}
function stretchRight(div,offset){
if(typeof div=='string'){div=document.getElementById(div)}
if(isNaN(offset)){offset=0}
if(document.body.clientWidth-parseInt(div.offsetLeft)+offset>=0){
div.style.width=document.body.clientWidth-parseInt(div.offsetLeft)+offset;
}
}
function stretchBottom(div,offset){
if(typeof div=='string'){div=document.getElementById(div)}
if(isNaN(offset)){offset=0}
if(document.body.clientHeight-parseInt(div.offsetTop)+offset>=0){
div.style.height=document.body.clientHeight-parseInt(div.offsetTop)+offset;
}
}
function toggleHelp(){
dh=document.getElementById('divHelp');
if(dh.style.visibility=='visible'){
dh.style.visibility='hidden';
stretchRight('divMenu');
stretchRight('divContent');
}else{
rightAlign('divHelp');
stretchRight('divMenu',-200);
stretchRight('divContent',-200);
dh.style.visibility='visible';
}
var txt = "<table>";
var object = document.getElementById("divContent");
for (var i in object) {
switch (typeof object[i]) {
case "string":
case "number":
if (i != "innerHTML")
txt += "<tr><td>" + i + "</td><td>" + object[i] + "</td></tr>";
break;
}
}
dh.innerHTML = txt + "</table>";
}
function adjustDivs(){
dh=document.getElementById('divHelp');
if(dh.style.visibility=='visible'){
rightAlign('divHelp');
stretchRight('divMenu',-200);
stretchRight('divContent',-200);
}else{
stretchRight('divMenu');
stretchRight('divContent');
}
stretchBottom('divContent');
}
</script>
<style>
#divContent{
position:absolute;
width:100%;
height:100%;
overflow:auto;
top: 30px;
}
#divMenu{
position: absolute;
left:0px;
top:0px;
text-align: right;
background-color: #cccccc;
width:100%;
height:30px;
}
#divHelp{
position:absolute;
width:200px;
height:100%;
background-color:#ffffcc;
visibility:hidden;
}
</style>
</head>
<body scroll=no leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onload="adjustDivs()" onresize="adjustDivs()">
<div id="divMenu"><a href="javascript:void(0)" onclick="toggleHelp();return false">Toggle console</a></div>
<div id="divContent">
<h2>DHTML Calendar &mdash; 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
&lt;form&gt; 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).</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
});
</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"&mdash;so that the user
can't directly see or modify it&mdash; and one is a &lt;span&gt; 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>
</div>
<div id="divHelp">
</div>
</body>
</html>