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 <?php
/**************************************************************************\ /**************************************************************************\
* phpGroupWare - API jsCalendar setup (set up jsCalendar with user prefs) * * eGroupWare - API jsCalendar setup (set up jsCalendar with user prefs) *
* http://www.phpgroupware.org * * http://www.eGroupWare.org *
* Modified by Ralf Becker <RalfBecker@outdoor-training.de> * * 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 * * 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 * * 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'); include('../../header.inc.php');
$dateformat = $GLOBALS['phpgw_info']['user']['preferences']['common']['dateformat']; $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'); $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 * The DHTML Calendar
* *
* Details and latest version at: * 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 * This script is distributed under the GNU Lesser General Public License.
* Public License, as long as you do not remove or alter this notice. * 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 * This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site * 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 * This function "patches" an input field (or other element) to use a calendar
* widget for date selection. * widget for date selection.
@ -60,37 +69,53 @@ $jsLongDateFormat = 'DD, '.($dayFirst ? 'd' : 'MM').($dateformat[1] == '.' ? '.
* ifFormat | date format that will be stored in the input field * 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 * 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) * 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 * 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 * 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 * 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 * 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) * 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 * 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 * 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 * pass none of "inputField", "displayArea" or "button" you'll get a warning
* saying "nothing to setup". * saying "nothing to setup".
*/ */
?> ?>
Calendar.setup = function (params) { Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } }; function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
param_default("inputField", null); param_default("inputField", null);
param_default("displayArea", null); param_default("displayArea", null);
param_default("button", null); param_default("button", null);
param_default("eventName", "click"); param_default("eventName", "click");
// param_default("ifFormat", "%Y/%m/%d");
param_default("ifFormat", "<?php echo $jsDateFormat; ?>"); param_default("ifFormat", "<?php echo $jsDateFormat; ?>");
// param_default("daFormat", "%Y/%m/%d");
param_default("daFormat", "<?php echo $jsDateFormat; ?>"); param_default("daFormat", "<?php echo $jsDateFormat; ?>");
param_default("singleClick", true); param_default("singleClick", true);
param_default("disableFunc", null); 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("mondayFirst", <?php echo $GLOBALS['phpgw_info']['user']['preferences']['common']['weekdaysstarts'] != 'sunday' ? 'true' : 'false'; ?>);
param_default("align", "Bl"); param_default("align", "Bl");
param_default("range", [1900, 2999]); param_default("range", [1900, 2999]);
param_default("weekNumbers", true); param_default("weekNumbers", true);
param_default("flat", null); param_default("flat", null);
param_default("flatCallback", 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"]; var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) { for (var i in tmp) {
@ -121,6 +146,9 @@ Calendar.setup = function (params) {
if (cal.params.singleClick && cal.dateClicked) { if (cal.params.singleClick && cal.dateClicked) {
cal.callCloseHandler(); cal.callCloseHandler();
} }
if (typeof cal.params.onUpdate == "function") {
cal.params.onUpdate(cal);
}
}; };
if (params.flat != null) { if (params.flat != null) {
@ -129,11 +157,13 @@ Calendar.setup = function (params) {
alert("Calendar.setup:\n Flat specified but can't find parent."); alert("Calendar.setup:\n Flat specified but can't find parent.");
return false; 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.params = params;
cal.weekNumbers = params.weekNumbers; cal.weekNumbers = params.weekNumbers;
cal.setRange(params.range[0], params.range[1]); cal.setRange(params.range[0], params.range[1]);
cal.setDisabledHandler(params.disableFunc); cal.setDateStatusHandler(params.dateStatusFunc);
cal.create(params.flat); cal.create(params.flat);
cal.show(); cal.show();
return false; return false;
@ -144,29 +174,42 @@ Calendar.setup = function (params) {
var dateEl = params.inputField || params.displayArea; var dateEl = params.inputField || params.displayArea;
var dateFmt = params.inputField ? params.ifFormat : params.daFormat; var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
var mustCreate = false; var mustCreate = false;
var cal = window.calendar;
if (!window.calendar) { if (!window.calendar) {
window.calendar = new Calendar(params.mondayFirst, null, onSelect, function(cal) { cal.hide(); }); window.calendar = cal = new Calendar(params.mondayFirst,
window.calendar.weekNumbers = params.weekNumbers; 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; mustCreate = true;
} else { } else {
window.calendar.hide(); cal.hide();
} }
window.calendar.setRange(params.range[0], params.range[1]); cal.setRange(params.range[0], params.range[1]);
window.calendar.params = params; cal.params = params;
window.calendar.setDisabledHandler(params.disableFunc); cal.setDateStatusHandler(params.dateStatusFunc);
window.calendar.setDateFormat(dateFmt); cal.setDateFormat(dateFmt);
if (mustCreate) { if (mustCreate)
window.calendar.create(); cal.create();
} cal.parseDate(dateEl.value || dateEl.innerHTML);
window.calendar.parseDate(dateEl.value || dateEl.innerHTML); cal.refresh();
window.calendar.refresh(); cal.showAtElement(params.displayArea || params.inputField, params.align);
window.calendar.showAtElement(params.displayArea || params.inputField, params.align);
return false; return false;
}; };
}; };
// translations // eGroupWare translations, are read from the database
// ** I18N // ** 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 Calendar._DN = new Array
("<?php echo lang('Sunday') ?>", ("<?php echo lang('Sunday') ?>",
"<?php echo lang('Monday'); ?>", "<?php echo lang('Monday'); ?>",
@ -176,6 +219,10 @@ Calendar._DN = new Array
"<?php echo lang('Friday'); ?>", "<?php echo lang('Friday'); ?>",
"<?php echo lang('Saturday'); ?>", "<?php echo lang('Saturday'); ?>",
"<?php echo lang('Sunday'); ?>"); "<?php echo lang('Sunday'); ?>");
// please note eGW does NOT use the short month-names atm.
// full month names
Calendar._MN = new Array Calendar._MN = new Array
("<?php echo lang('January'); ?>", ("<?php echo lang('January'); ?>",
"<?php echo lang('February'); ?>", "<?php echo lang('February'); ?>",
@ -192,6 +239,24 @@ Calendar._MN = new Array
// tooltips // tooltips
Calendar._TT = {}; 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["TOGGLE"] = "<?php echo lang('Toggle first day of week'); ?>";
Calendar._TT["PREV_YEAR"] = "<?php echo lang('Prev. year (hold for menu)'); ?>"; Calendar._TT["PREV_YEAR"] = "<?php echo lang('Prev. year (hold for menu)'); ?>";
Calendar._TT["PREV_MONTH"] = "<?php echo lang('Prev. month (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["SUN_FIRST"] = "<?php echo lang('Display Sunday first'); ?>";
Calendar._TT["CLOSE"] = "<?php echo lang('Close'); ?>"; Calendar._TT["CLOSE"] = "<?php echo lang('Close'); ?>";
Calendar._TT["TODAY"] = "<?php echo lang('Today'); ?>"; Calendar._TT["TODAY"] = "<?php echo lang('Today'); ?>";
Calendar._TT["TIME_PART"] = "<?php echo lang('(Shift-)Click or drag to change value'); ?>";
// date formats // date formats
//Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
Calendar._TT["DEF_DATE_FORMAT"] = "<?php echo $jsDateFormat; ?>"; 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["TT_DATE_FORMAT"] = "<?php echo $jsLongDateFormat; ?>";
Calendar._TT["WK"] = "<?php echo lang('Wk'); ?>"; Calendar._TT["WK"] = "<?php echo lang('Wk'); ?>";

View File

@ -2,17 +2,13 @@ The DHTML Calendar
------------------- -------------------
Author: Mihai Bazon, <mishoo@infoiasi.ro> Author: Mihai Bazon, <mishoo@infoiasi.ro>
http://students.infoiasi.ro/~mishoo http://dynarch.com/mishoo/
This program is free software published under the 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 For the entire license text please refer to
http://www.gnu.org/licenses/lgpl http://www.gnu.org/licenses/lgpl.html
An additional restriction is that you are not allowed
to remove the comment note present at the beginning of
the script.
Contents Contents
--------- ---------
@ -31,5 +27,5 @@ Homepage
For details and latest versions please refer to calendar For details and latest versions please refer to calendar
homepage, located on my website: 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 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. translations from the database for the language the user has spec. in his prefs.
RalfBecker@outdoor-training.de 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 */ 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */ font-weight: bold; /* Pressing it will take you to the current date */
text-align: center; text-align: center;
@ -47,14 +51,14 @@ div.calendar { position: relative; }
} }
.calendar thead .hilite { /* How do the buttons in header appear when hover */ .calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #aaf; background-color: #aaf;
color: #000; color: #000;
border: 1px solid #04f; border: 1px solid #04f;
padding: 1px; padding: 1px;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
background: #77c; background-color: #77c;
padding: 2px 0px 0px 2px; padding: 2px 0px 0px 2px;
} }
@ -161,9 +165,14 @@ div.calendar { position: relative; }
font-size: smaller; font-size: smaller;
} }
.combo .label { .combo .label,
width: 100%; .combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
} }
.combo .hilite { .combo .hilite {
@ -176,3 +185,40 @@ div.calendar { position: relative; }
background: #eef; background: #eef;
font-weight: bold; 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 */ 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */ font-weight: bold; /* Pressing it will take you to the current date */
text-align: center; text-align: center;
@ -43,14 +47,14 @@ div.calendar { position: relative; }
} }
.calendar thead .hilite { /* How do the buttons in header appear when hover */ .calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #faa; background-color: #faa;
color: #000; color: #000;
border: 1px solid #f40; border: 1px solid #f40;
padding: 1px; padding: 1px;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
background: #c77; background-color: #c77;
padding: 2px 0px 0px 2px; padding: 2px 0px 0px 2px;
} }
@ -154,9 +158,14 @@ div.calendar { position: relative; }
font-size: smaller; font-size: smaller;
} }
.combo .label { .combo .label,
width: 100%; .combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
} }
.combo .hilite { .combo .hilite {
@ -169,3 +178,40 @@ div.calendar { position: relative; }
background: #fee; background: #fee;
font-weight: bold; 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%; font-size: 90%;
} }
.calendar .nav {
background: #676 url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */ font-weight: bold; /* Pressing it will take you to the current date */
text-align: center; text-align: center;
@ -44,14 +48,14 @@ div.calendar { position: relative; }
} }
.calendar thead .hilite { /* How do the buttons in header appear when hover */ .calendar thead .hilite { /* How do the buttons in header appear when hover */
background: #afa; background-color: #afa;
color: #000; color: #000;
border: 1px solid #084; border: 1px solid #084;
padding: 1px; padding: 1px;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
background: #7c7; background-color: #7c7;
padding: 2px 0px 0px 2px; padding: 2px 0px 0px 2px;
} }
@ -70,7 +74,7 @@ div.calendar { position: relative; }
.calendar table .wn { .calendar table .wn {
padding: 2px 3px 2px 2px; padding: 2px 3px 2px 2px;
border-right: 1px solid #000; border-right: 1px solid #8a8;
background: #dfb; background: #dfb;
} }
@ -158,9 +162,14 @@ div.calendar { position: relative; }
font-size: smaller; font-size: smaller;
} }
.combo .label { .combo .label,
width: 100%; .combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
} }
.combo .hilite { .combo .hilite {
@ -173,3 +182,40 @@ div.calendar { position: relative; }
background: #efe; background: #efe;
font-weight: bold; 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 * The DHTML Calendar
* *
* Details and latest version at: * 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 * This script is distributed under the GNU Lesser General Public License.
* Public License, as long as you do not remove or alter this notice. * 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 * This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site * 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$ // $Id$
@ -31,13 +36,19 @@
* ifFormat | date format that will be stored in the input field * 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 * 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) * 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 * 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 * 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 * 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 * 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) * 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 * 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 * 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 * pass none of "inputField", "displayArea" or "button" you'll get a warning
@ -46,20 +57,27 @@
Calendar.setup = function (params) { Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } }; function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
param_default("inputField", null); param_default("inputField", null);
param_default("displayArea", null); param_default("displayArea", null);
param_default("button", null); param_default("button", null);
param_default("eventName", "click"); param_default("eventName", "click");
param_default("ifFormat", "y/mm/dd"); param_default("ifFormat", "%Y/%m/%d");
param_default("daFormat", "y/mm/dd"); param_default("daFormat", "%Y/%m/%d");
param_default("singleClick", true); param_default("singleClick", true);
param_default("disableFunc", null); param_default("disableFunc", null);
param_default("mondayFirst", false); param_default("dateStatusFunc", params["disableFunc"]); // takes precedence if both are defined
param_default("align", "Bl"); param_default("mondayFirst", true);
param_default("range", [1900, 2999]); param_default("align", "Bl");
param_default("weekNumbers", true); param_default("range", [1900, 2999]);
param_default("flat", null); param_default("weekNumbers", true);
param_default("flatCallback", null); 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"]; var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) { for (var i in tmp) {
@ -90,6 +108,9 @@ Calendar.setup = function (params) {
if (cal.params.singleClick && cal.dateClicked) { if (cal.params.singleClick && cal.dateClicked) {
cal.callCloseHandler(); cal.callCloseHandler();
} }
if (typeof cal.params.onUpdate == "function") {
cal.params.onUpdate(cal);
}
}; };
if (params.flat != null) { if (params.flat != null) {
@ -98,11 +119,13 @@ Calendar.setup = function (params) {
alert("Calendar.setup:\n Flat specified but can't find parent."); alert("Calendar.setup:\n Flat specified but can't find parent.");
return false; 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.params = params;
cal.weekNumbers = params.weekNumbers; cal.weekNumbers = params.weekNumbers;
cal.setRange(params.range[0], params.range[1]); cal.setRange(params.range[0], params.range[1]);
cal.setDisabledHandler(params.disableFunc); cal.setDateStatusHandler(params.dateStatusFunc);
cal.create(params.flat); cal.create(params.flat);
cal.show(); cal.show();
return false; return false;
@ -113,23 +136,28 @@ Calendar.setup = function (params) {
var dateEl = params.inputField || params.displayArea; var dateEl = params.inputField || params.displayArea;
var dateFmt = params.inputField ? params.ifFormat : params.daFormat; var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
var mustCreate = false; var mustCreate = false;
var cal = window.calendar;
if (!window.calendar) { if (!window.calendar) {
window.calendar = new Calendar(params.mondayFirst, null, onSelect, function(cal) { cal.hide(); }); window.calendar = cal = new Calendar(params.mondayFirst,
window.calendar.weekNumbers = params.weekNumbers; 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; mustCreate = true;
} else { } else {
window.calendar.hide(); cal.hide();
} }
window.calendar.setRange(params.range[0], params.range[1]); cal.setRange(params.range[0], params.range[1]);
window.calendar.params = params; cal.params = params;
window.calendar.setDisabledHandler(params.disableFunc); cal.setDateStatusHandler(params.dateStatusFunc);
window.calendar.setDateFormat(dateFmt); cal.setDateFormat(dateFmt);
if (mustCreate) { if (mustCreate)
window.calendar.create(); cal.create();
} cal.parseDate(dateEl.value || dateEl.innerHTML);
window.calendar.parseDate(dateEl.value || dateEl.innerHTML); cal.refresh();
window.calendar.refresh(); cal.showAtElement(params.displayArea || params.inputField, params.align);
window.calendar.showAtElement(params.displayArea || params.inputField, params.align);
return false; 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 * The DHTML Calendar
* *
* Details and latest version at: * 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 * This script is distributed under the GNU Lesser General Public License.
* Public License, as long as you do not remove or alter this notice. * 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 * This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site * 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; background: ButtonFace;
} }
.calendar .nav {
background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
@ -60,8 +64,9 @@
} }
.calendar thead .hilite { /* How do the buttons in header appear when hover */ .calendar thead .hilite { /* How do the buttons in header appear when hover */
border-width: 2px; border: 2px solid;
padding: 0px; padding: 0px;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
@ -86,8 +91,8 @@
} }
.calendar tbody .rowhilite td { .calendar tbody .rowhilite td {
background: #eee; background: Highlight;
color: #000; color: HighlightText;
} }
.calendar tbody td.hilite { /* Hovered cells <TD> */ .calendar tbody td.hilite { /* Hovered cells <TD> */
@ -109,6 +114,8 @@
border: 1px solid; border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 2px 0px 2px; padding: 2px 2px 0px 2px;
background: ButtonFace;
color: ButtonText;
} }
.calendar tbody td.weekend { /* Cells showing weekend days */ .calendar tbody td.weekend { /* Cells showing weekend days */
@ -178,11 +185,16 @@
padding: 1px; padding: 1px;
} }
.combo .label { .combo .label,
.combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.combo .label-IEfix {
width: 4em;
}
.combo .active { .combo .active {
padding: 0px; padding: 0px;
border: 1px solid #000; border: 1px solid #000;
@ -192,3 +204,40 @@
background: Highlight; background: Highlight;
color: HighlightText; 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; 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
border-left: 2px solid #fff; border-left: 2px solid #fff;
padding: 0px; padding: 0px;
background: #e4e0d8; background-color: #e4e0d8;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff; border-right: 1px solid #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-left: 1px solid #000; border-left: 1px solid #000;
background: #c4c0b8; background-color: #c4c0b8;
} }
/* The body part -- contains all the days in month. */ /* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px; padding: 1px;
} }
.combo .label { .combo .label,
.combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.combo .label-IEfix {
width: 4em;
}
.combo .active { .combo .active {
background: #c4c0b8; background: #c4c0b8;
padding: 0px; padding: 0px;
@ -215,3 +224,40 @@
background: #048; background: #048;
color: #fea; 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; 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
border-left: 2px solid #fff; border-left: 2px solid #fff;
padding: 0px; padding: 0px;
background: #e4d8e0; background-color: #e4d8e0;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff; border-right: 1px solid #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-left: 1px solid #000; border-left: 1px solid #000;
background: #c4b8c0; background-color: #c4b8c0;
} }
/* The body part -- contains all the days in month. */ /* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px; padding: 1px;
} }
.combo .label { .combo .label,
.combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.combo .label-IEfix {
width: 4em;
}
.combo .active { .combo .active {
background: #d4c8d0; background: #d4c8d0;
padding: 0px; padding: 0px;
@ -215,3 +224,40 @@
background: #408; background: #408;
color: #fea; 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; 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
border-left: 2px solid #fff; border-left: 2px solid #fff;
padding: 0px; padding: 0px;
background: #d8e0e4; background-color: #d8e0e4;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff; border-right: 1px solid #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-left: 1px solid #000; border-left: 1px solid #000;
background: #b8c0c4; background-color: #b8c0c4;
} }
/* The body part -- contains all the days in month. */ /* The body part -- contains all the days in month. */
@ -191,11 +195,16 @@
padding: 1px; padding: 1px;
} }
.combo .label { .combo .label,
.combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.combo .label-IEfix {
width: 4em;
}
.combo .active { .combo .active {
background: #c8d0d4; background: #c8d0d4;
padding: 0px; padding: 0px;
@ -209,3 +218,40 @@
background: #048; background: #048;
color: #aef; 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; 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" */ .calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
@ -69,7 +73,7 @@
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
border-left: 2px solid #fff; border-left: 2px solid #fff;
padding: 0px; padding: 0px;
background: #d8e4e0; background-color: #d8e4e0;
} }
.calendar thead .active { /* Active (pressed) buttons in header */ .calendar thead .active { /* Active (pressed) buttons in header */
@ -78,7 +82,7 @@
border-right: 1px solid #fff; border-right: 1px solid #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
border-left: 1px solid #000; border-left: 1px solid #000;
background: #b8c4c0; background-color: #b8c4c0;
} }
/* The body part -- contains all the days in month. */ /* The body part -- contains all the days in month. */
@ -197,11 +201,16 @@
padding: 1px; padding: 1px;
} }
.combo .label { .combo .label,
.combo .label-IEfix {
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.combo .label-IEfix {
width: 4em;
}
.combo .active { .combo .active {
background: #c8d4d0; background: #c8d4d0;
padding: 0px; padding: 0px;
@ -215,3 +224,40 @@
background: #048; background: #048;
color: #aef; 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: * 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 * This script is distributed under the GNU Lesser General Public License.
* Public License, as long as you do not remove or alter this notice. * Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*/ */
// $Id$ // $Id$
@ -17,7 +17,7 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
// member variables // member variables
this.activeDiv = null; this.activeDiv = null;
this.currentDateEl = null; this.currentDateEl = null;
this.checkDisabled = null; this.getDateStatus = null;
this.timeout = null; this.timeout = null;
this.onSelected = onSelected || null; this.onSelected = onSelected || null;
this.onClose = onClose || null; this.onClose = onClose || null;
@ -32,6 +32,8 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
this.mondayFirst = mondayFirst; this.mondayFirst = mondayFirst;
this.dateStr = dateStr; this.dateStr = dateStr;
this.ar_days = null; this.ar_days = null;
this.showsTime = false;
this.time24 = true;
// HTML elements // HTML elements
this.table = null; this.table = null;
this.element = null; this.element = null;
@ -48,19 +50,23 @@ Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
this.dateClicked = false; this.dateClicked = false;
// one-time initializations // one-time initializations
if (!Calendar._DN3) { if (typeof Calendar._SDN == "undefined") {
// table of short day names // table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array(); var ar = new Array();
for (var i = 8; i > 0;) { 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 // table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array(); ar = new Array();
for (var i = 12; i > 0;) { 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) && Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) ); !/opera/i.test(navigator.userAgent) );
// short day names array (initialized at first constructor call) /// detect Opera browser
Calendar._DN3 = null; Calendar.is_opera = /opera/i.test(navigator.userAgent);
// short month names array (initialized at first constructor call) /// detect KHTML-based browsers
Calendar._MN3 = null; Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent);
// BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate
// library, at some point. // library, at some point.
Calendar.getAbsolutePos = function(el) { 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) { if (el.offsetParent) {
var tmp = Calendar.getAbsolutePos(el.offsetParent); var tmp = Calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x; r.x += tmp.x;
@ -147,9 +159,10 @@ Calendar.getTargetElement = function(ev) {
}; };
Calendar.stopEvent = function(ev) { Calendar.stopEvent = function(ev) {
ev || (ev = window.event);
if (Calendar.is_ie) { if (Calendar.is_ie) {
window.event.cancelBubble = true; ev.cancelBubble = true;
window.event.returnValue = false; ev.returnValue = false;
} else { } else {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
@ -162,7 +175,7 @@ Calendar.addEvent = function(el, evname, func) {
el.attachEvent("on" + evname, func); el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C } else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true); el.addEventListener(evname, func, true);
} else { // Opera (or old browsers) } else {
el["on" + evname] = func; el["on" + evname] = func;
} }
}; };
@ -172,7 +185,7 @@ Calendar.removeEvent = function(el, evname, func) {
el.detachEvent("on" + evname, func); el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C } else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true); el.removeEventListener(evname, func, true);
} else { // Opera (or old browsers) } else {
el["on" + evname] = null; el["on" + evname] = null;
} }
}; };
@ -244,9 +257,13 @@ Calendar.showMonthsCombo = function () {
var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()]; var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
Calendar.addClass(mon, "active"); Calendar.addClass(mon, "active");
cal.activeMonth = mon; cal.activeMonth = mon;
mc.style.left = cd.offsetLeft + "px"; var s = mc.style;
mc.style.top = (cd.offsetTop + cd.offsetHeight) + "px"; s.display = "block";
mc.style.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) { Calendar.showYearsCombo = function (fwd) {
@ -280,9 +297,13 @@ Calendar.showYearsCombo = function (fwd) {
Y += fwd ? 2 : -2; Y += fwd ? 2 : -2;
} }
if (show) { if (show) {
yc.style.left = cd.offsetLeft + "px"; var s = yc.style;
yc.style.top = (cd.offsetTop + cd.offsetHeight) + "px"; s.display = "block";
yc.style.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; return false;
} }
var target = Calendar.getTargetElement(ev); var target = Calendar.getTargetElement(ev);
ev || (ev = window.event);
Calendar.removeClass(el, "active"); Calendar.removeClass(el, "active");
if (target == el || target.parentNode == el) { if (target == el || target.parentNode == el) {
Calendar.cellClick(el); Calendar.cellClick(el, ev);
} }
var mon = Calendar.findMonth(target); var mon = Calendar.findMonth(target);
var date = null; var date = null;
@ -348,10 +370,42 @@ Calendar.tableMouseOver = function (ev) {
Calendar.addClass(el, "hilite active"); Calendar.addClass(el, "hilite active");
Calendar.addClass(el.parentNode, "rowhilite"); Calendar.addClass(el.parentNode, "rowhilite");
} else { } else {
Calendar.removeClass(el, "active"); 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, "hilite");
Calendar.removeClass(el.parentNode, "rowhilite"); 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); var mon = Calendar.findMonth(target);
if (mon) { if (mon) {
if (mon.month != cal.date.getMonth()) { if (mon.month != cal.date.getMonth()) {
@ -364,6 +418,9 @@ Calendar.tableMouseOver = function (ev) {
Calendar.removeClass(cal.hilitedMonth, "hilite"); Calendar.removeClass(cal.hilitedMonth, "hilite");
} }
} else { } else {
if (cal.hilitedMonth) {
Calendar.removeClass(cal.hilitedMonth, "hilite");
}
var year = Calendar.findYear(target); var year = Calendar.findYear(target);
if (year) { if (year) {
if (year.year != cal.date.getFullYear()) { if (year.year != cal.date.getFullYear()) {
@ -375,6 +432,8 @@ Calendar.tableMouseOver = function (ev) {
} else if (cal.hilitedYear) { } else if (cal.hilitedYear) {
Calendar.removeClass(cal.hilitedYear, "hilite"); Calendar.removeClass(cal.hilitedYear, "hilite");
} }
} else if (cal.hilitedYear) {
Calendar.removeClass(cal.hilitedYear, "hilite");
} }
} }
return Calendar.stopEvent(ev); return Calendar.stopEvent(ev);
@ -431,6 +490,8 @@ Calendar.dayMouseDown = function(ev) {
cal.activeDiv = el; cal.activeDiv = el;
Calendar._C = cal; Calendar._C = cal;
if (el.navtype != 300) with (Calendar) { if (el.navtype != 300) with (Calendar) {
if (el.navtype == 50)
el._current = el.firstChild.data;
addClass(el, "hilite active"); addClass(el, "hilite active");
addEvent(document, "mouseover", tableMouseOver); addEvent(document, "mouseover", tableMouseOver);
addEvent(document, "mousemove", tableMouseOver); addEvent(document, "mousemove", tableMouseOver);
@ -439,8 +500,10 @@ Calendar.dayMouseDown = function(ev) {
cal._dragStart(ev); cal._dragStart(ev);
} }
if (el.navtype == -1 || el.navtype == 1) { if (el.navtype == -1 || el.navtype == 1) {
if (cal.timeout) clearTimeout(cal.timeout);
cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250); cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250);
} else if (el.navtype == -2 || el.navtype == 2) { } 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); cal.timeout = setTimeout((el.navtype > 0) ? "Calendar.showYearsCombo(true)" : "Calendar.showYearsCombo(false)", 250);
} else { } else {
cal.timeout = null; cal.timeout = null;
@ -449,7 +512,7 @@ Calendar.dayMouseDown = function(ev) {
}; };
Calendar.dayMouseDblClick = function(ev) { Calendar.dayMouseDblClick = function(ev) {
Calendar.cellClick(Calendar.getElement(ev)); Calendar.cellClick(Calendar.getElement(ev), ev || window.event);
if (Calendar.is_ie) { if (Calendar.is_ie) {
document.selection.empty(); document.selection.empty();
} }
@ -498,7 +561,7 @@ Calendar.dayMouseOut = function(ev) {
* A generic "click" handler :) handles all types of buttons defined in this * A generic "click" handler :) handles all types of buttons defined in this
* calendar. * calendar.
*/ */
Calendar.cellClick = function(el) { Calendar.cellClick = function(el, ev) {
var cal = el.calendar; var cal = el.calendar;
var closing = false; var closing = false;
var newdate = false; var newdate = false;
@ -525,7 +588,8 @@ Calendar.cellClick = function(el) {
// unless "today" was clicked, we assume no date was clicked so // unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when // the selected handler will know not to close the calenar when
// in single-click mode. // in single-click mode.
cal.dateClicked = (el.navtype == 0); // cal.dateClicked = (el.navtype == 0);
cal.dateClicked = false;
var year = date.getFullYear(); var year = date.getFullYear();
var mon = date.getMonth(); var mon = date.getMonth();
function setMonth(m) { function setMonth(m) {
@ -537,6 +601,22 @@ Calendar.cellClick = function(el) {
date.setMonth(m); date.setMonth(m);
}; };
switch (el.navtype) { 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: case -2:
if (year > cal.minYear) { if (year > cal.minYear) {
date.setFullYear(year - 1); date.setFullYear(year - 1);
@ -566,9 +646,24 @@ Calendar.cellClick = function(el) {
case 100: case 100:
cal.setMondayFirst(!cal.mondayFirst); cal.setMondayFirst(!cal.mondayFirst);
return; 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: case 0:
// TODAY will bring us here // 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 // remember, "date" was previously set to new
// Date() if TODAY was clicked; thus, it // Date() if TODAY was clicked; thus, it
// contains today date. // contains today date.
@ -638,6 +733,8 @@ Calendar.prototype.create = function (_par) {
cell = Calendar.createElement("td", row); cell = Calendar.createElement("td", row);
cell.colSpan = cs; cell.colSpan = cs;
cell.className = "button"; cell.className = "button";
if (navtype != 0 && Math.abs(navtype) <= 2)
cell.className += " nav";
Calendar._add_evs(cell); Calendar._add_evs(cell);
cell.calendar = cal; cell.calendar = cal;
cell.navtype = navtype; cell.navtype = navtype;
@ -656,7 +753,7 @@ Calendar.prototype.create = function (_par) {
(this.isPopup) && --title_length; (this.isPopup) && --title_length;
(this.weekNumbers) && ++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 = hh("", title_length, 300);
this.title.className = "title"; this.title.className = "title";
if (this.isPopup) { 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); var tfoot = Calendar.createElement("tfoot", table);
row = Calendar.createElement("tr", tfoot); row = Calendar.createElement("tr", tfoot);
@ -738,9 +925,9 @@ Calendar.prototype.create = function (_par) {
div.className = "combo"; div.className = "combo";
for (i = 0; i < Calendar._MN.length; ++i) { for (i = 0; i < Calendar._MN.length; ++i) {
var mn = Calendar.createElement("div"); var mn = Calendar.createElement("div");
mn.className = "label"; mn.className = Calendar.is_ie ? "label-IEfix" : "label";
mn.month = i; mn.month = i;
mn.appendChild(document.createTextNode(Calendar._MN3[i])); mn.appendChild(document.createTextNode(Calendar._SMN[i]));
div.appendChild(mn); div.appendChild(mn);
} }
@ -749,7 +936,7 @@ Calendar.prototype.create = function (_par) {
div.className = "combo"; div.className = "combo";
for (i = 12; i > 0; --i) { for (i = 12; i > 0; --i) {
var yr = Calendar.createElement("div"); var yr = Calendar.createElement("div");
yr.className = "label"; yr.className = Calendar.is_ie ? "label-IEfix" : "label";
yr.appendChild(document.createTextNode("")); yr.appendChild(document.createTextNode(""));
div.appendChild(yr); div.appendChild(yr);
} }
@ -874,7 +1061,7 @@ Calendar.prototype._init = function (mondayFirst, date) {
} }
var iday = 1; var iday = 1;
var row = this.tbody.firstChild; var row = this.tbody.firstChild;
var MN = Calendar._MN3[month]; var MN = Calendar._SMN[month];
var hasToday = ((today.getFullYear() == year) && (today.getMonth() == month)); var hasToday = ((today.getFullYear() == year) && (today.getMonth() == month));
var todayDate = today.getDate(); var todayDate = today.getDate();
var week_number = date.getWeekNumber(); var week_number = date.getWeekNumber();
@ -904,11 +1091,16 @@ Calendar.prototype._init = function (mondayFirst, date) {
} }
cell.disabled = false; cell.disabled = false;
cell.firstChild.data = iday; cell.firstChild.data = iday;
if (typeof this.checkDisabled == "function") { if (typeof this.getDateStatus == "function") {
date.setDate(iday); date.setDate(iday);
if (this.checkDisabled(date)) { var status = this.getDateStatus(date, year, month, iday);
if (status === true) {
cell.className += " disabled"; cell.className += " disabled";
cell.disabled = true; cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
} }
} }
if (!cell.disabled) { if (!cell.disabled) {
@ -935,6 +1127,7 @@ Calendar.prototype._init = function (mondayFirst, date) {
} }
this.ar_days = ar_days; this.ar_days = ar_days;
this.title.firstChild.data = Calendar._MN[month] + ", " + year; this.title.firstChild.data = Calendar._MN[month] + ", " + year;
this.onSetTime();
// PROFILE // PROFILE
// this.tooltips.firstChild.data = "Generated in " + ((new Date()) - today) + " ms"; // 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 * object) and returns a boolean value. If the returned value is true then
* the passed date will be marked as disabled. * the passed date will be marked as disabled.
*/ */
Calendar.prototype.setDisabledHandler = function (unaryFunction) { Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.checkDisabled = unaryFunction; this.getDateStatus = unaryFunction;
}; };
/** Customization of allowed year range for the calendar. */ /** Customization of allowed year range for the calendar. */
@ -1001,6 +1194,7 @@ Calendar.prototype.destroy = function () {
var el = this.element.parentNode; var el = this.element.parentNode;
el.removeChild(this.element); el.removeChild(this.element);
Calendar._C = null; Calendar._C = null;
window.calendar = null;
}; };
/** /**
@ -1082,37 +1276,44 @@ Calendar.prototype.showAt = function (x, y) {
/** Shows the calendar near a given element. */ /** Shows the calendar near a given element. */
Calendar.prototype.showAtElement = function (el, opts) { Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el); var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") { if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight); this.showAt(p.x, p.y + el.offsetHeight);
return true; return true;
} }
this.show(); this.element.style.display = "block";
var w = this.element.offsetWidth; Calendar.continuation_for_the_fucking_khtml_browser = function() {
var h = this.element.offsetHeight; var w = self.element.offsetWidth;
this.hide(); var h = self.element.offsetHeight;
var valign = opts.substr(0, 1); self.element.style.display = "none";
var halign = "l"; var valign = opts.substr(0, 1);
if (opts.length > 1) { var halign = "l";
halign = opts.substr(1, 1); if (opts.length > 1) {
} halign = opts.substr(1, 1);
// vertical alignment }
switch (valign) { // vertical alignment
case "T": p.y -= h; break; switch (valign) {
case "B": p.y += el.offsetHeight; break; case "T": p.y -= h; break;
case "C": p.y += (el.offsetHeight - h) / 2; break; case "B": p.y += el.offsetHeight; break;
case "t": p.y += el.offsetHeight - h; break; case "C": p.y += (el.offsetHeight - h) / 2; break;
case "b": break; // already there case "t": p.y += el.offsetHeight - h; break;
} case "b": break; // already there
// horizontal alignment }
switch (halign) { // horizontal alignment
case "L": p.x -= w; break; switch (halign) {
case "R": p.x += el.offsetWidth; break; case "L": p.x -= w; break;
case "C": p.x += (el.offsetWidth - w) / 2; break; case "R": p.x += el.offsetWidth; break;
case "r": p.x += el.offsetWidth - w; break; case "C": p.x += (el.offsetWidth - w) / 2; break;
case "l": break; // already there 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. */ /** Customizes the date format. */
@ -1137,30 +1338,42 @@ Calendar.prototype.parseDate = function (str, fmt) {
if (!fmt) { if (!fmt) {
fmt = this.dateFormat; 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 i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) { for (i = 0; i < a.length; ++i) {
if (b[i] == "D" || b[i] == "DD") { if (b[i] == "%a" || b[i] == "%A") {
continue; continue;
} }
if (b[i] == "d" || b[i] == "dd") { if (b[i] == "%d" || b[i] == "%e") {
d = parseInt(a[i], 10); d = parseInt(a[i], 10);
} }
if (b[i] == "m" || b[i] == "mm") { if (b[i] == "%m") {
m = parseInt(a[i], 10) - 1; 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 = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000); (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) { for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; } 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) { 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; return;
} }
y = 0; m = -1; d = 0; y = 0; m = -1; d = 0;
@ -1190,61 +1403,70 @@ Calendar.prototype.parseDate = function (str, fmt) {
y = today.getFullYear(); y = today.getFullYear();
} }
if (m != -1 && d != 0) { 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 () { Calendar.prototype.hideShowCovered = function () {
function getStyleProp(obj, style){ var self = this;
var value = obj.style[style]; Calendar.continuation_for_the_fucking_khtml_browser = function() {
if (!value) { function getVisib(obj){
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C var value = obj.style.visibility;
value = document.defaultView. if (!value) {
getComputedStyle(obj, "").getPropertyValue(style); if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
} else if (obj.currentStyle) { // IE if (!Calendar.is_khtml)
value = obj.currentStyle[style]; value = document.defaultView.
} else { getComputedStyle(obj, "").getPropertyValue("visibility");
value = obj.style[style]; else
value = '';
} else if (obj.currentStyle) { // IE
value = obj.currentStyle.visibility;
} else
value = '';
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = self.element;
var p = Calendar.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;
for (var k = tags.length; k > 0; ) {
var ar = document.getElementsByTagName(tags[--k]);
var cc = null;
for (var i = ar.length; i > 0;) {
cc = ar[--i];
p = Calendar.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if (self.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getVisib(cc);
}
cc.style.visibility = cc.__msh_save_visibility;
} else {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getVisib(cc);
}
cc.style.visibility = "hidden";
}
} }
} }
return value;
}; };
if (Calendar.is_khtml)
var tags = new Array("applet", "iframe", "select"); setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
var el = this.element; else
Calendar.continuation_for_the_fucking_khtml_browser();
var p = Calendar.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;
for (var k = tags.length; k > 0; ) {
var ar = document.getElementsByTagName(tags[--k]);
var cc = null;
for (var i = ar.length; i > 0;) {
cc = ar[--i];
p = Calendar.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getStyleProp(cc, "visibility");
}
cc.style.visibility = cc.__msh_save_visibility;
} else {
if (!cc.__msh_save_visibility) {
cc.__msh_save_visibility = getStyleProp(cc, "visibility");
}
cc.style.visibility = "hidden";
}
}
}
}; };
/** Internal function; it displays the bar with the names of the weekday. */ /** Internal function; it displays the bar with the names of the weekday. */
@ -1264,7 +1486,7 @@ Calendar.prototype._displayWeekdays = function () {
if (i == SUN || i == SAT) { if (i == SUN || i == SAT) {
Calendar.addClass(cell, "weekend"); Calendar.addClass(cell, "weekend");
} }
cell.firstChild.data = Calendar._DN3[i + 1 - MON]; cell.firstChild.data = Calendar._SDN[i + 1 - MON];
cell = cell.nextSibling; 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 /** Returns the number of day in the year. */
* website, hope it's correct :) http://www.xs4all.nl/~ppk/js/week.html */ 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() { Date.prototype.getWeekNumber = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); 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 then = new Date(this.getFullYear(), 0, 1, 0, 0, 0);
var time = now - then; var time = now - then;
var day = then.getDay(); var day = then.getDay(); // 0 means Sunday
(day > 3) && (day -= 4) || (day += 3); if (day == 0) day = 7;
(day > 4) && (day -= 4) || (day += 3);
return Math.round(((time / Date.DAY) + day) / 7); return Math.round(((time / Date.DAY) + day) / 7);
}; };
@ -1340,37 +1570,69 @@ Date.prototype.getWeekNumber = function() {
Date.prototype.equalsTo = function(date) { Date.prototype.equalsTo = function(date) {
return ((this.getFullYear() == date.getFullYear()) && return ((this.getFullYear() == date.getFullYear()) &&
(this.getMonth() == date.getMonth()) && (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. */ /** Prints the date in a string according to the given format. */
Date.prototype.print = function (frm) { Date.prototype.print = function (str) {
var str = new String(frm);
var m = this.getMonth(); var m = this.getMonth();
var d = this.getDate(); var d = this.getDate();
var y = this.getFullYear(); var y = this.getFullYear();
var wn = this.getWeekNumber(); var wn = this.getWeekNumber();
var w = this.getDay(); var w = this.getDay();
var s = new Array(); var s = {};
s["d"] = d; var hr = this.getHours();
s["dd"] = (d < 10) ? ("0" + d) : d; var pm = (hr >= 12);
s["m"] = 1+m; var ir = (pm) ? (hr - 12) : hr;
s["mm"] = (m < 9) ? ("0" + (1+m)) : (1+m); var dy = this.getDayOfYear();
s["y"] = y; if (ir == 0)
s["yy"] = new String(y).substr(2, 2); ir = 12;
s["w"] = wn; var min = this.getMinutes();
s["ww"] = (wn < 10) ? ("0" + wn) : wn; var sec = this.getSeconds();
with (Calendar) { s["%a"] = Calendar._SDN[w]; // abbreviated weekday name [FIXME: I18N]
s["D"] = _DN3[w]; s["%A"] = Calendar._DN[w]; // full weekday name
s["DD"] = _DN[w]; s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["M"] = _MN3[m]; s["%B"] = Calendar._MN[m]; // full month name
s["MM"] = _MN[m]; // 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|$)(.*)/; return str.replace(re, function(match, par) { return s[par]; });
while (re.exec(str) != null) {
str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
}
return str;
}; };
// END: DATE OBJECT PATCHES // 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>
<p>
</p> </p>
<h1 class=title align=center><br><br>DHTML Calendar Widget</h1> <h1 class=title align=center><br><br>DHTML Calendar Widget</h1>
<p></p> <p></p>
<div align=center> <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></p>
<p> <p>
<span class=small>calendar version: 0.9.3<br> <span class=small>calendar version: 0.9.5 &#8220;Your favorite time, bis&#8221;</span>
document version: 0.1
</span>
</p> </p>
</div> </div>
<p></p> <p></p>
<p> <p>
<span class=small><code class=verbatim>$Id$</code></span>
</p> </p>
<span class=small><blockquote> <span class=small><blockquote>
<div align=right><table><tr><td> <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> </td></tr></table></div>
</blockquote></span> </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.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.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.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.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.showAt</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.showAtElement</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.setDate</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.setMondayFirst</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.parseDate</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.setRange</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>
<p><b> <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> &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>
<p><b> <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> <p>
</p> </p>
@ -121,7 +119,7 @@ maintained.&#8221;<br>
<a name="node_sec_1"></a> <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> <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 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 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 &#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 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> <p>
The calendar is compatible with most popular browsers nowadays. While it&#8217;s 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 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, 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> <p>
You can find the latest info and version at the calendar homepage:</p> You can find the latest info and version at the calendar homepage:</p>
<p> <p>
</p> </p>
<div align=center><table><tr><td> <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> </td></tr></table></div>
<p> <p>
</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 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. 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 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> <p>
Using DOM calls, the program dynamically creates a <tt>&lt;table&gt;</tt> element 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 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> <div align=center><table><tr><td>
&copy; Mihai Bazon, 2002 &#8211; 2003, <tt>&lt;mishoo@infoiasi.ro&gt;</tt><br> &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> </td></tr></table></div>
<p> <p>
The calendar is released under the The calendar is released under the
<a href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public <a href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a>. You
License</a>. This basically means that you are allowed to use it for anything you can <a href="http://www.gnu.org/licenses/lgpl.html">read the entire license text
like, except selling it for profit or claiming it&#8217;s authorship. You can read here</a>.</p>
the entire license text <a href="http://www.gnu.org/licenses/lgpl.html">here</a>.</p>
<p> <p>
</p> </p>
<a name="node_sec_2"></a> <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> <p>
Installing the calendar used to be quite a task until version 0.9.3. Starting 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 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> <p>
First you have to include the needed scripts and style-sheet. Make sure you do 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 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> </td></tr>
<tr><td valign=top ><tt>ifFormat</tt> <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 >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> </td></tr>
<tr><td valign=top ><tt>daFormat</tt> <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 >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> </td></tr>
<tr><td valign=top ><tt>singleClick</tt> <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. </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> <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 </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. <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><td valign=top >null
</td></tr> </td></tr>
<tr><td valign=top ><tt>mondayFirst</tt> <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 >boolean </td><td valign=top >If <tt>true</tt> (default) then the calendar will display with
</td><td valign=top >false 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> </td></tr>
<tr><td valign=top ><tt>weekNumbers</tt> <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. </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 reference element is dynamically chosen like this: if a displayArea is
specified then it will be the reference element. Otherwise, the input field specified then it will be the reference element. Otherwise, the input field
is the reference element. For the meaning of the alignment characters 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><td valign=top >&#8220;Bl&#8221;
</td></tr> </td></tr>
<tr><td valign=top ><tt>range</tt> <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> <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 </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 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><td valign=top >null
</td></tr> </td></tr>
<tr><td valign=top ><tt>flatCallback</tt> <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 the calendar object. See section <a href="#node_sec_2.2">2.2</a> for an example
of how to setup a flat calendar. of how to setup a flat calendar.
</td><td valign=top >null </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> </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> <h1><a href="#node_toc_node_sec_3">3&nbsp;&nbsp;The Calendar object overview</a></h1><p></p>
<p> <p>
Basically you should be able to setup the calendar with the function presented 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 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 the process of creating and configuring the calendar &#8220;by hand&#8221;, then this
section is the way to go.</p> section is the way to go.</p>
@ -417,13 +470,18 @@ calendar, for instance:</p>
<p> <p>
</p> </p>
<pre class=verbatim>cal.weekNumbers = false; // do not display week numbers <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.showsTime = true; // include a time selector
cal.setDisabledHandler(function(date) { 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 // 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 // disable all dates from 2004
return false; return true;
} }
return false;
}); });
</pre><p></p> </pre><p></p>
<p> <p>
@ -437,7 +495,8 @@ that you provided.</p>
<a name="node_sec_3.1"></a> <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 <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 <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>
</p> </p>
<ol><p> <ol><p>
@ -446,22 +505,31 @@ same):</p>
section <a href="#node_sec_4.1">4.1</a>.</p> section <a href="#node_sec_4.1">4.1</a>.</p>
<p> <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 <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. This step must take place <em>before</em> the calendar to display week numbers.</p>
calling <tt>Calendar.create</tt>.</p>
<p> <p>
</p> </p>
<li><p><b>optional</b>&nbsp;&nbsp; Set the range of years available for selection (see section <li><p><b>opt</b>&nbsp;&nbsp; Set the <tt>showsTime</tt> property to <tt>true</tt> if you
<a href="#node_sec_4.3.14">4.3.14</a>). The default range is [1970..2050].</p> want the calendar to also provide a time selector.</p>
<p> <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 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 <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> section <a href="#node_sec_4.3.7">4.3.7</a>).</p>
<p> <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 calendar constructor, will be called when a date is selected with a reference
to the calendar and a date string in this format.</p> to the calendar and a date string in this format.</p>
<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> create a flat calendar (details in section <a href="#node_sec_4.3.1">4.3.1</a>).</p>
<p> <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> the input field.</p>
<p> <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>
</p> </p>
</ol><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 call &#8220;<tt>hide</tt>&#8221; on it, therefore keeping the JavaScript object and the
HTML elements in place.</p> HTML elements in place.</p>
<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> </p>
<a name="node_sec_3.4"></a> <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? <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> <a href="#node_sec_4.1">4.1</a>.</p>
<p> <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> 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 object and should return <tt>true</tt> if that date should be disabled, false
or false otherwise. Details in section <a href="#node_sec_4.3.7">4.3.7</a>.</p> 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>
</p> </p>
</ul><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> variable to <tt>false</tt> <em>before</em> calling <tt>Calendar.create</tt>.</p>
<p> <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 <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, 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 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> your &#8220;onSelect&#8221; handler. Call it like this:</p>
<p> <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> </pre><p></p>
<p> <p>
As you can see, it receives only one parameter, the required format. The magic 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>
</p> </p>
<table border=0><tr><td valign=top ></td></tr> <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 ><tt>%a</tt> </td><td valign=top >abbreviated weekday name </td></tr>
<tr><td valign=top >dd </td><td valign=top >the date, zero padded ( ex: 01 .. 31 ) </td></tr> <tr><td valign=top ><tt>%A</tt> </td><td valign=top >full weekday name </td></tr>
<tr><td valign=top >m </td><td valign=top >month as a number ( ex: 1 .. 12 ) </td></tr> <tr><td valign=top ><tt>%b</tt> </td><td valign=top >abbreviated month name </td></tr>
<tr><td valign=top >mm </td><td valign=top >month, zero padded ( ex: 01 .. 12 ) </td></tr> <tr><td valign=top ><tt>%B</tt> </td><td valign=top >full month name </td></tr>
<tr><td valign=top >y </td><td valign=top >4 digit year ( ex: 1979 ) </td></tr> <tr><td valign=top ><tt>%C</tt> </td><td valign=top >century number </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 ><tt>%d</tt> </td><td valign=top >the day of the month ( 00 .. 31 ) </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 ><tt>%e</tt> </td><td valign=top >the day of the month ( 0 .. 31 ) </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 ><tt>%H</tt> </td><td valign=top >hour ( 00 .. 23 ) </td></tr>
<tr><td valign=top >D </td><td valign=top >short weekday name ( ex: Sun, Wed, Fri ) </td></tr> <tr><td valign=top ><tt>%I</tt> </td><td valign=top >hour ( 01 .. 12 ) </td></tr>
<tr><td valign=top >DD </td><td valign=top >long weekday name ( ex: Sunday, Wednesday, Friday ) </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 >M </td><td valign=top >short month name ( ex: Mar, Jan, Oct ) </td></tr> <tr><td valign=top ><tt>%k</tt> </td><td valign=top >hour ( 0 .. 23 ) </td></tr>
<tr><td valign=top >MM </td><td valign=top >long month name ( ex: March, January, October )</td></tr> <tr><td valign=top ><tt>%l</tt> </td><td valign=top >hour ( 1 .. 12 ) </td></tr>
<tr><td valign=top ></td></tr> <tr><td valign=top ><tt>%m</tt> </td><td valign=top >month ( 01 .. 12 ) </td></tr>
<tr><td valign=top ></td></tr></table><p> <tr><td valign=top ><tt>%M</tt> </td><td valign=top >minute ( 00 .. 59 ) </td></tr>
<font color="red"><b>WARNING!</b></font>&nbsp;&nbsp;&nbsp;&nbsp;The format specifiers are likely to change. <tr><td valign=top ><tt>%n</tt> </td><td valign=top >a newline character </td></tr>
The current is a complete mess, in that that, for instance, you can&#8217;t have a <tr><td valign=top ><tt>%p</tt> </td><td valign=top >&#8220;PM&#8221; or &#8220;AM&#8221; </td></tr>
format like this: &#8220;ymmdd&#8221;&#8212;you have to separate them through non-word <tr><td valign=top ><tt>%P</tt> </td><td valign=top >&#8220;pm&#8221; or &#8220;am&#8221; </td></tr>
characters, like for example &#8220;y-mm-dd&#8221;. In next versions of calendar the <tr><td valign=top ><tt>%S</tt> </td><td valign=top >second ( 00 .. 59 ) </td></tr>
format will probably use a &#8220;%&#8221; prefix, like in <tt>strftime</tt> from <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>
ANSI-C, so the format above will be possible to write like this: <tr><td valign=top ><tt>%t</tt> </td><td valign=top >a tab character </td></tr>
&#8220;%y%mm%dd&#8221;.</p> <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>
</p> </p>
<a name="node_sec_4.3.6"></a> <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 (for instance, to call it once per month and to return an array of dates that
must be disabled).</p> must be disabled).</p>
<p> <p>
This function should be considered deprecated in the favor of
<tt>Calendar.setDateStatusHandler</tt>, described below.</p>
<p>
</p> </p>
<a name="node_sec_4.3.8"></a> <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> <p>
Call this function do show the calendar. It basically sets the CSS &#8220;display&#8221; 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> 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> This function only makes sense when the calendar is in popup mode.</p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.9"></a> <a name="node_sec_4.3.10"></a>
<h3><a href="#node_toc_node_sec_4.3.9">4.3.9&nbsp;&nbsp;<tt>Calendar.showAt</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAt</tt></a></h3><p></p>
<p> <p>
Call this to show the calendar at a certain (x, y) position. Prototype:</p> Call this to show the calendar at a certain (x, y) position. Prototype:</p>
<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> makes sense when the calendar is in popup mode.</p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.10"></a> <a name="node_sec_4.3.11"></a>
<h3><a href="#node_toc_node_sec_4.3.10">4.3.10&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.showAtElement</tt></a></h3><p></p>
<p> <p>
This function is useful if you want to display the calendar near some element. This function is useful if you want to display the calendar near some element.
You call it like this:</p> 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> 0.9.3) which did not support custom alignment.</p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.11"></a> <a name="node_sec_4.3.12"></a>
<h3><a href="#node_toc_node_sec_4.3.11">4.3.11&nbsp;&nbsp;<tt>Calendar.setDate</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setDate</tt></a></h3><p></p>
<p> <p>
Receives a JavaScript <tt>Date</tt> object. Sets the given date in the 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> 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> </pre><p></p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.12"></a> <a name="node_sec_4.3.13"></a>
<h3><a href="#node_toc_node_sec_4.3.12">4.3.12&nbsp;&nbsp;<tt>Calendar.setMondayFirst</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.setMondayFirst</tt></a></h3><p></p>
<p> <p>
Changes the first day of week. If the parameter is <tt>true</tt> then Monday 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> 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> </pre><p></p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.13"></a> <a name="node_sec_4.3.14"></a>
<h3><a href="#node_toc_node_sec_4.3.13">4.3.13&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.parseDate</tt></a></h3><p></p>
<p> <p>
Use this function to parse a date given as string and to move the calendar to Use this function to parse a date given as string and to move the calendar to
that date.</p> 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> </pre><p></p>
<p> <p>
</p> </p>
<a name="node_sec_4.3.14"></a> <a name="node_sec_4.3.15"></a>
<h3><a href="#node_toc_node_sec_4.3.14">4.3.14&nbsp;&nbsp;<tt>Calendar.setRange</tt></a></h3><p></p> <h3><a href="#node_toc_node_sec_4.3.15">4.3.15&nbsp;&nbsp;<tt>Calendar.setRange</tt></a></h3><p></p>
<p> <p>
Sets the range of years that are allowed in the calendar. Synopsis:</p> Sets the range of years that are allowed in the calendar. Synopsis:</p>
<p> <p>
@ -1075,15 +1238,18 @@ specified in section <a href="#node_sec_4.3.5">4.3.5</a>.</p>
<p> <p>
</p> </p>
<a name="node_sec_6"></a> <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 <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
developer licenses (listed in reverse chronological order). Your name could be here commercial licenses (listed in reverse chronological order). Your name could
too! If you wish to sponsor the project (for instance request a feature and be here too! If you wish to sponsor the project (for instance request a
pay me for implementing it) or donate some money please 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> <em>please</em> contact me at <tt><a href="mailto:mishoo@infoiasi.ro">mishoo@infoiasi.ro</a></tt>.</p>
<p> <p>
</p> </p>
<ul><p> <ul><p>
</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> <li><p>Seyhan Ersoy (<a href="http://www.oocgi.com">http://www.oocgi.com</a>)</p>
<p> <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> <p><a name="footnote_Temp_5"></a><a href="#call_footnote_Temp_5"><sup><small>4</small></sup></a> user interface</p>
</div> </div>
<div align=right class=colophon> <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> HTML conversion by <a href="http://www.ccs.neu.edu/~dorai/tex2page/tex2page-doc.html">TeX2page 4r8f</a></i>
</div> </div>
</body> </body>

View File

@ -1,13 +1,10 @@
<!-- <?xml version="1.0" encoding="iso-8859-2"?>
< ? 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">
< ! DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<!-- $Id$ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<!-- $Id$ -->
<head> <head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>The Coolest DHTML Calendar - Online Demo</title> <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-blue.css" title="winter" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-brown.css" title="summer" /> <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-win2k-cold-2.css" title="win2k-cold-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-system.css" title="system" /> <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 --> <!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script> <script type="text/javascript" src="calendar.js"></script>
<!-- import the language module --> <!-- import the language module -->
<script type="text/javascript" src="lang/calendar-en.js"></script> <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 <!-- other languages might be available in the lang directory; please check
your distribution archive. --> your distribution archive. -->
@ -69,21 +58,27 @@ function selected(cal, date) {
// destroying it. // destroying it.
function closeHandler(cal) { function closeHandler(cal) {
cal.hide(); // hide the calendar cal.hide(); // hide the calendar
cal.destroy();
calendar = null;
} }
// This function shows the calendar under the element having the given id. // This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the // It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside. // calendar if the click was outside.
function showCalendar(id, format) { function showCalendar(id, format, showsTime) {
var el = document.getElementById(id); var el = document.getElementById(id);
if (calendar != null) { if (calendar != null) {
// we already have some calendar created // we already have some calendar created
calendar.hide(); // so we hide it first. calendar.hide(); // so we hide it first.
} else { } else {
// first-time call, create the calendar. // 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 // uncomment the following line to hide the week numbers
// cal.weekNumbers = false; // cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
calendar = cal; // remember it in the global var calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed. cal.setRange(1900, 2070); // min/max year allowed.
cal.create(); cal.create();
@ -129,14 +124,14 @@ function showFlatCalendar() {
var parent = document.getElementById("display"); var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler. // 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 // hide week numbers
cal.weekNumbers = false; cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above // We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled); 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 // 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, // we specify a parent, as opposite to the "showCalendar" function above,
@ -151,7 +146,8 @@ function showFlatCalendar() {
<style type="text/css"> <style type="text/css">
.ex { font-weight: bold; background: #fed; color: #080 } .ex { font-weight: bold; background: #fed; color: #080 }
.help { color: #080; font-style: italic; } .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 { color: #00f; }
a:visited { color: #00f; } a:visited { color: #00f; }
a:hover { color: #f00; background: #fefaf0; } a:hover { color: #f00; background: #fefaf0; }
@ -163,16 +159,19 @@ padding: 0px 5px; cursor: default; font-size: 80%; }
</head> </head>
<body onload="showFlatCalendar()"> <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, 'winter');">winter</a>
| |
<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a> <a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
| |
<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</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="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
| |
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</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-1');">win2k-cold-1</a>
| |
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a> <a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
| <br />
<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a> <a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
<script type="text/javascript"> <script type="text/javascript">
setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1"); setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1");
</script> </script>
] </div>
<a href="release-notes.html">Release notes</a>.
<br /> <br />
<a href="release-notes.html">Release notes for 0.9.3</a> Set it up in minutes:
<br />
Setup a calendar in minutes:
<a href="simple-1.html">popup calendar</a>, <a href="simple-1.html">popup calendar</a>,
<a href="simple-2.html">flat calendar</a>. <a href="simple-2.html">flat calendar</a>.
<br /> <br />
Documentation: Documentation:
<a href="doc/html/reference.html">HTML</a>, <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> </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;"> <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> </div>
<table style="width: 100%">
<tr valign="top">
<td style="background: #ffa; padding: 5px; border: 1px solid #995;">
<form action="#"> <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 Popup examples
</div> </div>
@ -255,12 +215,12 @@ Popup examples
<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30" <b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
><input type="reset" value=" ... " ><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 /> click<br />
<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30" <b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
><input type="reset" value=" ... " ><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 -- double click
<br /><br /> <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" <b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
><input type="reset" value=" ... " ><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 -- single click
<br /> <br />
<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30" <b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
><input type="reset" value=" ... " ><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 double click
</div>
</form> </form>
<p>You can find more information about this script (and how to use/customize <p>This is release <b>0.9.5</b>. Works on MSIE/Win 5.0 or better, Opera 7,
it) <a href="http://students.infoiasi.ro/~mishoo/site/calendar.epl">on my Mozilla, Netscape 6.x, 7.0 and all other Gecko-s, Konqueror and Safari.</p>
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 class="help">You can click on "Mo"/"Su" (first day name displayed) to <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 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 <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 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> <ul>
@ -330,49 +285,39 @@ dates (only for popup calendars; does <em>not</em> work with Opera
</ul> </ul>
<h4>Date formatting</h4> </td>
<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>
<p>The algorithm will first try to read the date in the specified <td style="padding: 5px; margin: 5px; border: 1px solid #984; background: #ed9; width: 15em;">
format.</p>
<p>If it doesn't work, it will try different methods to recognize a valid <div style="background: #984; color: #fea; font-weight: bold; padding: 2px; text-align: center">
date -- general behavior is: if some part of the input is the <em>name</em> Flat calendar
of a month, i.e. "Mar", then that will be considered the month, the </div>
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>
<p>Examples: <span class="ex">3/8/1979</span> as well as <span class="ex">03 <p style="width: 12em"><small>A non-popup version will appear below as soon
08 79</span> as well as <span class="ex">1979 mar 8</span>, as well as <span as the page is loaded. Note that it doesn't show the week number.</small></p>
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>
<hr /><address> Author: <a href="http://students.infoiasi.ro/~mishoo/">Mihai <!-- the calendar will be inserted here -->
Bazon</a> &copy; 2002<br /> Feel free to use / redistribute under the <a <div id="display" style="float: right; clear: both;"></div>
href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.<br /> Please no <div id="preview" style="font-size: 80%; text-align: center; padding: 2px"></div>
<b>not</b> remove or alter the comment at the script start.</address>
<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 <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 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 // ** 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 Calendar._DN = new Array
("Sunday", ("Sunday",
"Monday", "Monday",
@ -8,6 +19,31 @@ Calendar._DN = new Array
"Friday", "Friday",
"Saturday", "Saturday",
"Sunday"); "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 Calendar._MN = new Array
("January", ("January",
"February", "February",
@ -22,9 +58,41 @@ Calendar._MN = new Array
"November", "November",
"December"); "December");
// short month names
Calendar._SMN = new Array
("Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec");
// tooltips // tooltips
Calendar._TT = {}; 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_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today"; 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["SUN_FIRST"] = "Display Sunday first";
Calendar._TT["CLOSE"] = "Close"; Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today"; Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";
// date formats // date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd"; Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d"; Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e";
Calendar._TT["WK"] = "wk"; Calendar._TT["WK"] = "wk";

View File

@ -1,13 +1,49 @@
// ** I18N // ** 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 Calendar._DN = new Array
("Domingo", ("Domingo",
"Lunes", "Lunes",
"Martes", "Martes",
"Miércoles", "Miircoles",
"Jueves", "Jueves",
"Viernes", "Viernes",
"Sábado", "Sabado",
"Domingo"); "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 Calendar._MN = new Array
("Enero", ("Enero",
"Febrero", "Febrero",
@ -22,14 +58,46 @@ Calendar._MN = new Array
"Noviembre", "Noviembre",
"Diciembre"); "Diciembre");
// short month names
Calendar._SMN = new Array
("Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dic");
// tooltips // tooltips
Calendar._TT = {}; Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Cambia el primer día de la semana"; Calendar._TT["INFO"] = "Acerca del calendario";
Calendar._TT["PREV_YEAR"] = "Año anterior (mantener para menu)";
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["PREV_MONTH"] = "Mes anterior (mantener para menu)";
Calendar._TT["GO_TODAY"] = "Ir a hoy"; Calendar._TT["GO_TODAY"] = "Ir a hoy";
Calendar._TT["NEXT_MONTH"] = "Mes siguiente (mantener para menu)"; 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["SEL_DATE"] = "Seleccionar fecha";
Calendar._TT["DRAG_TO_MOVE"] = "Arrastrar para mover"; Calendar._TT["DRAG_TO_MOVE"] = "Arrastrar para mover";
Calendar._TT["PART_TODAY"] = " (hoy)"; 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["SUN_FIRST"] = "Mostrar domingo primero";
Calendar._TT["CLOSE"] = "Cerrar"; Calendar._TT["CLOSE"] = "Cerrar";
Calendar._TT["TODAY"] = "Hoy"; Calendar._TT["TODAY"] = "Hoy";
Calendar._TT["TIME_PART"] = "(Mayzscula-)Clic o arrastre para cambiar valor";
// date formats // date formats
Calendar._TT["DEF_DATE_FORMAT"] = "dd-mm-yy"; Calendar._TT["DEF_DATE_FORMAT"] = "%d/%m/%Y";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d"; Calendar._TT["TT_DATE_FORMAT"] = "%A, %e de %B de %Y";
Calendar._TT["WK"] = "sem"; Calendar._TT["WK"] = "sem";

View File

@ -24,14 +24,14 @@ Calendar._MN = new Array
// tooltips // tooltips
Calendar._TT = {}; Calendar._TT = {};
Calendar._TT["TOGGLE"] = "Toggle first day of week"; Calendar._TT["TOGGLE"] = "A hét első napjának beállítása";
Calendar._TT["PREV_YEAR"] = "Elõzõ év (hold for menu)"; Calendar._TT["PREV_YEAR"] = "Előző év (tartsa nyomva a menühöz)";
Calendar._TT["PREV_MONTH"] = "Elõzõ hónap (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Előző hónap (tartsa nyomva a menühöz)";
Calendar._TT["GO_TODAY"] = "Mai napra ugrás"; Calendar._TT["GO_TODAY"] = "Mai napra ugrás";
Calendar._TT["NEXT_MONTH"] = "Köv. hónap (hold for menu)"; Calendar._TT["NEXT_MONTH"] = "Köv. hónap (tartsa nyomva a menühöz)";
Calendar._TT["NEXT_YEAR"] = "Köv. év (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Köv. év (tartsa nyomva a menühöz)";
Calendar._TT["SEL_DATE"] = "Válasszon dátumot"; 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["PART_TODAY"] = " (ma)";
Calendar._TT["MON_FIRST"] = "Hétfõ legyen a hét elsõ napja"; Calendar._TT["MON_FIRST"] = "Hétfõ legyen a hét elsõ napja";
Calendar._TT["SUN_FIRST"] = "Vasárnap 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", "Novembre",
"Dicembre"); "Dicembre");
// short month names
Calendar._SMN = new Array
("Gen",
"Feb",
"Mar",
"Apr",
"Mag",
"Giu",
"Lug",
"Ago",
"Set",
"Ott",
"Nov",
"Dic");
// tooltips // tooltips
Calendar._TT = {}; 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["TOGGLE"] = "Modifica il primo giorno della settimana";
Calendar._TT["PREV_YEAR"] = "Anno prec. (tieni premuto per menu)"; Calendar._TT["PREV_YEAR"] = "Anno prec. (tieni premuto per menu)";
Calendar._TT["PREV_MONTH"] = "Mese 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"; Calendar._TT["TODAY"] = "Oggi";
// date formats // date formats
Calendar._TT["DEF_DATE_FORMAT"] = "y-mm-dd"; Calendar._TT["DEF_DATE_FORMAT"] = "%d-%m-%Y";
Calendar._TT["TT_DATE_FORMAT"] = "D, M d"; 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 // ** I18N
Calendar._DN = new Array Calendar._DN = new Array
("Duminică", ("Duminică",
"Luni", "Luni",
"Marţi", "Marţi",
"Miercuri", "Miercuri",
"Joi", "Joi",
"Vineri", "Vineri",
"Sâmbătă", "Sâmbătă",
"Duminică"); "Duminică");
Calendar._SDN_len = 2;
Calendar._MN = new Array Calendar._MN = new Array
("Ianuarie", ("Ianuarie",
"Februarie", "Februarie",
@ -24,22 +25,41 @@ Calendar._MN = new Array
// tooltips // tooltips
Calendar._TT = {}; 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_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["GO_TODAY"] = "Data de azi";
Calendar._TT["NEXT_MONTH"] = "Luna următoare (lung pt menu)"; Calendar._TT["NEXT_MONTH"] = "Luna următoare (lung pt menu)";
Calendar._TT["NEXT_YEAR"] = "Anul următor (lung pt menu)"; Calendar._TT["NEXT_YEAR"] = "Anul următor (lung pt menu)";
Calendar._TT["SEL_DATE"] = "Selectează data"; Calendar._TT["SEL_DATE"] = "Selectează data";
Calendar._TT["DRAG_TO_MOVE"] = "Trage pentru a mişca"; Calendar._TT["DRAG_TO_MOVE"] = "Trage pentru a mişca";
Calendar._TT["PART_TODAY"] = " (astăzi)"; Calendar._TT["PART_TODAY"] = " (astăzi)";
Calendar._TT["MON_FIRST"] = "Prima zi -> Luni"; Calendar._TT["MON_FIRST"] = "Prima zi -> Luni";
Calendar._TT["SUN_FIRST"] = "Prima zi -> Duminică"; Calendar._TT["SUN_FIRST"] = "Prima zi -> Duminică";
Calendar._TT["CLOSE"] = "Închide"; Calendar._TT["CLOSE"] = "Închide";
Calendar._TT["TODAY"] = "Astăzi"; Calendar._TT["TODAY"] = "Astăzi";
Calendar._TT["TIME_PART"] = "(Shift-)Click sau drag pentru a selecta";
// date formats // date formats
Calendar._TT["DEF_DATE_FORMAT"] = "dd-mm-y"; Calendar._TT["DEF_DATE_FORMAT"] = "%d-%m-%Y";
Calendar._TT["TT_DATE_FORMAT"] = "D, d M"; 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"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html> <html>
<head> <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> </head>
<body> <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> <h3>New stuff</h3>
@ -68,10 +221,10 @@
</ol> </ol>
<hr /> <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 --> <!-- Created: Tue Jul 8 17:29:37 EEST 2003 -->
<!-- hhmts start --> <!-- hhmts start -->
Last modified on Tue Jul 8 21:52:23 2003 Last modified on Wed Oct 29 02:37:07 2003
<!-- hhmts end --> <!-- hhmts end -->
<!-- doc-lang: English --> <!-- doc-lang: English -->
</body> </body>

View File

@ -1,6 +1,7 @@
<html style="background-color: buttonface; color: buttontext;"> <html style="background-color: buttonface; color: buttontext;">
<head> <head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Simple calendar setups [popup calendar]</title> <title>Simple calendar setups [popup calendar]</title>
@ -46,21 +47,48 @@
<hr /> <hr />
<p><b>Basic setup: one input field only.</b> Clicking in the input field <p><b>Basic setup: one input per calendar.</b> Clicking in the input field
activates the calendar. Default date format is "y/mm/dd". The calendar activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The
defaults to "single-click mode".</p> calendar defaults to "single-click mode".</p>
<p><span style="color:red">Note:</span> for some reason this example works <p>The example below has been updated to show you how to create "linked"
only with Mozilla. It seems that IE and Opera can't set the onclick handler fields. Basically, when some field is filled with a date, the other
correctly for the input field.</p> is updated so that the difference between them remains one week. The
property useful here is "onUpdate".</p>
<form action="#" method="get"> <form action="#" method="get">
<input type="text" name="date" id="f_date_a" /> <input type="text" name="date" id="f_date_a" />
<input type="text" name="date" id="f_calcdate" />
</form> </form>
<script type="text/javascript"> <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({ Calendar.setup({
inputField : "f_date_a", // id of the input field 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> </script>
@ -79,7 +107,8 @@ is explicitely set to false).</p>
<script type="text/javascript"> <script type="text/javascript">
Calendar.setup({ Calendar.setup({
inputField : "f_date_b", // id of the input field 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) button : "f_trigger_b", // trigger for the calendar (button ID)
singleClick : false // double-click mode 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"> <script type="text/javascript">
Calendar.setup({ Calendar.setup({
inputField : "f_date_c", // id of the input field 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) button : "f_trigger_c", // trigger for the calendar (button ID)
align : "Tl", // alignment (defaults to "Bl") align : "Tl", // alignment (defaults to "Bl")
singleClick : true singleClick : true
@ -139,9 +168,9 @@ field) but we wanna show a friendlier format to the end-user.</p>
<script type="text/javascript"> <script type="text/javascript">
Calendar.setup({ Calendar.setup({
inputField : "f_date_d", // id of the input field 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 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") align : "Tl", // alignment (defaults to "Bl")
singleClick : true singleClick : true
}); });
@ -166,9 +195,9 @@ onmouseout="this.style.background=''" />.</p>
<script type="text/javascript"> <script type="text/javascript">
Calendar.setup({ Calendar.setup({
inputField : "f_date_e", // id of the input field 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 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) button : "f_trigger_e", // trigger button (well, IMG in our case)
align : "Tl", // alignment (defaults to "Bl") align : "Tl", // alignment (defaults to "Bl")
singleClick : true singleClick : true
@ -197,12 +226,12 @@ Sundays).</p>
<script type="text/javascript"> <script type="text/javascript">
Calendar.setup({ Calendar.setup({
inputField : "f_date_f", // id of the input field 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 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") align : "Tl", // alignment (defaults to "Bl")
disableFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0) dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0); return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
} }
}); });
</script> </script>

View File

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