[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Phpgroupware-cvs] phpgwapi/js/jscalendar README, NONE, 1.1.2.1 README-p
|
From: |
Dave Hall <address@hidden> |
|
Subject: |
[Phpgroupware-cvs] phpgwapi/js/jscalendar README, NONE, 1.1.2.1 README-phpGW, NONE, 1.1.2.1 bugtest-hidden-selects.html, NONE, 1.1.2.1 calendar-blue.css, NONE, 1.1.2.1 calendar-brown.css, NONE, 1.1.2.1 calendar-green.css, NONE, 1.1.2.1 calendar-setup.js, NONE, 1.1.2.1 calendar-setup_stripped.js, NONE, 1.1.2.1 calendar-system.css, NONE, 1.1.2.1 calendar-win2k-1.css, NONE, 1.1.2.1 calendar-win2k-2.css, NONE, 1.1.2.1 calendar-win2k-cold-1.css, NONE, 1.1.2.1 calendar-win2k-cold-2.css, NONE, 1.1.2.1 calendar.js, NONE, 1.1.2.1 calendar_stripped.js, NONE, 1.1.2.1 img.gif, NONE, 1.1.2.1 index.html, NONE, 1.1.2.1 jscalendar-setup.php, NONE, 1.1.2.1 menuarrow.gif, NONE, 1.1.2.1 release-notes.html, NONE, 1.1.2.1 simple-1.html, NONE, 1.1.2.1 simple-2.html, NONE, 1.1.2.1 simple-3.html, NONE, 1.1.2.1 simple-4.html, NONE, 1.1.2.1 |
|
Date: |
Sun, 16 Nov 2003 14:23:51 +0000 |
Update of /cvsroot/phpgroupware/phpgwapi/js/jscalendar
In directory subversions:/tmp/cvs-serv10778
Added Files:
Tag: Version-0_9_16-branch
README README-phpGW bugtest-hidden-selects.html
calendar-blue.css calendar-brown.css calendar-green.css
calendar-setup.js calendar-setup_stripped.js
calendar-system.css calendar-win2k-1.css calendar-win2k-2.css
calendar-win2k-cold-1.css calendar-win2k-cold-2.css
calendar.js calendar_stripped.js img.gif index.html
jscalendar-setup.php menuarrow.gif release-notes.html
simple-1.html simple-2.html simple-3.html simple-4.html
Log Message:
starting to readd properly licensed jscalendar
--- NEW FILE: calendar-blue.css ---
/* The main calendar widget. DIV containing a table. */
div.calendar { position: relative; }
.calendar, .calendar table {
border: 1px solid #556;
font-size: 11px;
color: #000;
cursor: default;
background: #eef;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /* They are the navigation buttons */
padding: 2px; /* Make the buttons seem like they're pressing */
}
.calendar .nav {
background: #778 url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
background: #fff;
color: #000;
padding: 2px;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
background: #778;
color: #fff;
}
.calendar thead .daynames { /* Row <TR> containing the day names */
background: #bdf;
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #556;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #a66;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background-color: #aaf;
color: #000;
border: 1px solid #04f;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background-color: #77c;
padding: 2px 0px 0px 2px;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
color: #456;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #bdf;
}
.calendar tbody .rowhilite td {
background: #def;
}
.calendar tbody .rowhilite td.wn {
background: #eef;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
background: #def;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
background: #cde;
padding: 2px 2px 0px 2px;
}
.calendar tbody td.selected { /* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #fff;
color: #000;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #a66;
}
.calendar tbody td.today { /* Cell showing selected date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
text-align: center;
background: #556;
color: #fff;
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: #fff;
color: #445;
border-top: 1px solid #556;
padding: 1px;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
background: #77c;
padding: 2px 0px 0px 2px;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #def;
color: #000;
font-size: smaller;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
background: #acf;
}
.combo .active {
border-top: 1px solid #46a;
border-bottom: 1px solid #46a;
background: #eef;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: menuarrow.gif ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: README ---
The DHTML Calendar
-------------------
Author: Mihai Bazon, <address@hidden>
http://dynarch.com/mishoo/
This program is free software published under the
terms of the GNU Lesser General Public License.
For the entire license text please refer to
http://www.gnu.org/licenses/lgpl.html
Contents
---------
calendar.js -- the main program file
lang/*.js -- internalization files
*.css -- color themes
cal.html -- example usage file
doc/ -- documentation, in PDF and HTML
simple-1.html -- quick setup examples [popup calendars]
simple-2.html -- quick setup example for flat calendar
Homepage
---------
For details and latest versions please refer to calendar
homepage, located on my website:
http://dynarch.com/mishoo/calendar.epl
--- NEW FILE: calendar-win2k-cold-2.css ---
/* The main calendar widget. DIV containing a table. */
.calendar {
position: relative;
display: none;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
font-size: 11px;
color: #000;
cursor: default;
background: #c8d4d0;
font-family: tahoma,verdana,sans-serif;
}
.calendar table {
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
font-size: 11px;
color: #000;
cursor: default;
background: #c8d4d0;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: #788480;
color: #fff;
text-align: center;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #000;
padding: 2px;
text-align: center;
background: #e8f4f0;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background-color: #d8e4e0;
}
.calendar thead .active { /* Active (pressed) buttons in header */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background-color: #b8c4c0;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #e8f4f0;
}
.calendar tbody .rowhilite td {
background: #d8e4e0;
}
.calendar tbody .rowhilite td.wn {
background: #c8d4d0;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
padding: 2px 2px 0px 2px;
background: #d8e4e0;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: #e8f4f0;
padding: 1px;
border: 1px solid #000;
background: #788480;
color: #fff;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #d8e4e0;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
background: #d8e4e0;
font-size: smaller;
padding: 1px;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c8d4d0;
padding: 0px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.combo .hilite {
background: #048;
color: #aef;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #e8f0f4;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: jscalendar-setup.php ---
<?php
/**************************************************************************\
* phpGroupWare - API jsCalendar setup (set up jsCalendar with user prefs) *
* http://www.phpgroupware.org *
* Modified by Ralf Becker <address@hidden> *
* -------------------------------------------- *
* 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 *
* Free Software Foundation; either version 2 of the License, or (at your *
* option) any later version. *
\**************************************************************************/
/* $Id: jscalendar-setup.php,v 1.1.2.1 2003/11/16 14:23:48 skwashd Exp $ */
$GLOBALS['phpgw_info']['flags'] = Array(
'currentapp' => 'calendar', // can't be phpgwapi
'noheader' => True,
'nonavbar' => True,
'noappheader' => True,
'noappfooter' => True,
'nofooter' => True,
'nocachecontrol' => True // allow cacheing
);
include('../../header.inc.php');
$dateformat =
$GLOBALS['phpgw_info']['user']['preferences']['common']['dateformat'];
$jsDateFormat =
str_replace(array('Y','d','m'),array('y','dd','mm'),$dateformat);
$dayFirst = strpos($dateformat,'d') < strpos($dateformat,'m');
$jsLongDateFormat = 'DD, '.($dayFirst ? 'd' : 'MM').($dateformat[1] == '.' ? '.
' : ' ').($dayFirst ? 'MM' : 'd');
?>
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://dynarch.com/mishoo/calendar.epl
*
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly. 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).
*/
/**
* This function "patches" an input field (or other element) to use a calendar
* widget for date selection.
*
* The "params" is a single object that can have the following properties:
*
* prop. name | description
*
-------------------------------------------------------------------------------------------------
* inputField | the ID of an input field to store the date
* displayArea | the ID of a DIV or other element to show the date
* button | ID of a button or other element that will trigger the
calendar
* eventName | event that will trigger the calendar, without the "on"
prefix (default: "click")
* ifFormat | date format that will be stored in the input field
* daFormat | the date format that will be used to display the date in
displayArea
* singleClick | (true/false) wether the calendar is in single click mode
or not (default: true)
* mondayFirst | (true/false) if true Monday is the first day of week,
Sunday otherwise (default: true)
* align | alignment (default: "Bl"); if you don't know what's this
see the calendar documentation
* range | array with 2 elements. Default: [1900, 2999] -- the range
of years available
* weekNumbers | (true/false) if it's true (default) the calendar will
display week numbers
* flat | null or element ID; if not null the calendar will be a
flat calendar having the parent with the given ID
* flatCallback | function that receives a JS Date object and returns an URL
to point the browser to (for flat calendar)
* disableFunc | function that receives a JS Date object and should return
true if that date has to be disabled in the calendar
* onSelect | function that gets called when a date is selected. You
don't _have_ to supply this (the default is generally okay)
* onClose | function that gets called when the calendar is closed.
[default]
* onUpdate | function that gets called after the date is updated in the
input field. Receives a reference to the calendar.
* date | the date that the calendar will be initially displayed to
* showsTime | default: false; if true the calendar will include a time
selector
* timeFormat | the time format; can be "12" or "24", default is "12"
*
* None of them is required, they all have default values. However, if you
* pass none of "inputField", "displayArea" or "button" you'll get a warning
* saying "nothing to setup".
*/
Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] ==
"undefined") { params[pname] = def; } };
param_default("inputField", null);
param_default("displayArea", null);
param_default("button", null);
param_default("eventName", "click");
param_default("ifFormat", "<?php echo $jsDateFormat; ?>");
param_default("daFormat", "<?php echo $jsDateFormat; ?>");
param_default("singleClick", true);
param_default("disableFunc", null);
param_default("mondayFirst", <?php echo
$GLOBALS['phpgw_info']['user']['preferences']['common']['weekdaysstarts'] !=
'sunday' ? 'true' : 'false'; ?>);
param_default("align", "Bl");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
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;
};
};
// translations
// ** I18N
Calendar._DN = new Array
("<?php echo lang('Sunday') ?>",
"<?php echo lang('Monday'); ?>",
"<?php echo lang('Tuesday'); ?>",
"<?php echo lang('Wednesday'); ?>",
"<?php echo lang('Thursday'); ?>",
"<?php echo lang('Friday'); ?>",
"<?php echo lang('Saturday'); ?>",
"<?php echo lang('Sunday'); ?>");
Calendar._MN = new Array
("<?php echo lang('January'); ?>",
"<?php echo lang('February'); ?>",
"<?php echo lang('March'); ?>",
"<?php echo lang('April'); ?>",
"<?php echo lang('May'); ?>",
"<?php echo lang('June'); ?>",
"<?php echo lang('July'); ?>",
"<?php echo lang('August'); ?>",
"<?php echo lang('September'); ?>",
"<?php echo lang('October'); ?>",
"<?php echo lang('November'); ?>",
"<?php echo lang('December'); ?>");
// tooltips
Calendar._TT = {};
Calendar._TT["TOGGLE"] = "<?php echo lang('Toggle first day of week'); ?>";
Calendar._TT["PREV_YEAR"] = "<?php echo lang('Prev. year (hold for menu)'); ?>";
Calendar._TT["PREV_MONTH"] = "<?php echo lang('Prev. month (hold for menu)');
?>";
Calendar._TT["GO_TODAY"] = "<?php echo lang('Go Today'); ?>";
Calendar._TT["NEXT_MONTH"] = "<?php echo lang('Next month (hold for menu)');
?>";
Calendar._TT["NEXT_YEAR"] = "<?php echo lang('Next year (hold for menu)'); ?>";
Calendar._TT["SEL_DATE"] = "<?php echo lang('Select date'); ?>";
Calendar._TT["DRAG_TO_MOVE"] = "<?php echo lang('Drag to move'); ?>";
Calendar._TT["PART_TODAY"] = " (<?php echo lang('today'); ?>)";
Calendar._TT["MON_FIRST"] = "<?php echo lang('Display Monday first'); ?>";
Calendar._TT["SUN_FIRST"] = "<?php echo lang('Display Sunday first'); ?>";
Calendar._TT["CLOSE"] = "<?php echo lang('Close'); ?>";
Calendar._TT["TODAY"] = "<?php echo lang('Today'); ?>";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "<?php echo $jsDateFormat; ?>";
Calendar._TT["TT_DATE_FORMAT"] = "<?php echo $jsLongDateFormat; ?>";
Calendar._TT["WK"] = "<?php echo lang('Wk'); ?>";
--- NEW FILE: README-phpGW ---
This directory contains the (unchanged) Version 0.9.5 of jsCalendar
jsCalendar is called by the jscalendar wrapper-class in the phpGW API
Instead of jscalendar-setup.js and a lang/*.js file it loads
jscalendar-setup.php,
which sets all jscalendar preferences (partly from the users prefs) and reads
the
translations from the database for the language the user has specified in their
preferences.
Originally imported Ralf Becker
Reimported properly licensed version - Dave Hall
--- NEW FILE: simple-2.html ---
<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>
</head>
<body>
<h2>DHTML Calendar — 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">
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
}
);
</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
><div style="float: right; margin-left: 1em; margin-bottom: 1em;"
id="calendar-container"></div>
<script type="text/javascript">
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
}
);
</script></pre>
</body>
</html>
--- NEW FILE: img.gif ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: calendar-win2k-1.css ---
/* The main calendar widget. DIV containing a table. */
.calendar {
position: relative;
display: none;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
font-size: 11px;
color: #000;
cursor: default;
background: #d4d0c8;
font-family: tahoma,verdana,sans-serif;
}
.calendar table {
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
font-size: 11px;
color: #000;
cursor: default;
background: #d4d0c8;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: #848078;
color: #fff;
text-align: center;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #000;
padding: 2px;
text-align: center;
background: #f4f0e8;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background-color: #e4e0d8;
}
.calendar thead .active { /* Active (pressed) buttons in header */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background-color: #c4c0b8;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #f4f0e8;
}
.calendar tbody .rowhilite td {
background: #e4e0d8;
}
.calendar tbody .rowhilite td.wn {
background: #d4d0c8;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
padding: 2px 2px 0px 2px;
background: #e4e0d8;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: #f4f0e8;
padding: 1px;
border: 1px solid #000;
background: #848078;
color: #fff;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #e4e0d8;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
background: #e4e0d8;
font-size: smaller;
padding: 1px;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c4c0b8;
padding: 0px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.combo .hilite {
background: #048;
color: #fea;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #766;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: calendar_stripped.js ---
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ------------------------------------------------------------------
*
* The DHTML Calendar, version 0.9.5 "Your favorite time, bis"
*
* Details and latest version at:
* http://dynarch.com/mishoo/calendar.epl
*
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*/
Calendar=function(mondayFirst,dateStr,onSelected,onClose){this.activeDiv=null;this.currentDateEl=null;this.getDateStatus=null;this.timeout=null;this.onSelected=onSelected||null;this.onClose=onClose||null;this.dragging=false;this.hidden=false;this.minYear=1970;this.maxYear=2050;this.dateFormat=Calendar._TT["DEF_DATE_FORMAT"];this.ttDateFormat=Calendar._TT["TT_DATE_FORMAT"];this.isPopup=true;this.weekNumbers=true;this.mondayFirst=mondayFirst;this.dateStr=dateStr;this.ar_days=null;this.showsTime=false;this.time24=true;this.table=null;this.element=null;this.tbody=null;this.firstdayname=null;this.monthsCombo=null;this.yearsCombo=null;this.hilitedMonth=null;this.activeMonth=null;this.hilitedYear=null;this.activeYear=null;this.dateClicked=false;if(typeof
Calendar._SDN=="undefined"){if(typeof
Calendar._SDN_len=="undefined")Calendar._SDN_len=3;var ar=new Array();for(var
i=8;i>0;){ar[--i]=Calendar._DN[i].substr(0,Calendar._SDN_len);}Calendar._SDN=ar;if(typeof
Calendar._SMN_len=="undefined")Calendar._SMN_len=3;ar=new Array();for(var
i=12;i>0;){ar[--i]=Calendar._MN[i].substr(0,Calendar._SMN_len);}Calendar._SMN=ar;}};Calendar._C=null;Calendar.is_ie=(/msie/i.test(navigator.userAgent)&&!/opera/i.test(navigator.userAgent));Calendar.is_opera=/opera/i.test(navigator.userAgent);Calendar.is_khtml=/Konqueror|Safari|KHTML/i.test(navigator.userAgent);Calendar.getAbsolutePos=function(el){var
SL=0,ST=0;var
is_div=/^div$/i.test(el.tagName);if(is_div&&el.scrollLeft)SL=el.scrollLeft;if(is_div&&el.scrollTop)ST=el.scrollTop;var
r={x:el.offsetLeft-SL,y:el.offsetTop-ST};if(el.offsetParent){var
tmp=Calendar.getAbsolutePos(el.offsetParent);r.x+=tmp.x;r.y+=tmp.y;}return
r;};Calendar.isRelated=function(el,evt){var
related=evt.relatedTarget;if(!related){var
type=evt.type;if(type=="mouseover"){related=evt.fromElement;}else
if(type=="mouseout"){related=evt.toElement;}}while(related){if(related==el){return
true;}related=related.parentNode;}return
false;};Calendar.removeClass=function(el,className){if(!(el&&el.className)){return;}var
cls=el.className.split(" ");var ar=new Array();for(var
i=cls.length;i>0;){if(cls[--i]!=className){ar[ar.length]=cls[i];}}el.className=ar.join("
");};Calendar.addClass=function(el,className){Calendar.removeClass(el,className);el.className+="
"+className;};Calendar.getElement=function(ev){if(Calendar.is_ie){return
window.event.srcElement;}else{return
ev.currentTarget;}};Calendar.getTargetElement=function(ev){if(Calendar.is_ie){return
window.event.srcElement;}else{return
ev.target;}};Calendar.stopEvent=function(ev){ev||(ev=window.event);if(Calendar.is_ie){ev.cancelBubble=true;ev.returnValue=false;}else{ev.preventDefault();ev.stopPropagation();}return
false;};Calendar.addEvent=function(el,evname,func){if(el.attachEvent){el.attachEvent("on"+evname,func);}else
if(el.addEventListener){el.addEventListener(evname,func,true);}else{el["on"+evname]=func;}};Calendar.removeEvent=function(el,evname,func){if(el.detachEvent){el.detachEvent("on"+evname,func);}else
if(el.removeEventListener){el.removeEventListener(evname,func,true);}else{el["on"+evname]=null;}};Calendar.createElement=function(type,parent){var
el=null;if(document.createElementNS){el=document.createElementNS("http://www.w3.org/1999/xhtml",type);}else{el=document.createElement(type);}if(typeof
parent!="undefined"){parent.appendChild(el);}return
el;};Calendar._add_evs=function(el){with(Calendar){addEvent(el,"mouseover",dayMouseOver);addEvent(el,"mousedown",dayMouseDown);addEvent(el,"mouseout",dayMouseOut);if(is_ie){addEvent(el,"dblclick",dayMouseDblClick);el.setAttribute("unselectable",true);}}};Calendar.findMonth=function(el){if(typeof
el.month!="undefined"){return el;}else if(typeof
el.parentNode.month!="undefined"){return el.parentNode;}return
null;};Calendar.findYear=function(el){if(typeof el.year!="undefined"){return
el;}else if(typeof el.parentNode.year!="undefined"){return
el.parentNode;}return null;};Calendar.showMonthsCombo=function(){var
cal=Calendar._C;if(!cal){return false;}var cal=cal;var cd=cal.activeDiv;var
mc=cal.monthsCombo;if(cal.hilitedMonth){Calendar.removeClass(cal.hilitedMonth,"hilite");}if(cal.activeMonth){Calendar.removeClass(cal.activeMonth,"active");}var
mon=cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];Calendar.addClass(mon,"active");cal.activeMonth=mon;var
s=mc.style;s.display="block";if(cd.navtype<0)s.left=cd.offsetLeft+"px";else
s.left=(cd.offsetLeft+cd.offsetWidth-mc.offsetWidth)+"px";s.top=(cd.offsetTop+cd.offsetHeight)+"px";};Calendar.showYearsCombo=function(fwd){var
cal=Calendar._C;if(!cal){return false;}var cal=cal;var cd=cal.activeDiv;var
yc=cal.yearsCombo;if(cal.hilitedYear){Calendar.removeClass(cal.hilitedYear,"hilite");}if(cal.activeYear){Calendar.removeClass(cal.activeYear,"active");}cal.activeYear=null;var
Y=cal.date.getFullYear()+(fwd?1:-1);var yr=yc.firstChild;var
show=false;for(var
i=12;i>0;--i){if(Y>=cal.minYear&&Y<=cal.maxYear){yr.firstChild.data=Y;yr.year=Y;yr.style.display="block";show=true;}else{yr.style.display="none";}yr=yr.nextSibling;Y+=fwd?2:-2;}if(show){var
s=yc.style;s.display="block";if(cd.navtype<0)s.left=cd.offsetLeft+"px";else
s.left=(cd.offsetLeft+cd.offsetWidth-yc.offsetWidth)+"px";s.top=(cd.offsetTop+cd.offsetHeight)+"px";}};Calendar.tableMouseUp=function(ev){var
cal=Calendar._C;if(!cal){return
false;}if(cal.timeout){clearTimeout(cal.timeout);}var
el=cal.activeDiv;if(!el){return false;}var
target=Calendar.getTargetElement(ev);ev||(ev=window.event);Calendar.removeClass(el,"active");if(target==el||target.parentNode==el){Calendar.cellClick(el,ev);}var
mon=Calendar.findMonth(target);var date=null;if(mon){date=new
Date(cal.date);if(mon.month!=date.getMonth()){date.setMonth(mon.month);cal.setDate(date);cal.dateClicked=false;cal.callHandler();}}else{var
year=Calendar.findYear(target);if(year){date=new
Date(cal.date);if(year.year!=date.getFullYear()){date.setFullYear(year.year);cal.setDate(date);cal.dateClicked=false;cal.callHandler();}}}with(Calendar){removeEvent(document,"mouseup",tableMouseUp);removeEvent(document,"mouseover",tableMouseOver);removeEvent(document,"mousemove",tableMouseOver);cal._hideCombos();_C=null;return
stopEvent(ev);}};Calendar.tableMouseOver=function(ev){var
cal=Calendar._C;if(!cal){return;}var el=cal.activeDiv;var
target=Calendar.getTargetElement(ev);if(target==el||target.parentNode==el){Calendar.addClass(el,"hilite
active");Calendar.addClass(el.parentNode,"rowhilite");}else{if(typeof
el.navtype=="undefined"||(el.navtype!=50&&(el.navtype==0||Math.abs(el.navtype)>2)))Calendar.removeClass(el,"active");Calendar.removeClass(el,"hilite");Calendar.removeClass(el.parentNode,"rowhilite");}ev||(ev=window.event);if(el.navtype==50&&target!=el){var
pos=Calendar.getAbsolutePos(el);var w=el.offsetWidth;var x=ev.clientX;var
dx;var decrease=true;if(x>pos.x+w){dx=x-pos.x-w;decrease=false;}else
dx=pos.x-x;if(dx<0)dx=0;var range=el._range;var current=el._current;var
count=Math.floor(dx/10)%range.length;for(var
i=range.length;--i>=0;)if(range[i]==current)break;while(count-->0)if(decrease){if(!(--i
in range))i=range.length-1;}else if(!(++i in range))i=0;var
newval=range[i];el.firstChild.data=newval;cal.onUpdateTime();}var
mon=Calendar.findMonth(target);if(mon){if(mon.month!=cal.date.getMonth()){if(cal.hilitedMonth){Calendar.removeClass(cal.hilitedMonth,"hilite");}Calendar.addClass(mon,"hilite");cal.hilitedMonth=mon;}else
if(cal.hilitedMonth){Calendar.removeClass(cal.hilitedMonth,"hilite");}}else{if(cal.hilitedMonth){Calendar.removeClass(cal.hilitedMonth,"hilite");}var
year=Calendar.findYear(target);if(year){if(year.year!=cal.date.getFullYear()){if(cal.hilitedYear){Calendar.removeClass(cal.hilitedYear,"hilite");}Calendar.addClass(year,"hilite");cal.hilitedYear=year;}else
if(cal.hilitedYear){Calendar.removeClass(cal.hilitedYear,"hilite");}}else
if(cal.hilitedYear){Calendar.removeClass(cal.hilitedYear,"hilite");}}return
Calendar.stopEvent(ev);};Calendar.tableMouseDown=function(ev){if(Calendar.getTargetElement(ev)==Calendar.getElement(ev)){return
Calendar.stopEvent(ev);}};Calendar.calDragIt=function(ev){var
cal=Calendar._C;if(!(cal&&cal.dragging)){return false;}var posX;var
posY;if(Calendar.is_ie){posY=window.event.clientY+document.body.scrollTop;posX=window.event.clientX+document.body.scrollLeft;}else{posX=ev.pageX;posY=ev.pageY;}cal.hideShowCovered();var
st=cal.element.style;st.left=(posX-cal.xOffs)+"px";st.top=(posY-cal.yOffs)+"px";return
Calendar.stopEvent(ev);};Calendar.calDragEnd=function(ev){var
cal=Calendar._C;if(!cal){return
false;}cal.dragging=false;with(Calendar){removeEvent(document,"mousemove",calDragIt);removeEvent(document,"mouseover",stopEvent);removeEvent(document,"mouseup",calDragEnd);tableMouseUp(ev);}cal.hideShowCovered();};Calendar.dayMouseDown=function(ev){var
el=Calendar.getElement(ev);if(el.disabled){return false;}var
cal=el.calendar;cal.activeDiv=el;Calendar._C=cal;if(el.navtype!=300)with(Calendar){if(el.navtype==50)el._current=el.firstChild.data;addClass(el,"hilite
active");addEvent(document,"mouseover",tableMouseOver);addEvent(document,"mousemove",tableMouseOver);addEvent(document,"mouseup",tableMouseUp);}else
if(cal.isPopup){cal._dragStart(ev);}if(el.navtype==-1||el.navtype==1){if(cal.timeout)clearTimeout(cal.timeout);cal.timeout=setTimeout("Calendar.showMonthsCombo()",250);}else
if(el.navtype==-2||el.navtype==2){if(cal.timeout)clearTimeout(cal.timeout);cal.timeout=setTimeout((el.navtype>0)?"Calendar.showYearsCombo(true)":"Calendar.showYearsCombo(false)",250);}else{cal.timeout=null;}return
Calendar.stopEvent(ev);};Calendar.dayMouseDblClick=function(ev){Calendar.cellClick(Calendar.getElement(ev),ev||window.event);if(Calendar.is_ie){document.selection.empty();}};Calendar.dayMouseOver=function(ev){var
el=Calendar.getElement(ev);if(Calendar.isRelated(el,ev)||Calendar._C||el.disabled){return
false;}if(el.ttip){if(el.ttip.substr(0,1)=="_"){var
date=null;with(el.calendar.date){date=new
Date(getFullYear(),getMonth(),el.caldate);}el.ttip=date.print(el.calendar.ttDateFormat)+el.ttip.substr(1);}el.calendar.tooltips.firstChild.data=el.ttip;}if(el.navtype!=300){Calendar.addClass(el,"hilite");if(el.caldate){Calendar.addClass(el.parentNode,"rowhilite");}}return
Calendar.stopEvent(ev);};Calendar.dayMouseOut=function(ev){with(Calendar){var
el=getElement(ev);if(isRelated(el,ev)||_C||el.disabled){return
false;}removeClass(el,"hilite");if(el.caldate){removeClass(el.parentNode,"rowhilite");}el.calendar.tooltips.firstChild.data=_TT["SEL_DATE"];return
stopEvent(ev);}};Calendar.cellClick=function(el,ev){var cal=el.calendar;var
closing=false;var newdate=false;var date=null;if(typeof
el.navtype=="undefined"){Calendar.removeClass(cal.currentDateEl,"selected");Calendar.addClass(el,"selected");closing=(cal.currentDateEl==el);if(!closing){cal.currentDateEl=el;}cal.date.setDate(el.caldate);date=cal.date;newdate=true;cal.dateClicked=true;}else{if(el.navtype==200){Calendar.removeClass(el,"hilite");cal.callCloseHandler();return;}date=(el.navtype==0)?new
Date():new Date(cal.date);cal.dateClicked=false;var
year=date.getFullYear();var mon=date.getMonth();function setMonth(m){var
day=date.getDate();var
max=date.getMonthDays(m);if(day>max){date.setDate(max);}date.setMonth(m);};switch(el.navtype){case
400:Calendar.removeClass(el,"hilite");var text=Calendar._TT["ABOUT"];if(typeof
text!="undefined"){text+=cal.showsTime?Calendar._TT["ABOUT_TIME"]:"";}else{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
<address@hidden> to get it into the distribution ;-)\n\n"+"Thank
you!\n"+"http://dynarch.com/mishoo/calendar.epl\n";}alert(text);return;case-2:if(year>cal.minYear){date.setFullYear(year-1);}break;case-1:if(mon>0){setMonth(mon-1);}else
if(year-->cal.minYear){date.setFullYear(year);setMonth(11);}break;case
1:if(mon<11){setMonth(mon+1);}else
if(year<cal.maxYear){date.setFullYear(year+1);setMonth(0);}break;case
2:if(year<cal.maxYear){date.setFullYear(year+1);}break;case
100:cal.setMondayFirst(!cal.mondayFirst);return;case 50:var range=el._range;var
current=el.firstChild.data;for(var
i=range.length;--i>=0;)if(range[i]==current)break;if(ev&&ev.shiftKey){if(!(--i
in range))i=range.length-1;}else if(!(++i in range))i=0;var
newval=range[i];el.firstChild.data=newval;cal.onUpdateTime();return;case
0:if((typeof
cal.getDateStatus=="function")&&cal.getDateStatus(date,date.getFullYear(),date.getMonth(),date.getDate())){return
false;}break;}if(!date.equalsTo(cal.date)){cal.setDate(date);newdate=true;}}if(newdate){cal.callHandler();}if(closing){Calendar.removeClass(el,"hilite");cal.callCloseHandler();}};Calendar.prototype.create=function(_par){var
parent=null;if(!_par){parent=document.getElementsByTagName("body")[0];this.isPopup=true;}else{parent=_par;this.isPopup=false;}this.date=this.dateStr?new
Date(this.dateStr):new Date();var
table=Calendar.createElement("table");this.table=table;table.cellSpacing=0;table.cellPadding=0;table.calendar=this;Calendar.addEvent(table,"mousedown",Calendar.tableMouseDown);var
div=Calendar.createElement("div");this.element=div;div.className="calendar";if(this.isPopup){div.style.position="absolute";div.style.display="none";}div.appendChild(table);var
thead=Calendar.createElement("thead",table);var cell=null;var row=null;var
cal=this;var
hh=function(text,cs,navtype){cell=Calendar.createElement("td",row);cell.colSpan=cs;cell.className="button";if(navtype!=0&&Math.abs(navtype)<=2)cell.className+="
nav";Calendar._add_evs(cell);cell.calendar=cal;cell.navtype=navtype;if(text.substr(0,1)!="&"){cell.appendChild(document.createTextNode(text));}else{cell.innerHTML=text;}return
cell;};row=Calendar.createElement("tr",thead);var
title_length=6;(this.isPopup)&&--title_length;(this.weekNumbers)&&++title_length;hh("?",1,400).ttip=Calendar._TT["INFO"];this.title=hh("",title_length,300);this.title.className="title";if(this.isPopup){this.title.ttip=Calendar._TT["DRAG_TO_MOVE"];this.title.style.cursor="move";hh("×",1,200).ttip=Calendar._TT["CLOSE"];}row=Calendar.createElement("tr",thead);row.className="headrow";this._nav_py=hh("«",1,-2);this._nav_py.ttip=Calendar._TT["PREV_YEAR"];this._nav_pm=hh("‹",1,-1);this._nav_pm.ttip=Calendar._TT["PREV_MONTH"];this._nav_now=hh(Calendar._TT["TODAY"],this.weekNumbers?4:3,0);this._nav_now.ttip=Calendar._TT["GO_TODAY"];this._nav_nm=hh("›",1,1);this._nav_nm.ttip=Calendar._TT["NEXT_MONTH"];this._nav_ny=hh("»",1,2);this._nav_ny.ttip=Calendar._TT["NEXT_YEAR"];row=Calendar.createElement("tr",thead);row.className="daynames";if(this.weekNumbers){cell=Calendar.createElement("td",row);cell.className="name
wn";cell.appendChild(document.createTextNode(Calendar._TT["WK"]));}for(var
i=7;i>0;--i){cell=Calendar.createElement("td",row);cell.appendChild(document.createTextNode(""));if(!i){cell.navtype=100;cell.calendar=this;Calendar._add_evs(cell);}}this.firstdayname=(this.weekNumbers)?row.firstChild.nextSibling:row.firstChild;this._displayWeekdays();var
tbody=Calendar.createElement("tbody",table);this.tbody=tbody;for(i=6;i>0;--i){row=Calendar.createElement("tr",tbody);if(this.weekNumbers){cell=Calendar.createElement("td",row);cell.appendChild(document.createTextNode(""));}for(var
j=7;j>0;--j){cell=Calendar.createElement("td",row);cell.appendChild(document.createTextNode(""));cell.calendar=this;Calendar._add_evs(cell);}}if(this.showsTime){row=Calendar.createElement("tr",tbody);row.className="time";cell=Calendar.createElement("td",row);cell.className="time";cell.colSpan=2;cell.innerHTML=" ";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=" ";cal.onSetTime=function(){var
hrs=this.date.getHours();var mins=this.date.getMinutes();var
pm=(hrs>12);if(pm&&t12)hrs-=12;H.firstChild.data=(hrs<10)?("0"+hrs):hrs;M.firstChild.data=(mins<10)?("0"+mins):mins;if(t12)AP.firstChild.data=pm?"pm":"am";};cal.onUpdateTime=function(){var
date=this.date;var
h=parseInt(H.firstChild.data,10);if(t12){if(/pm/i.test(AP.firstChild.data)&&h<12)h+=12;else
if(/am/i.test(AP.firstChild.data)&&h==12)h=0;}var d=date.getDate();var
m=date.getMonth();var
y=date.getFullYear();date.setHours(h);date.setMinutes(parseInt(M.firstChild.data,10));date.setFullYear(y);date.setMonth(m);date.setDate(d);this.dateClicked=false;this.callHandler();};})();}else{this.onSetTime=this.onUpdateTime=function(){};}var
tfoot=Calendar.createElement("tfoot",table);row=Calendar.createElement("tr",tfoot);row.className="footrow";cell=hh(Calendar._TT["SEL_DATE"],this.weekNumbers?8:7,300);cell.className="ttip";if(this.isPopup){cell.ttip=Calendar._TT["DRAG_TO_MOVE"];cell.style.cursor="move";}this.tooltips=cell;div=Calendar.createElement("div",this.element);this.monthsCombo=div;div.className="combo";for(i=0;i<Calendar._MN.length;++i){var
mn=Calendar.createElement("div");mn.className=Calendar.is_ie?"label-IEfix":"label";mn.month=i;mn.appendChild(document.createTextNode(Calendar._SMN[i]));div.appendChild(mn);}div=Calendar.createElement("div",this.element);this.yearsCombo=div;div.className="combo";for(i=12;i>0;--i){var
yr=Calendar.createElement("div");yr.className=Calendar.is_ie?"label-IEfix":"label";yr.appendChild(document.createTextNode(""));div.appendChild(yr);}this._init(this.mondayFirst,this.date);parent.appendChild(this.element);};Calendar._keyEvent=function(ev){if(!window.calendar){return
false;}(Calendar.is_ie)&&(ev=window.event);var cal=window.calendar;var
act=(Calendar.is_ie||ev.type=="keypress");if(ev.ctrlKey){switch(ev.keyCode){case
37:act&&Calendar.cellClick(cal._nav_pm);break;case
38:act&&Calendar.cellClick(cal._nav_py);break;case
39:act&&Calendar.cellClick(cal._nav_nm);break;case
40:act&&Calendar.cellClick(cal._nav_ny);break;default:return false;}}else
switch(ev.keyCode){case 32:Calendar.cellClick(cal._nav_now);break;case
27:act&&cal.hide();break;case 37:case 38:case 39:case 40:if(act){var
date=cal.date.getDate()-1;var el=cal.currentDateEl;var ne=null;var
prev=(ev.keyCode==37)||(ev.keyCode==38);switch(ev.keyCode){case
37:(--date>=0)&&(ne=cal.ar_days[date]);break;case
38:date-=7;(date>=0)&&(ne=cal.ar_days[date]);break;case
39:(++date<cal.ar_days.length)&&(ne=cal.ar_days[date]);break;case
40:date+=7;(date<cal.ar_days.length)&&(ne=cal.ar_days[date]);break;}if(!ne){if(prev){Calendar.cellClick(cal._nav_pm);}else{Calendar.cellClick(cal._nav_nm);}date=(prev)?cal.date.getMonthDays():1;el=cal.currentDateEl;ne=cal.ar_days[date-1];}Calendar.removeClass(el,"selected");Calendar.addClass(ne,"selected");cal.date.setDate(ne.caldate);cal.callHandler();cal.currentDateEl=ne;}break;case
13:if(act){cal.callHandler();cal.hide();}break;default:return false;}return
Calendar.stopEvent(ev);};Calendar.prototype._init=function(mondayFirst,date){var
today=new Date();var
year=date.getFullYear();if(year<this.minYear){year=this.minYear;date.setFullYear(year);}else
if(year>this.maxYear){year=this.maxYear;date.setFullYear(year);}this.mondayFirst=mondayFirst;this.date=new
Date(date);var month=date.getMonth();var mday=date.getDate();var
no_days=date.getMonthDays();date.setDate(1);var wday=date.getDay();var
MON=mondayFirst?1:0;var SAT=mondayFirst?5:6;var
SUN=mondayFirst?6:0;if(mondayFirst){wday=(wday>0)?(wday-1):6;}var iday=1;var
row=this.tbody.firstChild;var MN=Calendar._SMN[month];var
hasToday=((today.getFullYear()==year)&&(today.getMonth()==month));var
todayDate=today.getDate();var week_number=date.getWeekNumber();var ar_days=new
Array();for(var
i=0;i<6;++i){if(iday>no_days){row.className="emptyrow";row=row.nextSibling;continue;}var
cell=row.firstChild;if(this.weekNumbers){cell.className="day
wn";cell.firstChild.data=week_number;cell=cell.nextSibling;}++week_number;row.className="daysrow";for(var
j=0;j<7;++j){cell.className="day";if((!i&&j<wday)||iday>no_days){cell.innerHTML=" ";cell.disabled=true;cell=cell.nextSibling;continue;}cell.disabled=false;cell.firstChild.data=iday;if(typeof
this.getDateStatus=="function"){date.setDate(iday);var
status=this.getDateStatus(date,year,month,iday);if(status===true){cell.className+="
disabled";cell.disabled=true;}else{if(/disabled/i.test(status))cell.disabled=true;cell.className+="
"+status;}}if(!cell.disabled){ar_days[ar_days.length]=cell;cell.caldate=iday;cell.ttip="_";if(iday==mday){cell.className+="
selected";this.currentDateEl=cell;}if(hasToday&&(iday==todayDate)){cell.className+="
today";cell.ttip+=Calendar._TT["PART_TODAY"];}if(wday==SAT||wday==SUN){cell.className+="
weekend";}}++iday;((++wday)^
7)||(wday=0);cell=cell.nextSibling;}row=row.nextSibling;}this.ar_days=ar_days;this.title.firstChild.data=Calendar._MN[month]+",
"+year;this.onSetTime();};Calendar.prototype.setDate=function(date){if(!date.equalsTo(this.date)){this._init(this.mondayFirst,date);}};Calendar.prototype.refresh=function(){this._init(this.mondayFirst,this.date);};Calendar.prototype.setMondayFirst=function(mondayFirst){this._init(mondayFirst,this.date);this._displayWeekdays();};Calendar.prototype.setDateStatusHandler=Calendar.prototype.setDisabledHandler=function(unaryFunction){this.getDateStatus=unaryFunction;};Calendar.prototype.setRange=function(a,z){this.minYear=a;this.maxYear=z;};Calendar.prototype.callHandler=function(){if(this.onSelected){this.onSelected(this,this.date.print(this.dateFormat));}};Calendar.prototype.callCloseHandler=function(){if(this.onClose){this.onClose(this);}this.hideShowCovered();};Calendar.prototype.destroy=function(){var
el=this.element.parentNode;el.removeChild(this.element);Calendar._C=null;window.calendar=null;};Calendar.prototype.reparent=function(new_parent){var
el=this.element;el.parentNode.removeChild(el);new_parent.appendChild(el);};Calendar._checkCalendar=function(ev){if(!window.calendar){return
false;}var
el=Calendar.is_ie?Calendar.getElement(ev):Calendar.getTargetElement(ev);for(;el!=null&&el!=calendar.element;el=el.parentNode);if(el==null){window.calendar.callCloseHandler();return
Calendar.stopEvent(ev);}};Calendar.prototype.show=function(){var
rows=this.table.getElementsByTagName("tr");for(var i=rows.length;i>0;){var
row=rows[--i];Calendar.removeClass(row,"rowhilite");var
cells=row.getElementsByTagName("td");for(var j=cells.length;j>0;){var
cell=cells[--j];Calendar.removeClass(cell,"hilite");Calendar.removeClass(cell,"active");}}this.element.style.display="block";this.hidden=false;if(this.isPopup){window.calendar=this;Calendar.addEvent(document,"keydown",Calendar._keyEvent);Calendar.addEvent(document,"keypress",Calendar._keyEvent);Calendar.addEvent(document,"mousedown",Calendar._checkCalendar);}this.hideShowCovered();};Calendar.prototype.hide=function(){if(this.isPopup){Calendar.removeEvent(document,"keydown",Calendar._keyEvent);Calendar.removeEvent(document,"keypress",Calendar._keyEvent);Calendar.removeEvent(document,"mousedown",Calendar._checkCalendar);}this.element.style.display="none";this.hidden=true;this.hideShowCovered();};Calendar.prototype.showAt=function(x,y){var
s=this.element.style;s.left=x+"px";s.top=y+"px";this.show();};Calendar.prototype.showAtElement=function(el,opts){var
self=this;var p=Calendar.getAbsolutePos(el);if(!opts||typeof
opts!="string"){this.showAt(p.x,p.y+el.offsetHeight);return
true;}this.element.style.display="block";Calendar.continuation_for_the_fucking_khtml_browser=function(){var
w=self.element.offsetWidth;var
h=self.element.offsetHeight;self.element.style.display="none";var
valign=opts.substr(0,1);var
halign="l";if(opts.length>1){halign=opts.substr(1,1);}switch(valign){case
"T":p.y-=h;break;case "B":p.y+=el.offsetHeight;break;case
"C":p.y+=(el.offsetHeight-h)/2;break;case "t":p.y+=el.offsetHeight-h;break;case
"b":break;}switch(halign){case "L":p.x-=w;break;case
"R":p.x+=el.offsetWidth;break;case "C":p.x+=(el.offsetWidth-w)/2;break;case
"r":p.x+=el.offsetWidth-w;break;case
"l":break;}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();};Calendar.prototype.setDateFormat=function(str){this.dateFormat=str;};Calendar.prototype.setTtDateFormat=function(str){this.ttDateFormat=str;};Calendar.prototype.parseDate=function(str,fmt){var
y=0;var m=-1;var d=0;var a=str.split(/\W+/);if(!fmt){fmt=this.dateFormat;}var
b=[];fmt.replace(/(%.)/g,function(str,par){return b[b.length]=par;});var
i=0,j=0;var hr=0;var
min=0;for(i=0;i<a.length;++i){if(b[i]=="%a"||b[i]=="%A"){continue;}if(b[i]=="%d"||b[i]=="%e"){d=parseInt(a[i],10);}if(b[i]=="%m"){m=parseInt(a[i],10)-1;}if(b[i]=="%Y"||b[i]=="%y"){y=parseInt(a[i],10);(y<100)&&(y+=(y>29)?1900:2000);}if(b[i]=="%b"||b[i]=="%B"){for(j=0;j<12;++j){if(Calendar._MN[j].substr(0,a[i].length).toLowerCase()==a[i].toLowerCase()){m=j;break;}}}else
if(/%[HIkl]/.test(b[i])){hr=parseInt(a[i],10);}else
if(/%[pP]/.test(b[i])){if(/pm/i.test(a[i])&&hr<12)hr+=12;}else
if(b[i]=="%M"){min=parseInt(a[i],10);}}if(y!=0&&m!=-1&&d!=0){this.setDate(new
Date(y,m,d,hr,min,0));return;}y=0;m=-1;d=0;for(i=0;i<a.length;++i){if(a[i].search(/[a-zA-Z]+/)!=-1){var
t=-1;for(j=0;j<12;++j){if(Calendar._MN[j].substr(0,a[i].length).toLowerCase()==a[i].toLowerCase()){t=j;break;}}if(t!=-1){if(m!=-1){d=m+1;}m=t;}}else
if(parseInt(a[i],10)<=12&&m==-1){m=a[i]-1;}else
if(parseInt(a[i],10)>31&&y==0){y=parseInt(a[i],10);(y<100)&&(y+=(y>29)?1900:2000);}else
if(d==0){d=a[i];}}if(y==0){var today=new
Date();y=today.getFullYear();}if(m!=-1&&d!=0){this.setDate(new
Date(y,m,d,hr,min,0));}};Calendar.prototype.hideShowCovered=function(){var
self=this;Calendar.continuation_for_the_fucking_khtml_browser=function(){function
getVisib(obj){var
value=obj.style.visibility;if(!value){if(document.defaultView&&typeof(document.defaultView.getComputedStyle)=="function"){if(!Calendar.is_khtml)value=document.defaultView.
getComputedStyle(obj,"").getPropertyValue("visibility");else value='';}else
if(obj.currentStyle){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";}}}};if(Calendar.is_khtml)setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()",10);else
Calendar.continuation_for_the_fucking_khtml_browser();};Calendar.prototype._displayWeekdays=function(){var
MON=this.mondayFirst?0:1;var SUN=this.mondayFirst?6:0;var
SAT=this.mondayFirst?5:6;var cell=this.firstdayname;for(var
i=0;i<7;++i){cell.className="day
name";if(!i){cell.ttip=this.mondayFirst?Calendar._TT["SUN_FIRST"]:Calendar._TT["MON_FIRST"];cell.navtype=100;cell.calendar=this;Calendar._add_evs(cell);}if(i==SUN||i==SAT){Calendar.addClass(cell,"weekend");}cell.firstChild.data=Calendar._SDN[i+1-MON];cell=cell.nextSibling;}};Calendar.prototype._hideCombos=function(){this.monthsCombo.style.display="none";this.yearsCombo.style.display="none";};Calendar.prototype._dragStart=function(ev){if(this.dragging){return;}this.dragging=true;var
posX;var
posY;if(Calendar.is_ie){posY=window.event.clientY+document.body.scrollTop;posX=window.event.clientX+document.body.scrollLeft;}else{posY=ev.clientY+window.scrollY;posX=ev.clientX+window.scrollX;}var
st=this.element.style;this.xOffs=posX-parseInt(st.left);this.yOffs=posY-parseInt(st.top);with(Calendar){addEvent(document,"mousemove",calDragIt);addEvent(document,"mouseover",stopEvent);addEvent(document,"mouseup",calDragEnd);}};Date._MD=new
Array(31,28,31,30,31,30,31,31,30,31,30,31);Date.SECOND=1000;Date.MINUTE=60*Date.SECOND;Date.HOUR=60*Date.MINUTE;Date.DAY=24*Date.HOUR;Date.WEEK=7*Date.DAY;Date.prototype.getMonthDays=function(month){var
year=this.getFullYear();if(typeof
month=="undefined"){month=this.getMonth();}if(((0==(year%4))&&((0!=(year%100))||(0==(year%400))))&&month==1){return
29;}else{return Date._MD[month];}};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);};Date.prototype.getWeekNumber=function(){var now=new
Date(this.getFullYear(),this.getMonth(),this.getDate(),0,0,0);var then=new
Date(this.getFullYear(),0,1,0,0,0);var time=now-then;var
day=then.getDay();if(day==0)day=7;(day>4)&&(day-=4)||(day+=3);return
Math.round(((time/Date.DAY)+day)/7);};Date.prototype.equalsTo=function(date){return((this.getFullYear()==date.getFullYear())&&(this.getMonth()==date.getMonth())&&(this.getDate()==date.getDate())&&(this.getHours()==date.getHours())&&(this.getMinutes()==date.getMinutes()));};Date.prototype.print=function(str){var
m=this.getMonth();var d=this.getDate();var y=this.getFullYear();var
wn=this.getWeekNumber();var w=this.getDay();var s={};var hr=this.getHours();var
pm=(hr>=12);var ir=(pm)?(hr-12):hr;var
dy=this.getDayOfYear();if(ir==0)ir=12;var min=this.getMinutes();var
sec=this.getSeconds();s["%a"]=Calendar._SDN[w];s["%A"]=Calendar._DN[w];s["%b"]=Calendar._SMN[m];s["%B"]=Calendar._MN[m];s["%C"]=1+Math.floor(y/100);s["%d"]=(d<10)?("0"+d):d;s["%e"]=d;s["%H"]=(hr<10)?("0"+hr):hr;s["%I"]=(ir<10)?("0"+ir):ir;s["%j"]=(dy<100)?((dy<10)?("00"+dy):("0"+dy)):dy;s["%k"]=hr;s["%l"]=ir;s["%m"]=(m<9)?("0"+(1+m)):(1+m);s["%M"]=(min<10)?("0"+min):min;s["%n"]="\n";s["%p"]=pm?"PM":"AM";s["%P"]=pm?"pm":"am";s["%s"]=Math.floor(this.getTime()/1000);s["%S"]=(sec<10)?("0"+sec):sec;s["%t"]="\t";s["%U"]=s["%W"]=s["%V"]=(wn<10)?("0"+wn):wn;s["%u"]=w+1;s["%w"]=w;s["%y"]=(''+y).substr(2,2);s["%Y"]=y;s["%%"]="%";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');}return str.replace(re,function(match,par){return
s[par];});};window.calendar=null;
--- NEW FILE: simple-3.html ---
<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 — 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
><div style="float: right; margin-left: 1em; margin-bottom: 1em;"
id="calendar-container"></div>
<script type="text/javascript">
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
}
);
</script></pre>
</body>
</html>
--- NEW FILE: calendar-brown.css ---
/* The main calendar widget. DIV containing a table. */
div.calendar { position: relative; }
.calendar, .calendar table {
border: 1px solid #655;
font-size: 11px;
color: #000;
cursor: default;
background: #ffd;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /* They are the navigation buttons */
padding: 2px; /* Make the buttons seem like they're pressing */
}
.calendar .nav {
background: #edc url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
background: #654;
color: #fed;
padding: 2px;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
background: #edc;
color: #000;
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #655;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background-color: #faa;
color: #000;
border: 1px solid #f40;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background-color: #c77;
padding: 2px 0px 0px 2px;
}
.calendar thead .daynames { /* Row <TR> containing the day names */
background: #fed;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #fed;
}
.calendar tbody .rowhilite td {
background: #ddf;
}
.calendar tbody .rowhilite td.wn {
background: #efe;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
background: #ffe;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
background: #ddc;
padding: 2px 2px 0px 2px;
}
.calendar tbody td.selected { /* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #fea;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { font-weight: bold; }
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
text-align: center;
background: #988;
color: #000;
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
border-top: 1px solid #655;
background: #dcb;
color: #840;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
background: #faa;
border: 1px solid #f40;
padding: 1px;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
background: #c77;
padding: 2px 0px 0px 2px;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #ffe;
color: #000;
font-size: smaller;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
background: #fc8;
}
.combo .active {
border-top: 1px solid #a64;
border-bottom: 1px solid #a64;
background: #fee;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #a88;
padding: 1px 0px;
text-align: center;
background-color: #fed;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #988;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #866;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: index.html ---
<?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";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="ro" lang="ro">
<!-- $Id: index.html,v 1.1.2.1 2003/11/16 14:23:48 skwashd Exp $ -->
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>The Coolest DHTML Calendar - Online Demo</title>
<link rel="alternate stylesheet" type="text/css" media="all"
href="calendar-blue.css" title="winter" />
<link rel="alternate stylesheet" type="text/css" media="all"
href="calendar-brown.css" title="summer" />
<link rel="alternate stylesheet" type="text/css" media="all"
href="calendar-green.css" title="green" />
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-1.css"
title="win2k-1" />
<link rel="alternate stylesheet" type="text/css" media="all"
href="calendar-win2k-2.css" title="win2k-2" />
<link rel="alternate stylesheet" type="text/css" media="all"
href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<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" />
<!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script>
<!-- import the language module -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- other languages might be available in the lang directory; please check
your distribution archive. -->
<!-- helper script that uses the calendar -->
<script type="text/javascript">
var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link;
link.style.fontWeight = 'bold';
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
cal.destroy();
calendar = null;
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format, showsTime) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(true, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
// the reference element that we pass to showAtElement is the button that
// triggers the calendar. In this example we align the calendar bottom-right
// to the button.
calendar.showAtElement(el.nextSibling, "Br"); // show the calendar
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date" given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() {
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(true, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("%A, %B %e");
// this call must be the last as it might use data initialized above; if
// we specify a parent, as opposite to the "showCalendar" function above,
// then we create a flat calendar -- not popup. Hidden, though, but...
cal.create(parent);
// ... we can show it here.
cal.show();
}
</script>
<style type="text/css">
.ex { font-weight: bold; background: #fed; color: #080 }
.help { color: #080; font-style: italic; }
body { background: #fea; font: 10pt tahoma,verdana,sans-serif; }
table { font: 13px verdana,tahoma,sans-serif; }
a { color: #00f; }
a:visited { color: #00f; }
a:hover { color: #f00; background: #fefaf0; }
a:active { color: #08f; }
.key { border: 1px solid #000; background: #fff; color: #008;
padding: 0px 5px; cursor: default; font-size: 80%; }
</style>
</head>
<body onload="showFlatCalendar()">
<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>
<div style="float: right; border: 1px solid #b87; padding: 2px; font-size: 90%;
background: #ffb;">
Theme:<br />
<a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
<br />
<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this,
'win2k-1');">win2k-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
|
<a href="#" onclick="return setActiveStyleSheet(this,
'win2k-cold-1');">win2k-cold-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this,
'win2k-cold-2');">win2k-cold-2</a>
<br />
<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
<script type="text/javascript">
setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1");
</script>
</div>
<a href="release-notes.html">Release notes</a>.
<br />
Set it up in minutes:
<a href="simple-1.html">popup calendar</a>,
<a href="simple-2.html">flat calendar</a>.
<br />
Documentation:
<a href="doc/html/reference.html">HTML</a>,
<a href="doc/reference.pdf">PDF</a>.
<br />
<b style="color: red">Donate! Keep me on it! Details on <a
href="http://dynarch.com/mishoo/calendar.epl";>the Calendar website</a>.</b>
</p>
<div style="padding-left:20px; font-size: 90%; font-style: italic;">
</div>
<table style="width: 100%">
<tr valign="top">
<td style="background: #ffa; padding: 5px; border: 1px solid #995;">
<form action="#">
<div style="background: #995; color: #ffa; font-weight: bold; padding: 2px;">
Popup examples
</div>
<br />
<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel1', '%Y-%m-%d [%W] %H:%M', '24');"> %Y-%m-%d
[%W] %H:%M -- single
click<br />
<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel2', '%a, %b %e, %Y [%I:%M%p]', '12');"> %a, %b
%e, %Y [%I:%M%p]
-- double click
<br /><br />
<!--
if you remove this comment and leave the following HTML code
you will see a horrible effect, in all supported browsers (IE and Mozilla).
-->
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
this select should hide when the calendar is above it.
<br /><br />
<b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel3', '%d/%m/%Y');"> %d/%m/%Y
-- single click
<br />
<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel4', '%A, %B %e, %Y');"> %A, %B %e, %Y --
double click
</form>
<p>This is release <b>0.9.5</b>. Works on MSIE/Win 5.0 or better, Opera 7,
Mozilla, Netscape 6.x, 7.0 and all other Gecko-s, Konqueror and Safari.</p>
<p class="help">You can click on "Mo"/"Su" (first day name displayed) to
change the first day of week (Sunday/Monday) (since 0.8 this is also mapped
on the "-" button in the top-left corner). Use the navigation buttons
("<<", "<", "Today", ">", ">>") to move to the prev/next
year/month. Keep the mouse button pressed for a short time over one of
these buttons to get a menu for faster selection. You can drag the "status
bar" (that's where the tooltips appear) or title bar (that's where the
currently selected month/year shows up) to move the whole calendar.</p>
<h4>Keyboard navigation</h4>
<p>Starting with version 0.9.2, you can also use the keyboard to select
dates (only for popup calendars; does <em>not</em> work with Opera
7 or Konqueror/Safari). The following keys are available:</p>
<ul>
<li><span class="key">←</span> , <span class="key">→</span> ,
<span class="key">↑</span> , <span class="key">↓</span> -- select
date</li>
<li><span class="key">CTRL</span> + <span class="key">←</span> ,
<span class="key">→</span> -- select month</li>
<li><span class="key">CTRL</span> + <span class="key">↑</span> ,
<span class="key">↓</span> -- select year</li>
<li><span class="key">SPACE</span> -- go to <em>today</em> date</li>
<li><span class="key">ENTER</span> -- accept the currently selected date</li>
<li><span class="key">ESC</span> -- cancel selection</li>
</ul>
</td>
<td style="padding: 5px; margin: 5px; border: 1px solid #984;
background: #ed9; width: 15em;">
<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" style="float: right; clear: both;"></div>
<div id="preview" style="font-size: 80%; text-align: center;
padding: 2px"></div>
<p style="width: 12em"><small>
The example above uses the <code>setDisabledHandler()</code>
member function
to setup a handler that would only enable days withing a range of
10 days,
forward or backward, from the current date.
</small></p>
</div>
</td>
</tr>
</table>
<hr /><address>
© <a href="http://dynarch.com";>dynarch.com</a> 2002-2003 <br />
Author: <a href="http://dynarch.com/mishoo/";>Mihai
Bazon</a><br /> Distributed under the <a
href="http://www.gnu.org/licenses/lgpl.html";>GNU LGPL</a>.</address>
<p style="font-size: smaller">If you use this script on a public page it
would be nice if you would <a href="mailto:address@hidden";>let me
know</a>.</p>
</body></html>
--- NEW FILE: calendar.js ---
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ------------------------------------------------------------------
*
* The DHTML Calendar, version 0.9.5 "Your favorite time, bis"
*
* Details and latest version at:
* http://dynarch.com/mishoo/calendar.epl
*
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*/
// $Id: calendar.js,v 1.1.2.1 2003/11/16 14:23:48 skwashd Exp $
/** The Calendar object constructor. */
Calendar = function (mondayFirst, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
[...1602 lines suppressed...]
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');
}
return str.replace(re, function(match, par) { return s[par]; });
};
// END: DATE OBJECT PATCHES
// global object that remembers the calendar
window.calendar = null;
--- NEW FILE: calendar-win2k-cold-1.css ---
/* The main calendar widget. DIV containing a table. */
.calendar {
position: relative;
display: none;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
font-size: 11px;
color: #000;
cursor: default;
background: #c8d0d4;
font-family: tahoma,verdana,sans-serif;
}
.calendar table {
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
font-size: 11px;
color: #000;
cursor: default;
background: #c8d0d4;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: #788084;
color: #fff;
text-align: center;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #000;
padding: 2px;
text-align: center;
background: #e8f0f4;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background-color: #d8e0e4;
}
.calendar thead .active { /* Active (pressed) buttons in header */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background-color: #b8c0c4;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #e8f4f0;
}
.calendar tbody .rowhilite td {
background: #d8e4e0;
}
.calendar tbody .rowhilite td.wn {
background: #c8d4d0;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border: 1px solid;
border-color: #fff #000 #000 #fff;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border: 1px solid;
border-color: #000 #fff #fff #000;
}
.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
padding: 2px 2px 0px 2px;
border: 1px solid;
border-color: #000 #fff #fff #000;
background: #d8e0e4;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: #e8f0f4;
padding: 1px;
border: 1px solid #000;
background: #788084;
color: #fff;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #d8e0e4;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
background: #d8e0e4;
font-size: smaller;
padding: 1px;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #c8d0d4;
padding: 0px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.combo .hilite {
background: #048;
color: #aef;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #e8f0f4;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #667;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: calendar-green.css ---
/* The main calendar widget. DIV containing a table. */
div.calendar { position: relative; }
.calendar, .calendar table {
border: 1px solid #565;
font-size: 11px;
color: #000;
cursor: default;
background: #efe;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /* They are the navigation buttons */
padding: 2px; /* Make the buttons seem like they're pressing */
background: #676;
color: #fff;
font-size: 90%;
}
.calendar .nav {
background: #676 url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
padding: 2px;
background: #250;
color: #efa;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #565;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #a66;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
background-color: #afa;
color: #000;
border: 1px solid #084;
padding: 1px;
}
.calendar thead .active { /* Active (pressed) buttons in header */
background-color: #7c7;
padding: 2px 0px 0px 2px;
}
.calendar thead .daynames { /* Row <TR> containing the day names */
background: #dfb;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
color: #564;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #8a8;
background: #dfb;
}
.calendar tbody .rowhilite td {
background: #dfd;
}
.calendar tbody .rowhilite td.wn {
background: #efe;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
background: #efd;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
background: #dec;
padding: 2px 2px 0px 2px;
}
.calendar tbody td.selected { /* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #f8fff8;
color: #000;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #a66;
}
.calendar tbody td.today { font-weight: bold; color: #0a0; }
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
text-align: center;
background: #565;
color: #fff;
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
padding: 2px;
background: #250;
color: #efa;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
background: #afa;
border: 1px solid #084;
color: #000;
padding: 1px;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
background: #7c7;
padding: 2px 0px 0px 2px;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #565;
background: #efd;
color: #000;
font-size: smaller;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .hilite {
background: #af8;
}
.combo .active {
border-top: 1px solid #6a4;
border-bottom: 1px solid #6a4;
background: #efe;
font-weight: bold;
}
.calendar td.time {
border-top: 1px solid #8a8;
padding: 1px 0px;
text-align: center;
background-color: #dfb;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #898;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #686;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: bugtest-hidden-selects.html ---
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="ro" lang="ro">
<head>
<title>Bug</title>
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-1.css"
title="win2k-1" />
<!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script>
<!-- import the language module -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- helper script that uses the calendar -->
<script type="text/javascript">
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.sel.id == "sel1" || cal.sel.id == "sel3")
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(false, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
calendar.showAtElement(el); // show the calendar below it
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date" given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
</script>
</head>
<body>
<form>
<b>Date:</b>
<br>
<input type="text" name="date1" id="sel1" size="30">
<input type="button" value="..." onclick="return showCalendar('sel1',
'y-m-d');">
<p>
<br>
<br><b>Visible <select>, hides and unhides as expected</b>
<br>
<select name="foo" multiple>
<option value="1">can use the functions date.getFullYear() -- returns</option>
<option value="2">4 digit number, date.getMonth() -- returns the month</option>
<option value="3">heavy calculations here. However, beware that this</option>
</select>
<p>
<br><b>Hidden <select>, it should stay hidden (but doesn't)</b>
<br>
<select name="foo2" multiple style="visibility: hidden">
<option value="1">this should</option>
<option value="2">remain hidden right?</option>
</select>
<p>
<br><b>Hidden textbox below, it stays hidden as expected</b>
<br>
<input type="text" name="foo3" value="this stays hidden just fine"
style="visibility: hidden">
</form>
</body></html>
--- NEW FILE: release-notes.html ---
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html>
<head>
<title>jscalendar release notes</title>
<style type="text/css">
h1 { border-bottom: 1px solid #000; }
h2 { border-bottom: 1px solid #444; }
ul li { margin-top: 0.5em; margin-bottom: 0.5em; }
</style>
</head>
<body>
<h1>jscalendar release notes</h1>
<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>
<ul>
<li>Opera 7 compatibility — keyboard navigation is
still not available; text selection can't be disabled, leading to an
ugly effect when walking through the month/year menus.</li>
<li>Ability to align the calendar relative to the input field (or any
other element). Vertical: top, center, bottom. Horizontal: left,
center, right. This is established as a new parameter for
<tt>showAtElement</tt>.</li>
<li>Added <tt>dateClicked</tt> property (boolean). This can be
inspected in the "onSelect" handler to determine if a date was
really clicked or the user only changed month/year using the menus.
You <em>need</em> to check this for "single-click" calendars and
only close/hide the calendar if it's <tt>true</tt>.</li>
<li>Full documentation in <a href="doc/html/reference.html">HTML</a>
and <a href="doc/reference.pdf">PDF</a> format is now available in the
distribution archive.</li>
<li>New language definition files: HU, HR, PT, ZH. Thanks those who
submitted!</li>
</ul>
<h3>Bug status</h3>
<p>This covers only those bugs that have been reported <a
href="http://sourceforge.net/projects/jscalendar"; target="_blank"
title="Project page at SourceForge">at SourceForge</a>.</p>
<ol>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=703238&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#703,238</tt></a>
— fixed</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=703814&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#703,814</tt></a>
— fixed</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=716777&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#716,777</tt></a>
— closed (was fixed already in 0.9.2-1)</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=723335&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#723,335</tt></a>
— fixed</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=715122&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#715,122</tt></a>
— feature request; implemented.</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=721206&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#721,206</tt></a>
— fixed (added "refresh()" function)</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=721833&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#721,833</tt></a>
— fixed (bug concerning the "yy" format
parsing)</li>
<li><a
href="http://sourceforge.net/tracker/index.php?func=detail&aid=721833&group_id=75569&atid=544285";
target="_blank"
title="Go to bug description at sourceforge"><tt>#721,833</tt></a>
— won't fix (we won't set the time to
midnight; time might actually be useful when we implement support
for time selection).
</ol>
<hr />
<address><a href="http://dynarch.com/mishoo/";>Mihai Bazon</a></address>
<!-- Created: Tue Jul 8 17:29:37 EEST 2003 -->
<!-- hhmts start -->
Last modified on Wed Oct 29 02:37:07 2003
<!-- hhmts end -->
<!-- doc-lang: English -->
</body>
</html>
--- NEW FILE: calendar-setup_stripped.js ---
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://dynarch.com/mishoo/calendar.epl
*
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly. 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/%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;};};
--- NEW FILE: simple-1.html ---
<html style="background-color: buttonface; color: buttontext;">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Simple calendar setups [popup calendar]</title>
<!-- calendar stylesheet -->
<link rel="stylesheet" type="text/css" media="all"
href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<!-- main calendar program -->
<script type="text/javascript" src="calendar.js"></script>
<!-- language for the calendar -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- the following script defines the Calendar.setup helper function, which
makes
adding a calendar a matter of 1 or 2 lines of code. -->
<script type="text/javascript" src="calendar-setup.js"></script>
</head>
<body>
<h2>DHTML Calendar — for the impatient</h2>
<blockquote>
<p>
This page lists some common setups for the popup calendar. In
order to see how to do any of them please see the source of this
page. For each example it's structured like this: there's the
<form> that contains the input field, and following there is
the JavaScript snippet that setups that form. An example of
<em>flat</em> calendar is available in <a
href="simple-2.html">another page</a>.
</p>
<p>
The code in this page uses a helper function defined in
"calendar-setup.js". With it you can setup the calendar in
minutes. If you're not <em>that</em> impatient, ;-) <a
href="doc/html/reference.html">complete documenation</a> is
available.
</p>
</blockquote>
<hr />
<p><b>Basic setup: one input per calendar.</b> Clicking in the input field
activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The
calendar defaults to "single-click mode".</p>
<p>The example below has been updated to show you how to create "linked"
fields. Basically, when some field is filled with a date, the other
is updated so that the difference between them remains one week. The
property useful here is "onUpdate".</p>
<form action="#" method="get">
<input type="text" name="date" id="f_date_a" />
<input type="text" name="date" id="f_calcdate" />
</form>
<script type="text/javascript">
function catcalc(cal) {
var date = cal.date;
var time = date.getTime()
// use the _other_ field
var field = document.getElementById("f_calcdate");
if (field == cal.params.inputField) {
field = document.getElementById("f_date_a");
time -= Date.WEEK; // substract one week
} else {
time += Date.WEEK; // add one week
}
var date2 = new Date(time);
field.value = date2.print("%Y-%m-%d %H:%M");
}
Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
Calendar.setup({
inputField : "f_calcdate",
ifFormat : "%Y-%m-%d %H:%M",
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
</script>
<hr />
<p><b>Input field with a trigger button.</b> Clicking the button activates
the calendar. Note that this one needs double-click (singleClick parameter
is explicitely set to false).</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"—so that the user
can't directly see or modify it— and one is a <span> element in
which the date is displayed. Note that if the trigger is not specified the
calendar will use the displayArea (or inputField as in the first example).
The display area can have it's own format. This is useful if, for instance,
we need to store one format in the database (thus pass it in the input
field) but we wanna show a friendlier format to the end-user.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_d" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_d"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_d", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_d", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area, trigger image.</b> Very similar to the
previous example. The difference is that we also have a trigger image.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_e" />
</form>
<p>Your birthday: <span id="show_e">-- not entered --</span> <img
src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
red;" title="Date selector" onmouseover="this.style.background='red';"
onmouseout="this.style.background=''" />.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_e", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_e", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
button : "f_trigger_e", // trigger button (well, IMG in our
case)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area.</b> Very much like the previous examples,
but we now disable some dates (all weekends, that is, Saturdays and
Sundays).</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_f" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_f"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_f", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_f", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
dateStatusFunc : function (date) { // disable weekend days
(Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0)
? true : false;
}
});
</script>
</body>
</html>
--- NEW FILE: simple-4.html ---
<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 — for the impatient</h2>
<blockquote>
<p>
This page lists some common setups for the popup calendar. In
order to see how to do any of them please see the source of this
page. For each example it's structured like this: there's the
<form> that contains the input field, and following there is
the JavaScript snippet that setups that form. An example of
<em>flat</em> calendar is available in <a
href="simple-2.html">another page</a>.
</p>
<p>
The code in this page uses a helper function defined in
"calendar-setup.js". With it you can setup the calendar in
minutes. If you're not <em>that</em> impatient, ;-) <a
href="doc/html/reference.html">complete documenation</a> is
available.
</p>
</blockquote>
<hr />
<p><b>Basic setup: one input per calendar.</b> Clicking in the input field
activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The
calendar defaults to "single-click mode".</p>
<p>The example below has been updated to show you how to create "linked"
fields. Basically, when some field is filled with a date, the other
is updated so that the difference between them remains one week. The
property useful here is "onUpdate".</p>
<form action="#" method="get">
<input type="text" name="date" id="f_date_a" />
<input type="text" name="date" id="f_calcdate" />
</form>
<script type="text/javascript">
function catcalc(cal) {
var date = cal.date;
var time = date.getTime()
// use the _other_ field
var field = document.getElementById("f_calcdate");
if (field == cal.params.inputField) {
field = document.getElementById("f_date_a");
time -= Date.WEEK; // substract one week
} else {
time += Date.WEEK; // add one week
}
var date2 = new Date(time);
field.value = date2.print("%Y-%m-%d %H:%M");
}
Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
Calendar.setup({
inputField : "f_calcdate",
ifFormat : "%Y-%m-%d %H:%M",
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
</script>
<hr />
<p><b>Input field with a trigger button.</b> Clicking the button activates
the calendar. Note that this one needs double-click (singleClick parameter
is explicitely set to false).</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"—so that the user
can't directly see or modify it— and one is a <span> element in
which the date is displayed. Note that if the trigger is not specified the
calendar will use the displayArea (or inputField as in the first example).
The display area can have it's own format. This is useful if, for instance,
we need to store one format in the database (thus pass it in the input
field) but we wanna show a friendlier format to the end-user.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_d" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_d"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_d", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_d", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area, trigger image.</b> Very similar to the
previous example. The difference is that we also have a trigger image.</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_e" />
</form>
<p>Your birthday: <span id="show_e">-- not entered --</span> <img
src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
red;" title="Date selector" onmouseover="this.style.background='red';"
onmouseout="this.style.background=''" />.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_e", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_e", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
button : "f_trigger_e", // trigger button (well, IMG in our
case)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
<hr />
<p><b>Hidden field, display area.</b> Very much like the previous examples,
but we now disable some dates (all weekends, that is, Saturdays and
Sundays).</p>
<form action="#" method="get" style="visibility: hidden">
<input type="hidden" name="date" id="f_date_f" />
</form>
<p>Your birthday:
<span style="background-color: #ff8; cursor: default;"
onmouseover="this.style.backgroundColor='#ff0';"
onmouseout="this.style.backgroundColor='#ff8';"
id="show_f"
>Click to open date selector</span>.</p>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_f", // id of the input field
ifFormat : "%Y/%d/%m", // format of the input field (even
if hidden, this format will be honored)
displayArea : "show_f", // ID of the span where the date is
to be shown
daFormat : "%A, %B %d, %Y",// format of the displayed date
align : "Tl", // alignment (defaults to "Bl")
dateStatusFunc : function (date) { // disable weekend days
(Saturdays == 6 and Subdays == 0)
return (date.getDay() == 6 || date.getDay() == 0)
? true : false;
}
});
</script>
</div>
<div id="divHelp">
</div>
</body>
</html>
--- NEW FILE: calendar-system.css ---
/* The main calendar widget. DIV containing a table. */
.calendar {
position: relative;
display: none;
border: 1px solid;
border-color: #fff #000 #000 #fff;
font-size: 11px;
cursor: default;
background: Window;
color: WindowText;
font-family: tahoma,verdana,sans-serif;
}
.calendar table {
border: 1px solid;
border-color: #fff #000 #000 #fff;
font-size: 11px;
cursor: default;
background: Window;
color: WindowText;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
background: ButtonFace;
}
.calendar .nav {
background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: ActiveCaption;
color: CaptionText;
text-align: center;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid ButtonShadow;
padding: 2px;
text-align: center;
background: ButtonFace;
color: ButtonText;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border: 2px solid;
padding: 0px;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.calendar thead .active { /* Active (pressed) buttons in header */
border-width: 1px;
padding: 2px 0px 0px 2px;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid ButtonShadow;
background: ButtonFace;
color: ButtonText;
}
.calendar tbody .rowhilite td {
background: Highlight;
color: HighlightText;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}
.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 2px 0px 2px;
background: ButtonFace;
color: ButtonText;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}
.calendar tbody td.disabled { color: GrayText; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: ButtonFace;
padding: 1px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
color: ButtonText;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #e4e0d8;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
background: Menu;
color: MenuText;
font-size: smaller;
padding: 1px;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
padding: 0px;
border: 1px solid #000;
}
.combo .hilite {
background: Highlight;
color: HighlightText;
}
.calendar td.time {
border-top: 1px solid ButtonShadow;
padding: 1px 0px;
text-align: center;
background-color: ButtonFace;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: Menu;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: Highlight;
color: HighlightText;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
--- NEW FILE: calendar-setup.js ---
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.com/mishoo/
* ---------------------------------------------------------------------------
*
* The DHTML Calendar
*
* Details and latest version at:
* http://dynarch.com/mishoo/calendar.epl
*
* This script is distributed under the GNU Lesser General Public License.
* Read the entire license text here: http://www.gnu.org/licenses/lgpl.html
*
* This file defines helper functions for setting up the calendar. They are
* intended to help non-programmers get a working calendar on their site
* quickly. 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: calendar-setup.js,v 1.1.2.1 2003/11/16 14:23:47 skwashd Exp $
/**
* This function "patches" an input field (or other element) to use a calendar
* widget for date selection.
*
* The "params" is a single object that can have the following properties:
*
* prop. name | description
*
-------------------------------------------------------------------------------------------------
* inputField | the ID of an input field to store the date
* displayArea | the ID of a DIV or other element to show the date
* button | ID of a button or other element that will trigger the
calendar
* eventName | event that will trigger the calendar, without the "on"
prefix (default: "click")
* ifFormat | date format that will be stored in the input field
* daFormat | the date format that will be used to display the date in
displayArea
* singleClick | (true/false) wether the calendar is in single click mode
or not (default: true)
* mondayFirst | (true/false) if true Monday is the first day of week,
Sunday otherwise (default: true)
* align | alignment (default: "Bl"); if you don't know what's this
see the calendar documentation
* range | array with 2 elements. Default: [1900, 2999] -- the range
of years available
* weekNumbers | (true/false) if it's true (default) the calendar will
display week numbers
* flat | null or element ID; if not null the calendar will be a
flat calendar having the parent with the given ID
* flatCallback | function that receives a JS Date object and returns an URL
to point the browser to (for flat calendar)
* disableFunc | function that receives a JS Date object and should return
true if that date has to be disabled in the calendar
* onSelect | function that gets called when a date is selected. You
don't _have_ to supply this (the default is generally okay)
* onClose | function that gets called when the calendar is closed.
[default]
* onUpdate | function that gets called after the date is updated in the
input field. Receives a reference to the calendar.
* date | the date that the calendar will be initially displayed to
* showsTime | default: false; if true the calendar will include a time
selector
* timeFormat | the time format; can be "12" or "24", default is "12"
*
* None of them is required, they all have default values. However, if you
* pass none of "inputField", "displayArea" or "button" you'll get a warning
* saying "nothing to setup".
*/
Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] ==
"undefined") { params[pname] = def; } };
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"]); // takes
precedence if both are defined
param_default("mondayFirst", true);
param_default("align", "Bl");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) {
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;
};
};
--- NEW FILE: calendar-win2k-2.css ---
/* The main calendar widget. DIV containing a table. */
.calendar {
position: relative;
display: none;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
font-size: 11px;
color: #000;
cursor: default;
background: #d4c8d0;
font-family: tahoma,verdana,sans-serif;
}
.calendar table {
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
font-size: 11px;
color: #000;
cursor: default;
background: #d4c8d0;
font-family: tahoma,verdana,sans-serif;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
text-align: center;
padding: 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar .nav {
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}
.calendar thead .title { /* This holds the current "month, year" */
font-weight: bold;
padding: 1px;
border: 1px solid #000;
background: #847880;
color: #fff;
text-align: center;
}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
.calendar thead .daynames { /* Row <TR> containing the day names */
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom: 1px solid #000;
padding: 2px;
text-align: center;
background: #f4e8f0;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
color: #f00;
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #fff;
padding: 0px;
background-color: #e4d8e0;
}
.calendar thead .active { /* Active (pressed) buttons in header */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
background-color: #c4b8c0;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
width: 2em;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar table .wn {
padding: 2px 3px 2px 2px;
border-right: 1px solid #000;
background: #f4e8f0;
}
.calendar tbody .rowhilite td {
background: #e4d8e0;
}
.calendar tbody .rowhilite td.wn {
background: #d4c8d0;
}
.calendar tbody td.hilite { /* Hovered cells <TD> */
padding: 1px 3px 1px 1px;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
padding: 2px 2px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.calendar tbody td.selected { /* Cell showing selected date */
font-weight: bold;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
padding: 2px 2px 0px 2px;
background: #e4d8e0;
}
.calendar tbody td.weekend { /* Cells showing weekend days */
color: #f00;
}
.calendar tbody td.today { /* Cell showing today date */
font-weight: bold;
color: #00f;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
background: #f4e8f0;
padding: 1px;
border: 1px solid #000;
background: #847880;
color: #fff;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #e4d8e0;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
background: #e4d8e0;
font-size: smaller;
padding: 1px;
}
.combo .label,
.combo .label-IEfix {
text-align: center;
padding: 1px;
}
.combo .label-IEfix {
width: 4em;
}
.combo .active {
background: #d4c8d0;
padding: 0px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.combo .hilite {
background: #408;
color: #fea;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #766;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [Phpgroupware-cvs] phpgwapi/js/jscalendar README, NONE, 1.1.2.1 README-phpGW, NONE, 1.1.2.1 bugtest-hidden-selects.html, NONE, 1.1.2.1 calendar-blue.css, NONE, 1.1.2.1 calendar-brown.css, NONE, 1.1.2.1 calendar-green.css, NONE, 1.1.2.1 calendar-setup.js, NONE, 1.1.2.1 calendar-setup_stripped.js, NONE, 1.1.2.1 calendar-system.css, NONE, 1.1.2.1 calendar-win2k-1.css, NONE, 1.1.2.1 calendar-win2k-2.css, NONE, 1.1.2.1 calendar-win2k-cold-1.css, NONE, 1.1.2.1 calendar-win2k-cold-2.css, NONE, 1.1.2.1 calendar.js, NONE, 1.1.2.1 calendar_stripped.js, NONE, 1.1.2.1 img.gif, NONE, 1.1.2.1 index.html, NONE, 1.1.2.1 jscalendar-setup.php, NONE, 1.1.2.1 menuarrow.gif, NONE, 1.1.2.1 release-notes.html, NONE, 1.1.2.1 simple-1.html, NONE, 1.1.2.1 simple-2.html, NONE, 1.1.2.1 simple-3.html, NONE, 1.1.2.1 simple-4.html, NONE, 1.1.2.1,
Dave Hall <address@hidden> <=
- Prev by Date:
[Phpgroupware-cvs] phpgwapi/inc class.jscalendar.inc.php, 1.1.2.3, 1.1.2.4
- Next by Date:
[Phpgroupware-cvs] phpgwapi/js/jscalendar/doc/html reference-Z-S.css, NONE, 1.1.2.1 reference.css, NONE, 1.1.2.1 reference.html, NONE, 1.1.2.1
- Previous by thread:
[Phpgroupware-cvs] phpgwapi/inc class.jscalendar.inc.php, 1.1.2.3, 1.1.2.4
- Next by thread:
[Phpgroupware-cvs] phpgwapi/js/jscalendar/doc/html reference-Z-S.css, NONE, 1.1.2.1 reference.css, NONE, 1.1.2.1 reference.html, NONE, 1.1.2.1
- Index(es):