JavaScript DHTML/GUI Components/Calendar — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 10:44, 26 мая 2010
Содержание
- 1 A Dynamic Calendar Table
- 2 Month at a Glance (Dynamic)
- 3 The Boring DHTML Date Picker Widget
- 4 Month at a Glance (Static)
- 4.1 Building a Calculator
- 4.2 Calendar Control - 2-Up Implementation
- 4.3 Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
- 4.4 Calendar Control - Date Restriction Example (Date Restriction Implementation)
- 4.5 Calendar Control - Handling onSelect / onDeselect
- 4.6 Calendar Control - Mix/Max Implementation
- 4.7 Calendar Control - Multi-Select 2-up Implementation
- 4.8 Calendar Control - Multi-Select Implementation
- 4.9 Calendar Control - Row Highlight Example (Row Highlight Implementation)
- 4.10 Calendar Control - Single-Select Implementation
- 4.11 Calendar: day info
- 5 How to include additional info in day cells
- 6 Date Picker
- 7 Sample for the multiple dates feature
- 7.1 Calendar: special day
- 7.2 DHTML Calendar for the special day
- 7.3 Calendar with different theme
- 7.4 <a href="http://www.dynarch.ru/projects/calendar/" title="Visit the project website">jscalendar</a>-1.0 "It is happening again"
- 7.5 Calendar with image for each month
- 7.6 Date Picker in new window
- 7.7 Date Time Picker
- 7.8 DHTML Calendar for the impatient
- 7.9 DHTML Calendar for the impatient
- 7.10 Displaying the Calendar
- 7.11 Dynamic HTML Calendar
- 8 Month at a Glance (Dynamic HTML)
- 8.1 Event Calendar
- 8.2 Fancy Calendar
- 8.3 Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
- 8.4 HTML Calendar based on DynAPI
- 8.5 HTML Date Picker
- 8.6 JavaScript Date Picker based on ComboBox
- 8.7 jquery calendar
- 8.8 Month Calendar
- 8.9 Basic
- 8.10 Month Calendar (2)
- 8.11 Multiselection Calendar
- 8.12 Multiselect
- 8.13 Open calendar
- 8.14 Popup calendar
- 8.15 Popup Calendar for a textfield
- 8.16 Popup
- 8.17 swazz calendar 1.0
A Dynamic Calendar Table
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>JavaScripted Dynamic Table</TITLE> <SCRIPT LANGUAGE="JavaScript">
</SCRIPT> </HEAD> <BODY>
Month at a Glance (Dynamic)
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT> <SELECT NAME="chooseMonth"> <OPTION SELECTED>January<OPTION>February <OPTION>March<OPTION>April<OPTION>May <OPTION>June<OPTION>July<OPTION>August <OPTION>September<OPTION>October<OPTION>November<OPTION>December </SELECT> <SELECT NAME="chooseYear"> <OPTION SELECTED>2000<OPTION>2001 <OPTION>2002<OPTION>2003 <OPTION>2004<OPTION>2005 <OPTION>2006<OPTION>2007 </SELECT> <INPUT TYPE="button" NAME="updater" VALUE="Update Calendar" onClick="populateFields(this.form)"> </FORM> </BODY> </HTML>
</source>
All browser Calendar
<source lang="html4strict">
<html> <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>Simple calendar setups [popup calendar]</title>
<style rel="stylesheet" type="text/css" media="all" title="win2k-cold-1">
/* 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 tbody .day.othermonth {
font-size: 80%; color: #aaa;
} .calendar tbody .day.othermonth.oweekend {
color: #faa;
} .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) */ .calendar .rubo {
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: 90%; padding: 1px; z-index: 100;
} .calendar .rubo .label, .calendar .rubo .label-IEfix {
text-align: center; padding: 1px;
} .calendar .rubo .label-IEfix {
width: 4em;
} .calendar .rubo .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;
} .calendar .rubo .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;
}
</style> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo
* ----------------------------------------------------------- * * The DHTML Calendar, version 1.0 "It is happening again" * * Details and latest version at: * www.dynarch.ru/projects/calendar * * This script is developed by Dynarch.ru. Visit us at www.dynarch.ru. * * 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.51 2005/03/07 16:44:31 mishoo Exp $ /** The Calendar object constructor. */ Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
this.getDateStatus = null;
this.getDateToolTip = null;
this.getDateText = 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.firstDayOfWeek = typeof firstDayOfWeek == "number" ? firstDayOfWeek : Calendar._FD; // 0 for Sunday, 1 for Monday, etc.
this.showsOtherMonths = false;
this.dateStr = dateStr;
this.ar_days = null;
this.showsTime = false;
this.time24 = true;
this.yearStep = 2;
this.hiliteToday = true;
this.multiple = null;
// HTML elements
this.table = null;
this.element = null;
this.tbody = null;
this.firstdayname = null;
// Combo boxes
this.monthsCombo = null;
this.yearsCombo = null;
this.hilitedMonth = null;
this.activeMonth = null;
this.hilitedYear = null;
this.activeYear = null;
// Information
this.dateClicked = false;
// one-time initializations
if (typeof Calendar._SDN == "undefined") {
// table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array();
for (var i = 8; i > 0;) {
ar[--i] = Calendar._DN[i].substr(0, Calendar._SDN_len);
}
Calendar._SDN = ar;
// table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array();
for (var i = 12; i > 0;) {
ar[--i] = Calendar._MN[i].substr(0, Calendar._SMN_len);
}
Calendar._SMN = ar;
}
}; // ** constants /// "static", needed for event handlers. Calendar._C = null; /// detect a special case of "web browser" Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) );
Calendar.is_ie5 = ( Calendar.is_ie && /msie 5\.0/i.test(navigator.userAgent) ); /// detect Opera browser Calendar.is_opera = /opera/i.test(navigator.userAgent); /// detect KHTML-based browsers Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent); // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate // library, at some point. Calendar.getAbsolutePos = function(el) {
var 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 = this.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;
}; // FIXME: the following 2 functions totally suck, are useless and should be replaced immediately. Calendar.getElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.currentTarget; while (f.nodeType != 1 || /^div$/i.test(f.tagName)) f = f.parentNode; return f;
}; Calendar.getTargetElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.target; while (f.nodeType != 1) f = f.parentNode; return f;
}; 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) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
}; Calendar.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
}; Calendar.createElement = function(type, parent) {
var el = null;
if (document.createElementNS) {
// use the XHTML namespace; IE won"t normally get here unless
// _they_ "fix" the DOM2 implementation.
el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
} else {
el = document.createElement(type);
}
if (typeof parent != "undefined") {
parent.appendChild(el);
}
return el;
}; // END: UTILITY FUNCTIONS // BEGIN: CALENDAR STATIC FUNCTIONS /** Internal -- adds a set of events to make some element behave like a button. */ 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 {
var mcw = mc.offsetWidth;
if (typeof mcw == "undefined")
// Konqueror brain-dead techniques
mcw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - mcw) + "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.innerHTML = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else {
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? cal.yearStep : -cal.yearStep;
}
if (show) {
var s = yc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else {
var ycw = yc.offsetWidth;
if (typeof ycw == "undefined")
// Konqueror brain-dead techniques
ycw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - ycw) + "px";
}
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
}
}; // event handlers 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 < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = 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, "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.innerHTML;
addEvent(document, "mousemove", tableMouseOver);
} else
addEvent(document, Calendar.is_ie5 ? "mousemove" : "mouseover", tableMouseOver);
addClass(el, "hilite active");
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) == "_") {
el.ttip = el.caldate.print(el.calendar.ttDateFormat) + el.ttip.substr(1);
}
el.calendar.tooltips.innerHTML = 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");
if (el.calendar)
el.calendar.tooltips.innerHTML = _TT["SEL_DATE"];
return stopEvent(ev);
}
}; /**
* A generic "click" handler :) handles all types of buttons defined in this * calendar. */
Calendar.cellClick = function(el, ev) {
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == "undefined") {
if (cal.currentDateEl) {
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = (cal.currentDateEl == el);
if (!closing) {
cal.currentDateEl = el;
}
}
cal.date.setDateOnly(el.caldate);
date = cal.date;
var other_month = !(cal.dateClicked = !el.otherMonth);
if (!other_month && !cal.currentDateEl)
cal._toggleMultipleDate(new Date(date));
else
newdate = !el.disabled;
// a date was clicked
if (other_month)
cal._init(cal.firstDayOfWeek, date);
} else {
if (el.navtype == 200) {
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = new Date(cal.date);
if (el.navtype == 0)
date.setDateOnly(new Date()); // TODAY
// unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when
// in single-click mode.
// cal.dateClicked = (el.navtype == 0);
cal.dateClicked = 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 {
// FIXME: this should be removed as soon as lang files get updated!
text = "Help and about box text is not translated into this language.\n" +
"If you know this language and you feel generous please update\n" +
"the corresponding file in \"lang\" subdir to match calendar-en.js\n" +
"and send it back to <mihai_bazon@yahoo.ru> to get it into the distribution ;-)\n\n" +
"Thank you!\n" +
"http://dynarch.ru/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.setFirstDayOfWeek(el.fdow);
return;
case 50:
var range = el._range;
var current = el.innerHTML;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
if (ev && ev.shiftKey) {
if (--i < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = newval;
cal.onUpdateTime();
return;
case 0:
// TODAY will bring us here
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;
} else if (el.navtype == 0)
newdate = closing = true;
}
if (newdate) {
ev && cal.callHandler();
}
if (closing) {
Calendar.removeClass(el, "hilite");
ev && cal.callCloseHandler();
}
}; // END: CALENDAR STATIC FUNCTIONS // BEGIN: CALENDAR OBJECT FUNCTIONS /**
* This function creates the calendar inside the given parent. If _par is * null than it creates a popup calendar inside the BODY element. If _par is * an element, be it BODY, then it creates a non-popup calendar (still * hidden). Some properties need to be set before calling this function. */
Calendar.prototype.create = function (_par) {
var parent = null;
if (! _par) {
// default parent is the document body, in which case we create
// a popup calendar.
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;
cell.innerHTML = " 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"];
// day names
row = Calendar.createElement("tr", thead);
row.className = "daynames";
if (this.weekNumbers) {
cell = Calendar.createElement("td", row);
cell.className = "name wn";
cell.innerHTML = Calendar._TT["WK"];
}
for (var i = 7; i > 0; --i) {
cell = Calendar.createElement("td", row);
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);
}
for (var j = 7; j > 0; --j) {
cell = Calendar.createElement("td", row);
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 = Calendar._TT["TIME"] || " ";
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.innerHTML = 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.innerHTML = ":";
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 pm, hrs = this.date.getHours(),
mins = this.date.getMinutes();
if (t12) {
pm = (hrs >= 12);
if (pm) hrs -= 12;
if (hrs == 0) hrs = 12;
AP.innerHTML = pm ? "pm" : "am";
}
H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};
cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.innerHTML, 10);
if (t12) {
if (/pm/i.test(AP.innerHTML) && h < 12)
h += 12;
else if (/am/i.test(AP.innerHTML) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.innerHTML, 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.innerHTML = 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";
div.appendChild(yr);
}
this._init(this.firstDayOfWeek, this.date);
parent.appendChild(this.element);
}; /** keyboard navigation, only for popup calendars */ Calendar._keyEvent = function(ev) {
var cal = window._dynarch_popupCalendar;
if (!cal || cal.multiple)
return false;
(Calendar.is_ie) && (ev = window.event);
var act = (Calendar.is_ie || ev.type == "keypress"),
K = ev.keyCode;
if (ev.ctrlKey) {
switch (K) {
case 37: // KEY left
act && Calendar.cellClick(cal._nav_pm);
break;
case 38: // KEY up
act && Calendar.cellClick(cal._nav_py);
break;
case 39: // KEY right
act && Calendar.cellClick(cal._nav_nm);
break;
case 40: // KEY down
act && Calendar.cellClick(cal._nav_ny);
break;
default:
return false;
}
} else switch (K) {
case 32: // KEY space (now)
Calendar.cellClick(cal._nav_now);
break;
case 27: // KEY esc
act && cal.callCloseHandler();
break;
case 37: // KEY left
case 38: // KEY up
case 39: // KEY right
case 40: // KEY down
if (act) {
var prev, x, y, ne, el, step;
prev = K == 37 || K == 38;
step = (K == 37 || K == 39) ? 1 : 7;
function setVars() {
el = cal.currentDateEl;
var p = el.pos;
x = p & 15;
y = p >> 4;
ne = cal.ar_days[y][x];
};setVars();
function prevMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() - step);
cal.setDate(date);
};
function nextMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() + step);
cal.setDate(date);
};
while (1) {
switch (K) {
case 37: // KEY left
if (--x >= 0)
ne = cal.ar_days[y][x];
else {
x = 6;
K = 38;
continue;
}
break;
case 38: // KEY up
if (--y >= 0)
ne = cal.ar_days[y][x];
else {
prevMonth();
setVars();
}
break;
case 39: // KEY right
if (++x < 7)
ne = cal.ar_days[y][x];
else {
x = 0;
K = 40;
continue;
}
break;
case 40: // KEY down
if (++y < cal.ar_days.length)
ne = cal.ar_days[y][x];
else {
nextMonth();
setVars();
}
break;
}
break;
}
if (ne) {
if (!ne.disabled)
Calendar.cellClick(ne);
else if (prev)
prevMonth();
else
nextMonth();
}
}
break;
case 13: // KEY enter
if (act)
Calendar.cellClick(cal.currentDateEl, ev);
break;
default:
return false;
}
return Calendar.stopEvent(ev);
}; /**
* (RE)Initializes the calendar to the given date and firstDayOfWeek */
Calendar.prototype._init = function (firstDayOfWeek, date) {
var today = new Date(),
TY = today.getFullYear(),
TM = today.getMonth(),
TD = today.getDate();
this.table.style.visibility = "hidden";
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.firstDayOfWeek = firstDayOfWeek;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = date.getMonthDays();
// calendar voodoo for computing the first day that would actually be
// displayed in the calendar, even if it"s from the previous month.
// WARNING: this is magic. ;-)
date.setDate(1);
var day1 = (date.getDay() - this.firstDayOfWeek) % 7;
if (day1 < 0)
day1 += 7;
date.setDate(-day1);
date.setDate(date.getDate() + 1);
var row = this.tbody.firstChild;
var MN = Calendar._SMN[month];
var ar_days = this.ar_days = new Array();
var weekend = Calendar._TT["WEEKEND"];
var dates = this.multiple ? (this.datesCells = {}) : null;
for (var i = 0; i < 6; ++i, row = row.nextSibling) {
var cell = row.firstChild;
if (this.weekNumbers) {
cell.className = "day wn";
cell.innerHTML = date.getWeekNumber();
cell = cell.nextSibling;
}
row.className = "daysrow";
var hasdays = false, iday, dpos = ar_days[i] = [];
for (var j = 0; j < 7; ++j, cell = cell.nextSibling, date.setDate(iday + 1)) {
iday = date.getDate();
var wday = date.getDay();
cell.className = "day";
cell.pos = i << 4 | j;
dpos[j] = cell;
var current_month = (date.getMonth() == month);
if (!current_month) {
if (this.showsOtherMonths) {
cell.className += " othermonth";
cell.otherMonth = true;
} else {
cell.className = "emptycell";
cell.innerHTML = " ";
cell.disabled = true;
continue;
}
} else {
cell.otherMonth = false;
hasdays = true;
}
cell.disabled = false;
cell.innerHTML = this.getDateText ? this.getDateText(date, iday) : iday;
if (dates)
dates[date.print("%Y%m%d")] = cell;
if (this.getDateStatus) {
var status = this.getDateStatus(date, year, month, iday);
if (this.getDateToolTip) {
var toolTip = this.getDateToolTip(date, year, month, iday);
if (toolTip)
cell.title = toolTip;
}
if (status === true) {
cell.className += " disabled";
cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
}
}
if (!cell.disabled) {
cell.caldate = new Date(date);
cell.ttip = "_";
if (!this.multiple && current_month
&& iday == mday && this.hiliteToday) {
cell.className += " selected";
this.currentDateEl = cell;
}
if (date.getFullYear() == TY &&
date.getMonth() == TM &&
iday == TD) {
cell.className += " today";
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (weekend.indexOf(wday.toString()) != -1)
cell.className += cell.otherMonth ? " oweekend" : " weekend";
}
}
if (!(hasdays || this.showsOtherMonths))
row.className = "emptyrow";
}
this.title.innerHTML = Calendar._MN[month] + ", " + year;
this.onSetTime();
this.table.style.visibility = "visible";
this._initMultipleDates();
// PROFILE
// this.tooltips.innerHTML = "Generated in " + ((new Date()) - today) + " ms";
}; Calendar.prototype._initMultipleDates = function() {
if (this.multiple) {
for (var i in this.multiple) {
var cell = this.datesCells[i];
var d = this.multiple[i];
if (!d)
continue;
if (cell)
cell.className += " selected";
}
}
}; Calendar.prototype._toggleMultipleDate = function(date) {
if (this.multiple) {
var ds = date.print("%Y%m%d");
var cell = this.datesCells[ds];
if (cell) {
var d = this.multiple[ds];
if (!d) {
Calendar.addClass(cell, "selected");
this.multiple[ds] = date;
} else {
Calendar.removeClass(cell, "selected");
delete this.multiple[ds];
}
}
}
}; Calendar.prototype.setDateToolTipHandler = function (unaryFunction) {
this.getDateToolTip = unaryFunction;
}; /**
* Calls _init function above for going to a certain date (but only if the * date is different than the currently selected one). */
Calendar.prototype.setDate = function (date) {
if (!date.equalsTo(this.date)) {
this._init(this.firstDayOfWeek, date);
}
}; /**
* Refreshes the calendar. Useful if the "disabledHandler" function is * dynamic, meaning that the list of disabled date can change at runtime. * Just * call this function if you think that the list of disabled dates * should * change. */
Calendar.prototype.refresh = function () {
this._init(this.firstDayOfWeek, this.date);
}; /** Modifies the "firstDayOfWeek" parameter (pass 0 for Synday, 1 for Monday, etc.). */ Calendar.prototype.setFirstDayOfWeek = function (firstDayOfWeek) {
this._init(firstDayOfWeek, this.date); this._displayWeekdays();
}; /**
* Allows customization of what dates are enabled. The "unaryFunction" * parameter must be a function object that receives the date (as a JS Date * object) and returns a boolean value. If the returned value is true then * the passed date will be marked as disabled. */
Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.getDateStatus = unaryFunction;
}; /** Customization of allowed year range for the calendar. */ Calendar.prototype.setRange = function (a, z) {
this.minYear = a; this.maxYear = z;
}; /** Calls the first user handler (selectedHandler). */ Calendar.prototype.callHandler = function () {
if (this.onSelected) {
this.onSelected(this, this.date.print(this.dateFormat));
}
}; /** Calls the second user handler (closeHandler). */ Calendar.prototype.callCloseHandler = function () {
if (this.onClose) {
this.onClose(this);
}
this.hideShowCovered();
}; /** Removes the calendar object from the DOM tree and destroys it. */ Calendar.prototype.destroy = function () {
var el = this.element.parentNode; el.removeChild(this.element); Calendar._C = null; window._dynarch_popupCalendar = null;
}; /**
* Moves the calendar element to a different section in the DOM tree (changes * its parent). */
Calendar.prototype.reparent = function (new_parent) {
var el = this.element; el.parentNode.removeChild(el); new_parent.appendChild(el);
}; // This gets called when the user presses a mouse button anywhere in the // document, if the calendar is shown. If the click was outside the open // calendar this function closes it. Calendar._checkCalendar = function(ev) {
var calendar = window._dynarch_popupCalendar;
if (!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) {
// calls closeHandler which should hide the calendar.
window._dynarch_popupCalendar.callCloseHandler();
return Calendar.stopEvent(ev);
}
}; /** Shows the calendar. */ 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._dynarch_popupCalendar = this;
Calendar.addEvent(document, "keydown", Calendar._keyEvent);
Calendar.addEvent(document, "keypress", Calendar._keyEvent);
Calendar.addEvent(document, "mousedown", Calendar._checkCalendar);
}
this.hideShowCovered();
}; /**
* Hides the calendar. Also removes any "hilite" from the class of any TD * element. */
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();
}; /**
* Shows the calendar at a given absolute position (beware that, depending on * the calendar element style -- position property -- this might be relative * to the parent"s containing rectangle). */
Calendar.prototype.showAt = function (x, y) {
var s = this.element.style; s.left = x + "px"; s.top = y + "px"; this.show();
}; /** Shows the calendar near a given element. */ Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight);
return true;
}
function fixPosition(box) {
if (box.x < 0)
box.x = 0;
if (box.y < 0)
box.y = 0;
var cp = document.createElement("div");
var s = cp.style;
s.position = "absolute";
s.right = s.bottom = s.width = s.height = "0px";
document.body.appendChild(cp);
var br = Calendar.getAbsolutePos(cp);
document.body.removeChild(cp);
if (Calendar.is_ie) {
br.y += document.body.scrollTop;
br.x += document.body.scrollLeft;
} else {
br.y += window.scrollY;
br.x += window.scrollX;
}
var tmp = box.x + box.width - br.x;
if (tmp > 0) box.x -= tmp;
tmp = box.y + box.height - br.y;
if (tmp > 0) box.y -= tmp;
};
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);
}
// vertical alignment
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; // already there
}
// horizontal alignment
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 "l": p.x += el.offsetWidth - w; break;
case "r": break; // already there
}
p.width = w;
p.height = h + 40;
self.monthsCombo.style.display = "none";
fixPosition(p);
self.showAt(p.x, p.y);
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
}; /** Customizes the date format. */ Calendar.prototype.setDateFormat = function (str) {
this.dateFormat = str;
}; /** Customizes the tooltip date format. */ Calendar.prototype.setTtDateFormat = function (str) {
this.ttDateFormat = str;
}; /**
* Tries to identify the date represented in a string. If successful it also * calls this.setDate which moves the calendar to the given date. */
Calendar.prototype.parseDate = function(str, fmt) {
if (!fmt) fmt = this.dateFormat; this.setDate(Date.parseDate(str, fmt));
}; Calendar.prototype.hideShowCovered = function () {
if (!Calendar.is_ie && !Calendar.is_opera)
return;
function getVisib(obj){
var value = obj.style.visibility;
if (!value) {
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
if (!Calendar.is_khtml)
value = document.defaultView.
getComputedStyle(obj, "").getPropertyValue("visibility");
else
value = "";
} else if (obj.currentStyle) { // IE
value = obj.currentStyle.visibility;
} else
value = "";
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = this.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 (this.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";
}
}
}
}; /** Internal function; it displays the bar with the names of the weekday. */ Calendar.prototype._displayWeekdays = function () {
var fdow = this.firstDayOfWeek;
var cell = this.firstdayname;
var weekend = Calendar._TT["WEEKEND"];
for (var i = 0; i < 7; ++i) {
cell.className = "day name";
var realday = (i + fdow) % 7;
if (i) {
cell.ttip = Calendar._TT["DAY_FIRST"].replace("%s", Calendar._DN[realday]);
cell.navtype = 100;
cell.calendar = this;
cell.fdow = realday;
Calendar._add_evs(cell);
}
if (weekend.indexOf(realday.toString()) != -1) {
Calendar.addClass(cell, "weekend");
}
cell.innerHTML = Calendar._SDN[(i + fdow) % 7];
cell = cell.nextSibling;
}
}; /** Internal function. Hides all combo boxes that might be displayed. */ Calendar.prototype._hideCombos = function () {
this.monthsCombo.style.display = "none"; this.yearsCombo.style.display = "none";
}; /** Internal function. Starts dragging the element. */ 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, "mouseup", calDragEnd);
}
}; // BEGIN: DATE OBJECT PATCHES /** Adds the number of days array to the Date object. */ Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31); /** Constants used for time computations */ Date.SECOND = 1000 /* milliseconds */; Date.MINUTE = 60 * Date.SECOND; Date.HOUR = 60 * Date.MINUTE; Date.DAY = 24 * Date.HOUR; Date.WEEK = 7 * Date.DAY; Date.parseDate = function(str, fmt) {
var today = new Date();
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/\W+/);
var b = fmt.match(/%./g);
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (!a[i])
continue;
switch (b[i]) {
case "%d":
case "%e":
d = parseInt(a[i], 10);
break;
case "%m":
m = parseInt(a[i], 10) - 1;
break;
case "%Y":
case "%y":
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
break;
case "%b":
case "%B":
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
break;
case "%H":
case "%I":
case "%k":
case "%l":
hr = parseInt(a[i], 10);
break;
case "%P":
case "%p":
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
else if (/am/i.test(a[i]) && hr >= 12)
hr -= 12;
break;
case "%M":
min = parseInt(a[i], 10);
break;
}
}
if (isNaN(y)) y = today.getFullYear();
if (isNaN(m)) m = today.getMonth();
if (isNaN(d)) d = today.getDate();
if (isNaN(hr)) hr = today.getHours();
if (isNaN(min)) min = today.getMinutes();
if (y != 0 && m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
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)
y = today.getFullYear();
if (m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
return today;
}; /** Returns the number of days in the current month */ 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];
}
}; /** Returns the number of day in the year. */ Date.prototype.getDayOfYear = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var then = new Date(this.getFullYear(), 0, 0, 0, 0, 0); var time = now - then; return Math.floor(time / Date.DAY);
}; /** Returns the number of the week in year, as defined in ISO 8601. */ Date.prototype.getWeekNumber = function() {
var d = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var DoW = d.getDay(); d.setDate(d.getDate() - (DoW + 6) % 7 + 3); // Nearest Thu var ms = d.valueOf(); // GMT d.setMonth(0); d.setDate(4); // Thu in Week 1 return Math.round((ms - d.valueOf()) / (7 * 864e5)) + 1;
}; /** Checks date and time equality */ 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()));
}; /** Set only the year, month, date parts (keep existing time) */ Date.prototype.setDateOnly = function(date) {
var tmp = new Date(date); this.setDate(1); this.setFullYear(tmp.getFullYear()); this.setMonth(tmp.getMonth()); this.setDate(tmp.getDate());
}; /** Prints the date in a string according to the given format. */ 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]; // abbreviated weekday name [FIXME: I18N]
s["%A"] = Calendar._DN[w]; // full weekday name
s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["%B"] = Calendar._MN[m]; // full month name
// FIXME: %c : preferred date and time representation for the current locale
s["%C"] = 1 + Math.floor(y / 100); // the century number
s["%d"] = (d < 10) ? ("0" + d) : d; // the day of the month (range 01 to 31)
s["%e"] = d; // the day of the month (range 1 to 31)
// FIXME: %D : american date style: %m/%d/%y
// FIXME: %E, %F, %G, %g, %h (man strftime)
s["%H"] = (hr < 10) ? ("0" + hr) : hr; // hour, range 00 to 23 (24h format)
s["%I"] = (ir < 10) ? ("0" + ir) : ir; // hour, range 01 to 12 (12h format)
s["%j"] = (dy < 100) ? ((dy < 10) ? ("00" + dy) : ("0" + dy)) : dy; // day of the year (range 001 to 366)
s["%k"] = hr; // hour, range 0 to 23 (24h format)
s["%l"] = ir; // hour, range 1 to 12 (12h format)
s["%m"] = (m < 9) ? ("0" + (1+m)) : (1+m); // month, range 01 to 12
s["%M"] = (min < 10) ? ("0" + min) : min; // minute, range 00 to 59
s["%n"] = "\n"; // a newline character
s["%p"] = pm ? "PM" : "AM";
s["%P"] = pm ? "pm" : "am";
// FIXME: %r : the time in am/pm notation %I:%M:%S %p
// FIXME: %R : the time in 24-hour notation %H:%M
s["%s"] = Math.floor(this.getTime() / 1000);
s["%S"] = (sec < 10) ? ("0" + sec) : sec; // seconds, range 00 to 59
s["%t"] = "\t"; // a tab character
// FIXME: %T : the time in 24-hour notation (%H:%M:%S)
s["%U"] = s["%W"] = s["%V"] = (wn < 10) ? ("0" + wn) : wn;
s["%u"] = w + 1; // the day of the week (range 1 to 7, 1 = MON)
s["%w"] = w; // the day of the week (range 0 to 6, 0 = SUN)
// FIXME: %x : preferred date representation for the current locale without the time
// FIXME: %X : preferred time representation for the current locale without the date
s["%y"] = ("" + y).substr(2, 2); // year without the century (range 00 to 99)
s["%Y"] = y; // year with the century
s["%%"] = "%"; // a literal "%" character
var re = /%./g;
if (!Calendar.is_ie5 && !Calendar.is_khtml)
return str.replace(re, function (par) { return s[par] || par; });
var a = str.match(re);
for (var i = 0; i < a.length; i++) {
var tmp = s[a[i]];
if (tmp) {
re = new RegExp(a[i], "g");
str = str.replace(re, tmp);
}
}
return str;
}; Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear; Date.prototype.setFullYear = function(y) {
var d = new Date(this); d.__msh_oldSetFullYear(y); if (d.getMonth() != this.getMonth()) this.setDate(28); this.__msh_oldSetFullYear(y);
}; // END: DATE OBJECT PATCHES
// global object that remembers the calendar window._dynarch_popupCalendar = null;
</script> <script type="text/javascript">
// ** I18N // Calendar EN language // Author: Mihai Bazon, <mihai_bazon@yahoo.ru> // Encoding: any // Distributed under the same terms as the calendar itself. // For translators: please use UTF-8 if possible. We strongly believe that // Unicode is the answer to a real internationalized world. Also please // include your contact information in the header, as can be seen above. // full day names Calendar._DN = new Array ("Sunday",
"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
// Please note that the following array of short day names (and the same goes // for short month names, _SMN) isn"t absolutely necessary. We give it here // for exemplification on how one can customize the short day names, but if // they are simply the first N letters of the full name you can simply say: // // Calendar._SDN_len = N; // short day name length // Calendar._SMN_len = N; // short month name length // // If N = 3 then this is not needed either since we assume a value of 3 if not // present, to be compatible with translation files that were written before // this feature. // short day names Calendar._SDN = new Array ("Sun",
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
// First day of the week. "0" means display Sunday first, "1" means display // Monday first, etc. Calendar._FD = 0; // full month names Calendar._MN = new Array ("January",
"February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// short month names Calendar._SMN = new Array ("Jan",
"Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// tooltips Calendar._TT = {}; Calendar._TT["INFO"] = "About the calendar"; Calendar._TT["ABOUT"] = "DHTML Date/Time Selector\n" + "(c) dynarch.ru 2002-2005 / Author: Mihai Bazon\n" + // don"t translate this this ;-) "For latest version visit: http://www.dynarch.ru/projects/calendar/\n" + "Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." + "\n\n" + "Date selection:\n" + "- Use the \xab, \xbb buttons to select year\n" + "- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" + "- Hold mouse button on any of the above buttons for faster selection."; Calendar._TT["ABOUT_TIME"] = "\n\n" + "Time selection:\n" + "- Click on any of the time parts to increase it\n" + "- or Shift-click to decrease it\n" + "- or click and drag for faster selection."; Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["GO_TODAY"] = "Go Today"; Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)"; Calendar._TT["SEL_DATE"] = "Select date"; Calendar._TT["DRAG_TO_MOVE"] = "Drag to move"; Calendar._TT["PART_TODAY"] = " (today)"; // the following is to inform that "%s" is to be the first day of week // %s will be replaced with the day name. Calendar._TT["DAY_FIRST"] = "Display %s first"; // This may be locale-dependent. It specifies the week-end days, as an array // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 // means Monday, etc. Calendar._TT["WEEKEND"] = "0,6"; Calendar._TT["CLOSE"] = "Close"; Calendar._TT["TODAY"] = "Today"; Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value"; // date formats Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d"; Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e"; Calendar._TT["WK"] = "wk"; Calendar._TT["TIME"] = "Time:";
</script> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.ru/mishoo/
* --------------------------------------------------------------------------- * * The DHTML Calendar * * Details and latest version at: * http://dynarch.ru/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.25 2005/03/07 09:51:33 mishoo 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) * firstDay | numeric: 0 to 6. "0" means display Sunday first, "1" means display Monday first, etc. * align | alignment (default: "Br"); 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" * electric | if true (default) then given fields/date areas are updated for each move; otherwise they"re updated only on close * step | configures the step of the years in drop-down boxes; default: 2 * position | configures the calendar absolute position; default: null * cache | if "true" (but default: "false") it will reuse the same calendar object, where possible * showOthers | if "true" (but default: "false") it will show days from other months too * * 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("dateText", null);
param_default("firstDay", null);
param_default("align", "Br");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
param_default("electric", true);
param_default("step", 2);
param_default("position", null);
param_default("cache", false);
param_default("showOthers", false);
param_default("multiple", 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.multiple || 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) {
var p = cal.params;
var update = (cal.dateClicked || p.electric);
if (update && p.inputField) {
p.inputField.value = cal.date.print(p.ifFormat);
if (typeof p.inputField.onchange == "function")
p.inputField.onchange();
}
if (update && p.displayArea)
p.displayArea.innerHTML = cal.date.print(p.daFormat);
if (update && typeof p.onUpdate == "function")
p.onUpdate(cal);
if (update && p.flat) {
if (typeof p.flatCallback == "function")
p.flatCallback(cal);
}
if (update && p.singleClick && cal.dateClicked)
cal.callCloseHandler();
};
if (params.flat != null) {
if (typeof params.flat == "string")
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.firstDay, params.date, params.onSelect || onSelect);
cal.showsOtherMonths = params.showOthers;
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.getDateText = params.dateText;
if (params.ifFormat) {
cal.setDateFormat(params.ifFormat);
}
if (params.inputField && typeof params.inputField.value == "string") {
cal.parseDate(params.inputField.value);
}
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 (dateEl)
params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
if (!(cal && params.cache)) {
window.calendar = cal = new Calendar(params.firstDay,
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 {
if (params.date)
cal.setDate(params.date);
cal.hide();
}
if (params.multiple) {
cal.multiple = {};
for (var i = params.multiple.length; --i >= 0;) {
var d = params.multiple[i];
var ds = d.print("%Y%m%d");
cal.multiple[ds] = d;
}
}
cal.showsOtherMonths = params.showOthers;
cal.yearStep = params.step;
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.getDateText = params.dateText;
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.refresh();
if (!params.position)
cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
else
cal.showAt(params.position[0], params.position[1]);
return false;
};
return cal;
};
</script>
</head> <body>
DHTML Calendar for the impatient
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 flat calendar is available in <a href="simple-2.html">another page</a>.
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 that impatient, ;-) <a href="doc/html/reference.html">complete documenation</a> is available.
Basic setup: one input per calendar. 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".
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".
<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>
Input field with a trigger button. Clicking the button activates the calendar. Note that this one needs double-click (singleClick parameter is explicitely set to false). Also demonstrates the "step" parameter introduced in 0.9.6 (show all years in drop-down boxes, instead of every other year as default).
<form action="#" method="get"> <input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button> </form> <script type="text/javascript">
Calendar.setup({
inputField : "f_date_b", // id of the input field
ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field
showsTime : true, // will display a time selector
button : "f_trigger_b", // trigger for the calendar (button ID)
singleClick : false, // double-click mode
step : 1 // show all years in drop-down boxes (instead of every other year as default)
});
</script>
Input field with a trigger image. 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).
<form action="#" method="get">
| <input type="text" name="date" id="f_date_c" readonly="1" /> | <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=""" /> |
</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>
Hidden field, display area. 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.
<form action="#" method="get" style="visibility: hidden"> <input type="hidden" name="date" id="f_date_d" /> </form>
Your birthday: Click to open date selector.
<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>
Hidden field, display area, trigger image. Very similar to the previous example. The difference is that we also have a trigger image.
<form action="#" method="get" style="visibility: hidden"> <input type="hidden" name="date" id="f_date_e" /> </form>
Your birthday: -- not entered -- <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=""" />.
<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>
Hidden field, display area. Very much like the previous examples, but we now disable some dates (all weekends, that is, Saturdays and Sundays).
<form action="#" method="get" style="visibility: hidden"> <input type="hidden" name="date" id="f_date_f" /> </form>
Your birthday: Click to open date selector.
<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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jscalendar-1.0.zip">jscalendar-1.0.zip( 396 k)</a>
Another Calendar
<source lang="html4strict">
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <script language="JavaScript"> // written by Tan Ling Wee on 2 Dec 2001 // last updated 28 Mar 2002 // email : info@sparrowscripts.ru // url : www.sparrowscripts.ru
var fixedX = -1 // x position (-1 if to appear below control)
var fixedY = -1 // y position (-1 if to appear below control)
var startAt = 1 // 0 - sunday ; 1 - monday
var showWeekNumber = 1 // 0 - don"t show; 1 - show
var showToday = 1 // 0 - don"t show; 1 - show
var imgDir = "" // directory for images ... e.g. var imgDir="/img/"
var gotoString = "Go To Current Month"
var todayString = "Today is"
var weekString = "Wk"
var scrollLeftMessage = "Click to scroll to previous month. Hold mouse button to scroll automatically."
var scrollRightMessage = "Click to scroll to next month. Hold mouse button to scroll automatically."
var selectMonthMessage = "Click to select a month."
var selectYearMessage = "Click to select a year."
var selectDateMessage = "Select [date] as date." // do not replace [date], it will be replaced by date.
var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear
var bPageLoaded=false
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var today = new Date()
var dateNow = today.getDate()
var monthNow = today.getMonth()
var yearNow = today.getYear()
var imgsrc = new Array("drop1.gif","drop2.gif","left1.gif","left2.gif","right1.gif","right2.gif")
var img = new Array()
function HolidayRec (d, m, y, desc)
{
this.d = d
this.m = m
this.y = y
this.desc = desc
}
var HolidaysCounter = 0
var Holidays = new Array()
function addHoliday (d, m, y, desc)
{
Holidays[HolidaysCounter++] = new HolidayRec ( d, m, y, desc )
}
if (dom)
{
for (i=0;i<imgsrc.length;i++)
{
img[i] = new Image
img[i].src = imgDir + imgsrc[i]
}
document.write ("
| ||
}
var monthName = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
if (startAt==0)
{
dayName = new Array ("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
}
else
{
dayName = new Array ("Mon","Tue","Wed","Thu","Fri","Sat","Sun")
}
var styleAnchor="text-decoration:none;color:black;"
var styleLightBorder="border-style:solid;border-width:1px;border-color:#a0a0a0;"
function swapImage(srcImg, destImg){
if (ie) { document.getElementById(srcImg).setAttribute("src",imgDir + destImg) }
}
function init() {
if (!ns4)
{
if (!ie) { yearNow += 1900 }
crossobj=(dom)?document.getElementById("calendar").style : ie? document.all.calendar : document.calendar
hideCalendar()
crossMonthObj=(dom)?document.getElementById("selectMonth").style : ie? document.all.selectMonth : document.selectMonth
crossYearObj=(dom)?document.getElementById("selectYear").style : ie? document.all.selectYear : document.selectYear
monthConstructed=false;
yearConstructed=false;
if (showToday==1)
{
document.getElementById("lblToday").innerHTML = todayString + " <a onmousemove="window.status=\""+gotoString+"\"" onmouseout="window.status=\"\"" title=""+gotoString+"" style=""+styleAnchor+"" href="javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();">"+dayName[(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+", " + dateNow + " " + monthName[monthNow].substring(0,3) + " " + yearNow + "</a>"
}
sHTML1=" <IMG id="changeLeft" SRC=""+imgDir+"left1.gif" width=10 height=11 BORDER=0>  "
sHTML1+=" <IMG id="changeRight" SRC=""+imgDir+"right1.gif" width=10 height=11 BORDER=0>  "
sHTML1+=" "
sHTML1+=" "
document.getElementById("caption").innerHTML = sHTML1
bPageLoaded=true
//Calling a calendar function and passing the name of the text
//box which holds the date field. Added by D.T.
popUpCalendar(this, opener.txtDate, "m/d/yyyy")
}
}
function hideCalendar() {
crossobj.visibility="hidden"
if (crossMonthObj != null){crossMonthObj.visibility="hidden"}
if (crossYearObj != null){crossYearObj.visibility="hidden"}
//Closing a popup window when user clicked "x", close the calendar. Added by D.T.
self.closed
}
function padZero(num) {
return (num < 10)? "0" + num : num ;
}
function constructDate(d,m,y)
{
sTmp = dateFormat
sTmp = sTmp.replace ("dd","<e>")
sTmp = sTmp.replace ("d","<d>")
sTmp = sTmp.replace ("<e>",padZero(d))
sTmp = sTmp.replace ("<d>",d)
sTmp = sTmp.replace ("mmm","<o>")
sTmp = sTmp.replace ("mm","<n>")
sTmp = sTmp.replace ("m","<m>")
sTmp = sTmp.replace ("<m>",m+1)
sTmp = sTmp.replace ("<n>",padZero(m+1))
sTmp = sTmp.replace ("<o>",monthName[m])
return sTmp.replace ("yyyy",y)
}
function closeCalendar() {
var sTmp
hideCalendar();
ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected)
//Closing popup window when date is selected. Added By D.T.
self.close()
}
/*** Month Pulldown ***/
function StartDecMonth()
{
intervalID1=setInterval("decMonth()",80)
}
function StartIncMonth()
{
intervalID1=setInterval("incMonth()",80)
}
function incMonth () {
monthSelected++
if (monthSelected>11) {
monthSelected=0
yearSelected++
}
constructCalendar()
}
function decMonth () {
monthSelected--
if (monthSelected<0) {
monthSelected=11
yearSelected--
}
constructCalendar()
}
function constructMonth() {
popDownYear()
if (!monthConstructed) {
sHTML = ""
for (i=0; i<12; i++) {
sName = monthName[i];
if (i==monthSelected){
sName = "" + sName + ""
}
sHTML += "<tr><td id="m" + i + "" onmouseover="this.style.backgroundColor=\"#FFCC99\"" onmouseout="this.style.backgroundColor=\"\"" style="cursor:pointer" onclick="monthConstructed=false;monthSelected=" + i + ";constructCalendar();popDownMonth();event.cancelBubble=true"> " + sName + " </td></tr>"
}
document.getElementById("selectMonth").innerHTML = " monthConstructed=true
}
}
function popUpMonth() {
constructMonth()
crossMonthObj.visibility = (dom||ie)? "visible" : "show"
crossMonthObj.left = parseInt(crossobj.left) + 50
crossMonthObj.top = parseInt(crossobj.top) + 26
}
function popDownMonth() {
crossMonthObj.visibility= "hidden"
}
/*** Year Pulldown ***/
function incYear() {
for (i=0; i<7; i++){
newYear = (i+nStartingYear)+1
if (newYear==yearSelected)
{ txtYear = " " + newYear + " " }
else
{ txtYear = " " + newYear + " " }
document.getElementById("y"+i).innerHTML = txtYear
}
nStartingYear ++;
}
function decYear() {
for (i=0; i<7; i++){
newYear = (i+nStartingYear)-1
if (newYear==yearSelected)
{ txtYear = " " + newYear + " " }
else
{ txtYear = " " + newYear + " " }
document.getElementById("y"+i).innerHTML = txtYear
}
nStartingYear --;
}
function selectYear(nYear) {
yearSelected=parseInt(nYear+nStartingYear);
yearConstructed=false;
constructCalendar();
popDownYear();
}
function constructYear() {
popDownMonth()
sHTML = ""
if (!yearConstructed) {
sHTML = "<tr><td align="center" onmouseover="this.style.backgroundColor=\"#FFCC99\"" onmouseout="clearInterval(intervalID1);this.style.backgroundColor=\"\"" style="cursor:pointer" onmousedown="clearInterval(intervalID1);intervalID1=setInterval(\"decYear()\",30)" onmouseup="clearInterval(intervalID1)">-</td></tr>"
j = 0
nStartingYear = yearSelected-3
for (i=(yearSelected-3); i<=(yearSelected+3); i++) {
sName = i;
if (i==yearSelected){
sName = "" + sName + ""
}
sHTML += "<tr><td id="y" + j + "" onmouseover="this.style.backgroundColor=\"#FFCC99\"" onmouseout="this.style.backgroundColor=\"\"" style="cursor:pointer" onclick="selectYear("+j+");event.cancelBubble=true"> " + sName + " </td></tr>"
j ++;
}
sHTML += "<tr><td align="center" onmouseover="this.style.backgroundColor=\"#FFCC99\"" onmouseout="clearInterval(intervalID2);this.style.backgroundColor=\"\"" style="cursor:pointer" onmousedown="clearInterval(intervalID2);intervalID2=setInterval(\"incYear()\",30)" onmouseup="clearInterval(intervalID2)">+</td></tr>"
document.getElementById("selectYear").innerHTML = " yearConstructed = true
}
}
function popDownYear() {
clearInterval(intervalID1)
clearTimeout(timeoutID1)
clearInterval(intervalID2)
clearTimeout(timeoutID2)
crossYearObj.visibility= "hidden"
}
function popUpYear() {
var leftOffset
constructYear()
crossYearObj.visibility = (dom||ie)? "visible" : "show"
leftOffset = parseInt(crossobj.left) + document.getElementById("spanYear").offsetLeft
if (ie)
{
leftOffset += 6
}
crossYearObj.left = leftOffset
crossYearObj.top = parseInt(crossobj.top) + 26
}
/*** calendar ***/
function WeekNbr(today)
{
Year = takeYear(today);
Month = today.getMonth();
Day = today.getDate();
now = Date.UTC(Year,Month,Day+1,0,0,0);
var Firstday = new Date();
Firstday.setYear(Year);
Firstday.setMonth(0);
Firstday.setDate(1);
then = Date.UTC(Year,0,1,0,0,0);
var Compensation = Firstday.getDay();
if (Compensation > 3) Compensation -= 4;
else Compensation += 3;
NumberOfWeek = Math.round((((now-then)/86400000)+Compensation)/7);
return NumberOfWeek;
}
function takeYear(theDate)
{
x = theDate.getYear();
var y = x % 100;
y += (y < 38) ? 2000 : 1900;
return y;
}
function constructCalendar () {
var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31)
var dateMessage
var startDate = new Date (yearSelected,monthSelected,1)
var endDate
if (monthSelected==1)
{
endDate = new Date (yearSelected,monthSelected+1,1);
endDate = new Date (endDate - (24*60*60*1000));
numDaysInMonth = endDate.getDate()
}
else
{
numDaysInMonth = aNumDays[monthSelected];
}
datePointer = 0
dayPointer = startDate.getDay() - startAt
if (dayPointer<0)
{
dayPointer = 6
}
sHTML = "| " + weekString + " | <img src=""+imgDir+"divider.gif" width=1> | ""+ dayName[i]+" | "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| " + WeekNbr(startDate) + " | "" | "
sStyle=styleAnchor
if ((datePointer==odateSelected) && (monthSelected==omonthSelected) && (yearSelected==oyearSelected))
{ sStyle+=styleLightBorder }
sHint = ""
for (k=0;k<HolidaysCounter;k++)
{
if ((parseInt(Holidays[k].d)==datePointer)&&(parseInt(Holidays[k].m)==(monthSelected+1)))
{
if ((parseInt(Holidays[k].y)==0)||((parseInt(Holidays[k].y)==yearSelected)&&(parseInt(Holidays[k].y)!=0)))
{
sStyle+="background-color:#FFDDDD;"
sHint+=sHint==""?Holidays[k].desc:"\n"+Holidays[k].desc
}
}
}
var regexp= /\"/g
sHint=sHint.replace(regexp,""")
dateMessage = "onmousemove="window.status=\""+selectDateMessage.replace("[date]",constructDate(datePointer,monthSelected,yearSelected))+"\"" onmouseout="window.status=\"\"" "
if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
{ sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style=""+sStyle+"" href="javascript:dateSelected="+datePointer+";closeCalendar();"> " + datePointer + " </a>"}
else if (dayPointer % 7 == (startAt * -1)+1)
{ sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style=""+sStyle+"" href="javascript:dateSelected="+datePointer + ";closeCalendar();"> " + datePointer + " </a>" }
else
{ sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style=""+sStyle+"" href="javascript:dateSelected="+datePointer + ";closeCalendar();"> " + datePointer + " </a>" }
sHTML += ""
if ((dayPointer+startAt) % 7 == startAt) {
sHTML += " | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| " + (WeekNbr(new Date(yearSelected,monthSelected,datePointer+1))) + " | "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
this.decorate();
}
</script>
<script type="text/javascript" language="JavaScript1.3"> /*
* This must run with jsunit from cvs from after 15/9 * *$Id: calendario_test.js,v 1.7 2003/09/24 16:15:24 neves Exp $ */
function setUp() {
c = new Calendar("datePicker");
form = document.forms[0]
}
function testGetParentForm() {
assertEquals(document.formulario, c.form);
}
function testSetDate() {
var y = 1977; var m = 11; var d = 10; c.setDate(new Date(y, m, d,12)); assertEquals(y+"", form.datePickerYear.value); assertEquals(d+"", form.datePickerDay.value); assertEquals(m+"", form.datePickerMonth.value); assertEquals(y+"-"+(m+1)+"-"+d, form.datePickerDate.value);
} function testGetHeader() {
var month = 2;
var year = 2001;
c.setDate(new Date(year, month, 1));
var h = c.getHeader();
assertNotEquals("Header must have the year",
-1,
h.toLowerCase().indexOf(year));
assertNotEquals("Header must have the month",
-1,
h.toLowerCase().indexOf(month));
} function equalArrays(array1, array2) {
if (array1.length != array2.length) {
return false;
}
for (var i=0; i<array1.length; i++) {
if (array1[i] != array2[i]) {
return false;
}
}
return true;
} function testGetDaysGrid() {
var grid;
c.setDate(new Date(2003, 8, 1));
var sep2003 = new Array(null, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13,
14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27,
28, 29, 30, null, null, null, null,
null, null, null, null, null, null, null);
grid = c.getDaysGrid();
assert("Equal values for grid of september 2003",
equalArrays(sep2003, grid));
//starts saturday
c.setDate(new Date(2003, 10, 1));
var nov2003 = new Array(null, null, null, null, null, null, 1,
2, 3, 4, 5, 6, 7, 8,
9, 10, 11, 12, 13, 14, 15,
16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29,
30, null, null, null, null, null, null);
grid = c.getDaysGrid();
assert("Equal values for grid of november 2003",
equalArrays(nov2003, grid));
//just 4 rows
c.setDate(new Date(2009, 1, 1));
var feb2009 = new Array(1, 2, 3, 4, 5, 6, 7,
8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28,
null, null, null, null, null, null, null,
null, null, null, null, null, null, null);
grid = c.getDaysGrid();
assert("Equal values for grid offebruary 2003",
equalArrays(feb2009, grid));
//bissext
c.setDate(new Date(2004, 1, 1));
var feb2004 = new Array(1, 2, 3, 4, 5, 6, 7,
8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28,
29, null, null, null, null, null, null,
null, null, null, null, null, null, null);
grid = c.getDaysGrid();
assert("Equal values for grid of february 2004",
equalArrays(feb2004, grid));
}
//aux func to test increase and decrease function getTitleElement() {
var el = form.getElementsByTagName("thead")[0];
var childs = el.getElementsByTagName("td");
for (var i=0; i<childs.length; i++) {
if (childs[i].className == "title") {
el = childs[i];
}
}
return el;
} function testIncreaseMonth() {
var el;
for (var i=0; i<11; i++) {
c.setDate(new Date(2003, i ,1));
c.increaseMonth();
el = getTitleElement();
assert("Increased Month name " + months[i+1] +
" isn"t in header cell",
el.innerHTML.indexOf(months[i+1])!=-1);
}
c.increaseMonth();
el = getTitleElement();
assert("Increased Month name " + months[0] + " isn"t in header cell",
el.innerHTML.indexOf(months[0])!=-1);
} function testDecreaseMonth() {
var el;
for (var i=11; i>0; i--) {
c.setDate(new Date(2003, i ,1));
c.decreaseMonth();
el = getTitleElement();
assert("Decreased Month name " + months[i-1] +
" isn"t in header cell",
el.innerHTML.indexOf(months[i-1])!=-1);
}
c.decreaseMonth();
el = getTitleElement();
assert("Decreased Month name " + months[11] + " isn"t in header cell",
el.innerHTML.indexOf(months[11])!=-1);
} function testHasClass() {
var el = document.createElement("p");
el.className = "abc";
assert(Calendar.hasClass(el, "abc"));
el.className = "abcde";
assert(!Calendar.hasClass(el, "abc"));
el.className = "abc cde";
assert(Calendar.hasClass(el, "abc"));
el.className = "cde abc";
assert(Calendar.hasClass(el, "abc"));
el.className = "aaa abc cde";
assert(Calendar.hasClass(el, "abc"));
} function testAddClass() {
var el = document.createElement("p");
Calendar.addClass(el, "abc");
assert(Calendar.hasClass(el, "abc"));
Calendar.addClass(el, "abc");
assert(Calendar.hasClass(el, "abc"));
Calendar.addClass(el, "cde");
assert(Calendar.hasClass(el, "abc"));
assert(Calendar.hasClass(el, "cde"));
} function testRemoveClass() {
var el = document.createElement("p");
el.className = "abc";
Calendar.removeClass(el, "abc");
assert(!Calendar.hasClass(el, "abc"));
Calendar.removeClass(el, "abc");
assert(!Calendar.hasClass(el, "abc"));
el.className = "abc cde eft";
Calendar.removeClass(el, "cde");
assert(Calendar.hasClass(el, "abc"));
assert(Calendar.hasClass(el, "eft"));
assert(!Calendar.hasClass(el, "cde"));
} function testSelectDay() {
var y = 2003;
var m = 9;
var d = 15;
c.setDate(new Date(y, m, d));
var days = form.getElementsByTagName("TBODY");
days = form.getElementsByTagName("TD");
for (var i=0; i<days.length; i++) {
if (parseInt(days[i].innerHTML) == d) {
assert(Calendar.hasClass(days[i],"selected"));
} else {
assert(!Calendar.hasClass(days[i],"selected"));
}
}
} function testInvalidDates() {
c.setDisplayDate(new Date(2003, 5, 22));
var dateMin = new Date(2003, 5, 02);
var dateMax = new Date(2003, 5, 29);
var dateMiddle = new Date(2003, 5, 15);
c.setValidInterval([dateMin,
dateMax]);
assert("Less than min must be disabled",
c.isDisabled(new Date(2003, 5, 1)));
assert("Greater than max must be disabled",
c.isDisabled(new Date(2003, 5, 30)));
assert("Date in middle must be valid",
!c.isDisabled(dateMiddle));
assert("Min interval date must be enabled",
!c.isDisabled(dateMin));
assert("Max interval date must be enabled",
!c.isDisabled(dateMax));
c.setDisplayDate(new Date(2003, 5, 1));
assert("Display date can"t be set out of valid interval",
c.displayDate.valueOf() >= dateMin.valueOf());
c.setValidInterval([dateMiddle,
dateMax]);
assert("Display date can"t be set out of valid interval",
c.displayDate.valueOf() >= dateMiddle.valueOf());
//Days before limit are disabled
c.setValidInterval([dateMin,
dateMax]);
var days = form.getElementsByTagName("TBODY")[1].getElementsByTagName("TD");
for (var i=0; i<days.length; i++) {
var cellDay = parseInt(days[i].innerHTML);
if (!isNaN(cellDay) &&
cellDay >= dateMin.getDate() &&
cellDay <= dateMax.getDate()) {
assert("Day " + cellDay + " can"t be disabled",
!Calendar.hasClass(days[i], "disabled"));
} else {
assert("Day " + cellDay + " in pos " + i + " must be disabled",
Calendar.hasClass(days[i], "disabled"));
}
}
}
function testDisabledArrows() {
var dateMin = new Date(2003, 5, 02);
var dateMax = new Date(2003, 6, 29);
c.setValidInterval([dateMin, dateMax]);
c.setDisplayDate(dateMin);
c.draw();
var header = form.getElementsByTagName("THEAD")[0].getElementsByTagName("TD");
var leftArrow = header[0];
var rightArrow = header[2];
assert("Left arrow can"t be active if month before just has invalid dates",
!Calendar.hasClass(leftArrow, "button"));
assert("Right arrow must be active if month after has any valid date",
Calendar.hasClass(rightArrow, "button"));
c.setDisplayDate(dateMax);
c.draw();
header = form.getElementsByTagName("THEAD")[0].getElementsByTagName("TD");
leftArrow = header[0];
rightArrow = header[2];
assert("Left arrow must be active if month before has any valid date",
Calendar.hasClass(leftArrow, "button"));
assert("Right arrow can"t be active if month after just has invalid dates",
!Calendar.hasClass(rightArrow, "button"));
} </script>
<style rel="STYLESHEET" type="text/css" href=""> /* 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 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: #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: #c4c0b8;
}
/* The body part -- contains all the days in month. */ .calendar tbody .day { /* Cells <TD> containing month days dates */
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) */ .rubo {
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;
} .rubo .label {
text-align: center; padding: 1px;
} .rubo .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;
} .rubo .hilite {
background: #048; color: #fea;
} </style> <style> .calendar tbody .day {
width: 1em;
} .calendar thead .hilite {
cursor: pointer;
} .calendar tbody td.hilite {
cursor: pointer;
} .calendar tbody td.selected {
font-weight: normal;
color: blue;
background: #FFA;
} .calendar thead .name {
font-weight: bold; /* text-align: left;*/
}
.calendar tbody td.disabled.weekend {
color: #f99;
}
</style></head>
<body onload="c=new Calendar("datePicker"); c.setValidInterval([new Date(2003, 7, 15), new Date(2005, 10, 25)]); c.draw()" bgcolor="#ffffff">
The Boring DHTML Date Picker Widget
</p>Try it
Below is the sample of the Boring Date Picker Widget with valid dates from "2003-08-15" to "2005-11-25". Select a date.
<form action="" method="post" name="formulario">| -- | Agosto 2005 | -- | ||||
| D | S | T | Q | Q | S | S |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
</form>
</body></html>
</source>
A Static Calendar by JavaScript
<source lang="html4strict">
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
- /
<HTML> <HEAD> <TITLE>JavaScripted Static Table</TITLE> <SCRIPT LANGUAGE="JavaScript"> // function becomes a method for each month object function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1) return firstDate.getDay() + 1
} // number of days in the month function getMonthLen(theYear, theMonth) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(theYear, theMonth, 1)
var nextMonth = new Date(theYear, theMonth + 1, 1)
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime())/oneDay)
return len
} // correct for Y2K anomalies function getY2KYear(today) {
var yr = today.getYear() return ((yr < 1900) ? yr+1900 : yr)
} // create basic array theMonths = new MakeArray(12) // load array with English month names function MakeArray(n) {
this[0] = "January" this[1] = "February" this[2] = "March" this[3] = "April" this[4] = "May" this[5] = "June" this[6] = "July" this[7] = "August" this[8] = "September" this[9] = "October" this[10] = "November" this[11] = "December" this.length = n return this
} // end --> </SCRIPT> </HEAD> <BODY>
Month at a Glance (Static)
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT> </BODY> </HTML>
</source>
Building a Calculator
<source lang="html4strict">
/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001
- /
<HTML> <HEAD> <TITLE>Calculator</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <FORM NAME="calculator">
| <INPUT TYPE="TEXT" NAME="total" VALUE="0" SIZE="15"> | ||
| <INPUT TYPE="BUTTON" NAME="n0" VALUE=" 0 " ONCLICK="addDigit(0)"> | <INPUT TYPE="BUTTON" NAME="n1" VALUE=" 1 " ONCLICK="addDigit(1)"> | <INPUT TYPE="BUTTON" NAME="n2" VALUE=" 2 " ONCLICK="addDigit(2)"> |
| <INPUT TYPE="BUTTON" NAME="n3" VALUE=" 3 " ONCLICK="addDigit(3)"> | <INPUT TYPE="BUTTON" NAME="n4" VALUE=" 4 " ONCLICK="addDigit(4)"> | <INPUT TYPE="BUTTON" NAME="n5" VALUE=" 5 " ONCLICK="addDigit(5)"> |
| <INPUT TYPE="BUTTON" NAME="n6" VALUE=" 6 " ONCLICK="addDigit(6)"> | <INPUT TYPE="BUTTON" NAME="n7" VALUE=" 7 " ONCLICK="addDigit(7)"> | <INPUT TYPE="BUTTON" NAME="n8" VALUE=" 8 " ONCLICK="addDigit(8)"> |
| <INPUT TYPE="BUTTON" NAME="n9" VALUE=" 9 " ONCLICK="addDigit(9)"> | <INPUT TYPE="BUTTON" NAME="decimal" VALUE=" . " ONCLICK="addDecimalPoint()"> | <INPUT TYPE="BUTTON" NAME="plus" VALUE=" + " ONCLICK="performOp("+")"> |
| <INPUT TYPE="BUTTON" NAME="minus" VALUE=" - " ONCLICK="performOp("-")"> | <INPUT TYPE="BUTTON" NAME="multiply" VALUE=" * " ONCLICK="performOp("*")"> | <INPUT TYPE="BUTTON" NAME="divide" VALUE=" / " ONCLICK="performOp("/")"> |
| <INPUT TYPE="BUTTON" NAME="equals" VALUE=" = " ONCLICK="calc()"> | <INPUT TYPE="BUTTON" NAME="sign" VALUE=" +/- " ONCLICK="changeSign()"> | <INPUT TYPE="BUTTON" NAME="clearField" VALUE=" C " ONCLICK="clearDisplay()"> |
</FORM> </BODY> </HTML>
</source>
Calendar Control - 2-Up Implementation
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - 2-Up Implementation</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
this.today = new Date();
var thisMonth = this.today.getMonth();
var thisDay = this.today.getDate();
var thisYear = this.today.getFullYear();
this.link1 = document.getElementById("dateLink1");
this.link2 = document.getElementById("dateLink2");
this.selMonth1 = document.getElementById("selMonth1");
this.selDay1 = document.getElementById("selDay1");
this.selMonth1.selectedIndex = thisMonth;
this.selDay1.selectedIndex = thisDay-1;
this.selMonth2 = document.getElementById("selMonth2");
this.selDay2 = document.getElementById("selDay2");
this.selMonth2.selectedIndex = thisMonth;
this.selDay2.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal1.title = "Select your desired departure date:";
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal1.render();
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal2.title = "Select your desired return date:";
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
YAHOO.example.calendar.cal2.render();
}
function showCalendar1() {
YAHOO.example.calendar.cal2.hide();
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.outerContainer.style.display="block";
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function showCalendar2() {
YAHOO.example.calendar.cal1.hide();
var pos = YAHOO.util.Dom.getXY(link2);
YAHOO.example.calendar.cal2.outerContainer.style.display="block";
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal1.hide();
}
function setDate2() {
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
selMonth2.selectedIndex=date2.getMonth();
selDay2.selectedIndex=date2.getDate()-1;
YAHOO.example.calendar.cal2.hide();
}
function changeDate1() {
var month = this.selMonth1.selectedIndex;
var day = this.selDay1.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal1.setMonth(month);
YAHOO.example.calendar.cal1.render();
}
function changeDate2() {
var month = this.selMonth2.selectedIndex;
var day = this.selDay2.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal2.setMonth(month);
YAHOO.example.calendar.cal2.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head> <body style="margin:0px"> <img src="./examples/calendar/default_2up/img/ytravel.gif" id="bgImg">
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle"> <option value="Jan"> Jan </option> <option value="Feb"> Feb </option> <option value="Mar"> Mar </option> <option value="Apr"> Apr </option> <option value="May"> May </option> <option value="Jun"> Jun </option> <option value="Jul"> Jul </option> <option value="Aug"> Aug </option> <option value="Sep"> Sep </option> <option value="Oct"> Oct </option> <option value="Nov"> Nov </option> <option value="Dec"> Dec </option> </select> <select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> <option value="13"> 13 </option> <option value="14"> 14 </option> <option value="15"> 15 </option> <option value="16"> 16 </option> <option value="17"> 17 </option> <option value="18"> 18 </option> <option value="19"> 19 </option> <option value="20"> 20 </option> <option value="21"> 21 </option> <option value="22"> 22 </option> <option value="23"> 23 </option> <option value="24"> 24 </option> <option value="25"> 25 </option> <option value="26"> 26 </option> <option value="27"> 27 </option> <option value="28"> 28 </option> <option value="29"> 29 </option> <option value="30"> 30 </option> <option value="31"> 31 </option> </select><a href="javascript:void(null)" onclick="showCalendar1()"><img id="dateLink1" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
<select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle"> <option value="Jan"> Jan </option> <option value="Feb"> Feb </option> <option value="Mar"> Mar </option> <option value="Apr"> Apr </option> <option value="May"> May </option> <option value="Jun"> Jun </option> <option value="Jul"> Jul </option> <option value="Aug"> Aug </option> <option value="Sep"> Sep </option> <option value="Oct"> Oct </option> <option value="Nov"> Nov </option> <option value="Dec"> Dec </option> </select> <select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> <option value="13"> 13 </option> <option value="14"> 14 </option> <option value="15"> 15 </option> <option value="16"> 16 </option> <option value="17"> 17 </option> <option value="18"> 18 </option> <option value="19"> 19 </option> <option value="20"> 20 </option> <option value="21"> 21 </option> <option value="22"> 22 </option> <option value="23"> 23 </option> <option value="24"> 24 </option> <option value="25"> 25 </option> <option value="26"> 26 </option> <option value="27"> 27 </option> <option value="28"> 28 </option> <option value="29"> 29 </option> <option value="30"> 30 </option> <option value="31"> 31 </option> </select><a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="./examples/calendar/img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Custom Renderer Example</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<style>
.yui-calendar td.holiday {
background-color:yellow;
font-weight:bold;
}
</style>
<script language="javascript">
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.renderHoliday = function(workingDate, cell) {
YAHOO.util.Dom.addClass(cell, "holiday");
}
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","1/2006");
YAHOO.example.calendar.cal1.addRenderer("12/25,1/1", YAHOO.example.calendar.renderHoliday);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head> <body>
<img id="logo" src="../img/logo.gif"/>
Calendar Control
Holiday Renderer Implementation
Here is an example of how to create renderers to format specific holidays with a special style:
<textarea name="code" class="JScript" cols="60" rows="1"> var cal1; var renderHoliday = function(workingDate, cell) {
YAHOO.util.Dom.addClass(cell, "holiday");
} function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
cal1.addRenderer("12/25,1/1", renderHoliday);
cal1.render();
} </textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Date Restriction Example (Date Restriction Implementation)
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Date Restriction Example</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","2/2006");
YAHOO.example.calendar.cal1.addRenderer("2/28/2006",YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.render();
}
</script>
</head> <body onload="init()">
<img id="logo" src="../img/logo.gif"/>
Calendar Control
Date Restriction Implementation
This example shows how to restrict selection of a specific date:
<textarea name="code" class="JScript" cols="60" rows="1"> var cal1; function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
cal1.addRenderer("2/28/2006",cal1.renderBodyCellRestricted);
cal1.render();
} </textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Handling onSelect / onDeselect
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Handling onSelect / onDeselect</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
YAHOO.example.calendar.cal1.onSelect = function(selected) {
alert("selected: " + selected);
}
YAHOO.example.calendar.cal1.onDeselect = function(deselected) {
alert("deselected: " + deselected);
}
YAHOO.example.calendar.cal1.render();
}
</script>
</head> <body onload="init()">
Calendar Control
Handling onSelect / onDeselect
Dates are passed as an array of date field arrays, in the format: [YYYY, M, D]. For instance, if two dates are selected at once (8/6/2006 and 8/7/2006), the argument passed to onSelect would be: [ [2006,8,6], [2006,8,7] ].
<textarea name="code" class="JScript" cols="60" rows="1"> function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.Options.MULTI_SELECT = true;
cal1.onSelect = function(selected) {
alert("selected: " + selected);
}
cal1.onDeselect = function(deselected) {
alert("deselected: " + deselected);
}
cal1.render();
} </textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Mix/Max Implementation
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Mix/Max Implementation</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
YAHOO.example.calendar.cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
YAHOO.example.calendar.cal1.render();
}
</script>
</head> <body onload="init()">
Calendar Control
Future-Only Single-Select Implementation
To construct a calendar where the user can only select future dates, the code would read as follows:
<textarea name="code" class="JScript" cols="60" rows="1"> var cal1; function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
cal1.render();
} </textarea>
Notice that we"re setting the minimum date to tomorrow"s date by adding one day to a newly instantiated date (using the DateMath helper class) and setting it into the calendar"s minDate property. cal1.maxDate remains null since there is no restriction on how far into the future the user can make selections.
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Multi-Select 2-up Implementation
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Multi-Select 2-up Implementation</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","cal1Container");
var customConfig = function() {
this.Options.MULTI_SELECT = true;
}
YAHOO.example.calendar.cal1.setChildFunction("customConfig", customConfig);
YAHOO.example.calendar.cal1.callChildFunction("customConfig");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head> <body>
<img id="logo" src="../img/logo.gif"/>
Calendar Control
Multi-Select 2-up Implementation
To allow for multiple selections on a 2-up Calendar, use the following code:
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar2up("cal1","cal1Container");
var customConfig = function() {
this.Options.MULTI_SELECT = true;
}
cal1.setChildFunction("customConfig", customConfig);
cal1.callChildFunction("customConfig");
cal1.render();
}
</textarea>
<textarea name="code" class="HTML" cols="60" rows="1"></textarea>
</body> <script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Multi-Select Implementation
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Multi-Select Implementation</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
YAHOO.example.calendar.cal1.render();
}
</script>
</head> <body onload="init()">
Calendar Control
Simple Multi-Select Implementation
This implementation allows for selection of multiple values. This is accomplished by simply changing an option in the calendar configuration options:
<textarea name="code" class="JScript" cols="60" rows="1"> var cal1; function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.Options.MULTI_SELECT = true;
cal1.render();
} </textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Row Highlight Example (Row Highlight Implementation)
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Row Highlight Example</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<style>
/* highlight the whole row */
.yui-calendar tr.hilite-row td.calcell {
background-color:yellow;
}
/* highlight the current cell in the standard highlight color */
.yui-calendar tr.hilite-row td.calcellhover {
cursor:pointer;
color:#FFF;
background-color:#FF9900;
border:1px solid #FF9900;
}
/* make sure out of month cells don"t highlight too */
.yui-calendar tr.hilite-row td.calcell.oom {
cursor:default;
color:#999;
background-color:#EEE;
border:1px solid #E0E0E0;
}
</style>
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.util.Dom.addClass(row, "hilite-row");
}
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.util.Dom.removeClass(row, "hilite-row");
}
YAHOO.example.calendar.cal1.render();
}
</script>
</head> <body onload="init()">
<img id="logo" src="../img/logo.gif"/>
Calendar Control
Row Highlight Implementation
This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:
<textarea name="code" class="JScript" cols="60" rows="1">
<style>
/* highlight the whole row */
.yui-calendar tr.hilite-row td.calcell {
background-color:yellow;
}
/* highlight the current cell in the standard highlight color */
.yui-calendar tr.hilite-row td.calcellhover {
cursor:pointer;
color:#FFF;
background-color:#FF9900;
border:1px solid #FF9900;
}
/* make sure out of month cells don"t highlight too */
.yui-calendar tr.hilite-row td.calcell.oom {
cursor:default;
color:#999;
background-color:#EEE;
border:1px solid #E0E0E0;
}
</style>
<script language="javascript">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
cal1.doCellMouseOver = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");
}
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
cal1.doCellMouseOut = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");
}
cal1.render();
}
</script> </textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar Control - Single-Select Implementation
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<title>Yahoo! Calendar Control - Single-Select Implementation</title>
<link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<script type="text/javascript" src="./build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
<link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head> <body>
Calendar Control
Default Single-Select Implementation
The default Calendar implementation is a single-select 1-up calendar view that defaults to the current month and year. The basic calendar can be implemented by declaring a variable to represent the calendar, and passing the calendar"s ID to the Calendar constructor:
<textarea name="code" class="JScript" cols="60" rows="1"> var cal1; function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.render();
} </textarea>
The Calendar object should be instantiated after the body has been rendered, so that a reference to the container element that will contain the calendar can be obtained. The container element can reside anywhere within the body.
<textarea name="code" class="HTML" cols="60" rows="1">
</textarea>
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what"s selected?</a>
<script src="./docs/assets/dpSyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll("code"); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Calendar: day info
<source lang="html4strict"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head> <title>How to include additional info in day cells</title>
<style rel="stylesheet" type="text/css" media="all" title="win2k-cold-1">
/* 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 tbody .day.othermonth {
font-size: 80%; color: #aaa;
} .calendar tbody .day.othermonth.oweekend {
color: #faa;
} .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) */ .calendar .rubo {
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: 90%; padding: 1px; z-index: 100;
} .calendar .rubo .label, .calendar .rubo .label-IEfix {
text-align: center; padding: 1px;
} .calendar .rubo .label-IEfix {
width: 4em;
} .calendar .rubo .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;
} .calendar .rubo .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;
}
</style> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo
* ----------------------------------------------------------- * * The DHTML Calendar, version 1.0 "It is happening again" * * Details and latest version at: * www.dynarch.ru/projects/calendar * * This script is developed by Dynarch.ru. Visit us at www.dynarch.ru. * * 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.51 2005/03/07 16:44:31 mishoo Exp $ /** The Calendar object constructor. */ Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
this.getDateStatus = null;
this.getDateToolTip = null;
this.getDateText = 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.firstDayOfWeek = typeof firstDayOfWeek == "number" ? firstDayOfWeek : Calendar._FD; // 0 for Sunday, 1 for Monday, etc.
this.showsOtherMonths = false;
this.dateStr = dateStr;
this.ar_days = null;
this.showsTime = false;
this.time24 = true;
this.yearStep = 2;
this.hiliteToday = true;
this.multiple = null;
// HTML elements
this.table = null;
this.element = null;
this.tbody = null;
this.firstdayname = null;
// Combo boxes
this.monthsCombo = null;
this.yearsCombo = null;
this.hilitedMonth = null;
this.activeMonth = null;
this.hilitedYear = null;
this.activeYear = null;
// Information
this.dateClicked = false;
// one-time initializations
if (typeof Calendar._SDN == "undefined") {
// table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array();
for (var i = 8; i > 0;) {
ar[--i] = Calendar._DN[i].substr(0, Calendar._SDN_len);
}
Calendar._SDN = ar;
// table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array();
for (var i = 12; i > 0;) {
ar[--i] = Calendar._MN[i].substr(0, Calendar._SMN_len);
}
Calendar._SMN = ar;
}
}; // ** constants /// "static", needed for event handlers. Calendar._C = null; /// detect a special case of "web browser" Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) );
Calendar.is_ie5 = ( Calendar.is_ie && /msie 5\.0/i.test(navigator.userAgent) ); /// detect Opera browser Calendar.is_opera = /opera/i.test(navigator.userAgent); /// detect KHTML-based browsers Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent); // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate // library, at some point. Calendar.getAbsolutePos = function(el) {
var 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 = this.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;
}; // FIXME: the following 2 functions totally suck, are useless and should be replaced immediately. Calendar.getElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.currentTarget; while (f.nodeType != 1 || /^div$/i.test(f.tagName)) f = f.parentNode; return f;
}; Calendar.getTargetElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.target; while (f.nodeType != 1) f = f.parentNode; return f;
}; 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) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
}; Calendar.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
}; Calendar.createElement = function(type, parent) {
var el = null;
if (document.createElementNS) {
// use the XHTML namespace; IE won"t normally get here unless
// _they_ "fix" the DOM2 implementation.
el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
} else {
el = document.createElement(type);
}
if (typeof parent != "undefined") {
parent.appendChild(el);
}
return el;
}; // END: UTILITY FUNCTIONS // BEGIN: CALENDAR STATIC FUNCTIONS /** Internal -- adds a set of events to make some element behave like a button. */ 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 {
var mcw = mc.offsetWidth;
if (typeof mcw == "undefined")
// Konqueror brain-dead techniques
mcw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - mcw) + "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.innerHTML = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else {
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? cal.yearStep : -cal.yearStep;
}
if (show) {
var s = yc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else {
var ycw = yc.offsetWidth;
if (typeof ycw == "undefined")
// Konqueror brain-dead techniques
ycw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - ycw) + "px";
}
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
}
}; // event handlers 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 < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = 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, "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.innerHTML;
addEvent(document, "mousemove", tableMouseOver);
} else
addEvent(document, Calendar.is_ie5 ? "mousemove" : "mouseover", tableMouseOver);
addClass(el, "hilite active");
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) == "_") {
el.ttip = el.caldate.print(el.calendar.ttDateFormat) + el.ttip.substr(1);
}
el.calendar.tooltips.innerHTML = 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");
if (el.calendar)
el.calendar.tooltips.innerHTML = _TT["SEL_DATE"];
return stopEvent(ev);
}
}; /**
* A generic "click" handler :) handles all types of buttons defined in this * calendar. */
Calendar.cellClick = function(el, ev) {
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == "undefined") {
if (cal.currentDateEl) {
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = (cal.currentDateEl == el);
if (!closing) {
cal.currentDateEl = el;
}
}
cal.date.setDateOnly(el.caldate);
date = cal.date;
var other_month = !(cal.dateClicked = !el.otherMonth);
if (!other_month && !cal.currentDateEl)
cal._toggleMultipleDate(new Date(date));
else
newdate = !el.disabled;
// a date was clicked
if (other_month)
cal._init(cal.firstDayOfWeek, date);
} else {
if (el.navtype == 200) {
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = new Date(cal.date);
if (el.navtype == 0)
date.setDateOnly(new Date()); // TODAY
// unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when
// in single-click mode.
// cal.dateClicked = (el.navtype == 0);
cal.dateClicked = 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 {
// FIXME: this should be removed as soon as lang files get updated!
text = "Help and about box text is not translated into this language.\n" +
"If you know this language and you feel generous please update\n" +
"the corresponding file in \"lang\" subdir to match calendar-en.js\n" +
"and send it back to <mihai_bazon@yahoo.ru> to get it into the distribution ;-)\n\n" +
"Thank you!\n" +
"http://dynarch.ru/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.setFirstDayOfWeek(el.fdow);
return;
case 50:
var range = el._range;
var current = el.innerHTML;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
if (ev && ev.shiftKey) {
if (--i < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = newval;
cal.onUpdateTime();
return;
case 0:
// TODAY will bring us here
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;
} else if (el.navtype == 0)
newdate = closing = true;
}
if (newdate) {
ev && cal.callHandler();
}
if (closing) {
Calendar.removeClass(el, "hilite");
ev && cal.callCloseHandler();
}
}; // END: CALENDAR STATIC FUNCTIONS // BEGIN: CALENDAR OBJECT FUNCTIONS /**
* This function creates the calendar inside the given parent. If _par is * null than it creates a popup calendar inside the BODY element. If _par is * an element, be it BODY, then it creates a non-popup calendar (still * hidden). Some properties need to be set before calling this function. */
Calendar.prototype.create = function (_par) {
var parent = null;
if (! _par) {
// default parent is the document body, in which case we create
// a popup calendar.
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;
cell.innerHTML = " 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"];
// day names
row = Calendar.createElement("tr", thead);
row.className = "daynames";
if (this.weekNumbers) {
cell = Calendar.createElement("td", row);
cell.className = "name wn";
cell.innerHTML = Calendar._TT["WK"];
}
for (var i = 7; i > 0; --i) {
cell = Calendar.createElement("td", row);
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);
}
for (var j = 7; j > 0; --j) {
cell = Calendar.createElement("td", row);
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 = Calendar._TT["TIME"] || " ";
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.innerHTML = 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.innerHTML = ":";
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 pm, hrs = this.date.getHours(),
mins = this.date.getMinutes();
if (t12) {
pm = (hrs >= 12);
if (pm) hrs -= 12;
if (hrs == 0) hrs = 12;
AP.innerHTML = pm ? "pm" : "am";
}
H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};
cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.innerHTML, 10);
if (t12) {
if (/pm/i.test(AP.innerHTML) && h < 12)
h += 12;
else if (/am/i.test(AP.innerHTML) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.innerHTML, 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.innerHTML = 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";
div.appendChild(yr);
}
this._init(this.firstDayOfWeek, this.date);
parent.appendChild(this.element);
}; /** keyboard navigation, only for popup calendars */ Calendar._keyEvent = function(ev) {
var cal = window._dynarch_popupCalendar;
if (!cal || cal.multiple)
return false;
(Calendar.is_ie) && (ev = window.event);
var act = (Calendar.is_ie || ev.type == "keypress"),
K = ev.keyCode;
if (ev.ctrlKey) {
switch (K) {
case 37: // KEY left
act && Calendar.cellClick(cal._nav_pm);
break;
case 38: // KEY up
act && Calendar.cellClick(cal._nav_py);
break;
case 39: // KEY right
act && Calendar.cellClick(cal._nav_nm);
break;
case 40: // KEY down
act && Calendar.cellClick(cal._nav_ny);
break;
default:
return false;
}
} else switch (K) {
case 32: // KEY space (now)
Calendar.cellClick(cal._nav_now);
break;
case 27: // KEY esc
act && cal.callCloseHandler();
break;
case 37: // KEY left
case 38: // KEY up
case 39: // KEY right
case 40: // KEY down
if (act) {
var prev, x, y, ne, el, step;
prev = K == 37 || K == 38;
step = (K == 37 || K == 39) ? 1 : 7;
function setVars() {
el = cal.currentDateEl;
var p = el.pos;
x = p & 15;
y = p >> 4;
ne = cal.ar_days[y][x];
};setVars();
function prevMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() - step);
cal.setDate(date);
};
function nextMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() + step);
cal.setDate(date);
};
while (1) {
switch (K) {
case 37: // KEY left
if (--x >= 0)
ne = cal.ar_days[y][x];
else {
x = 6;
K = 38;
continue;
}
break;
case 38: // KEY up
if (--y >= 0)
ne = cal.ar_days[y][x];
else {
prevMonth();
setVars();
}
break;
case 39: // KEY right
if (++x < 7)
ne = cal.ar_days[y][x];
else {
x = 0;
K = 40;
continue;
}
break;
case 40: // KEY down
if (++y < cal.ar_days.length)
ne = cal.ar_days[y][x];
else {
nextMonth();
setVars();
}
break;
}
break;
}
if (ne) {
if (!ne.disabled)
Calendar.cellClick(ne);
else if (prev)
prevMonth();
else
nextMonth();
}
}
break;
case 13: // KEY enter
if (act)
Calendar.cellClick(cal.currentDateEl, ev);
break;
default:
return false;
}
return Calendar.stopEvent(ev);
}; /**
* (RE)Initializes the calendar to the given date and firstDayOfWeek */
Calendar.prototype._init = function (firstDayOfWeek, date) {
var today = new Date(),
TY = today.getFullYear(),
TM = today.getMonth(),
TD = today.getDate();
this.table.style.visibility = "hidden";
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.firstDayOfWeek = firstDayOfWeek;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = date.getMonthDays();
// calendar voodoo for computing the first day that would actually be
// displayed in the calendar, even if it"s from the previous month.
// WARNING: this is magic. ;-)
date.setDate(1);
var day1 = (date.getDay() - this.firstDayOfWeek) % 7;
if (day1 < 0)
day1 += 7;
date.setDate(-day1);
date.setDate(date.getDate() + 1);
var row = this.tbody.firstChild;
var MN = Calendar._SMN[month];
var ar_days = this.ar_days = new Array();
var weekend = Calendar._TT["WEEKEND"];
var dates = this.multiple ? (this.datesCells = {}) : null;
for (var i = 0; i < 6; ++i, row = row.nextSibling) {
var cell = row.firstChild;
if (this.weekNumbers) {
cell.className = "day wn";
cell.innerHTML = date.getWeekNumber();
cell = cell.nextSibling;
}
row.className = "daysrow";
var hasdays = false, iday, dpos = ar_days[i] = [];
for (var j = 0; j < 7; ++j, cell = cell.nextSibling, date.setDate(iday + 1)) {
iday = date.getDate();
var wday = date.getDay();
cell.className = "day";
cell.pos = i << 4 | j;
dpos[j] = cell;
var current_month = (date.getMonth() == month);
if (!current_month) {
if (this.showsOtherMonths) {
cell.className += " othermonth";
cell.otherMonth = true;
} else {
cell.className = "emptycell";
cell.innerHTML = " ";
cell.disabled = true;
continue;
}
} else {
cell.otherMonth = false;
hasdays = true;
}
cell.disabled = false;
cell.innerHTML = this.getDateText ? this.getDateText(date, iday) : iday;
if (dates)
dates[date.print("%Y%m%d")] = cell;
if (this.getDateStatus) {
var status = this.getDateStatus(date, year, month, iday);
if (this.getDateToolTip) {
var toolTip = this.getDateToolTip(date, year, month, iday);
if (toolTip)
cell.title = toolTip;
}
if (status === true) {
cell.className += " disabled";
cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
}
}
if (!cell.disabled) {
cell.caldate = new Date(date);
cell.ttip = "_";
if (!this.multiple && current_month
&& iday == mday && this.hiliteToday) {
cell.className += " selected";
this.currentDateEl = cell;
}
if (date.getFullYear() == TY &&
date.getMonth() == TM &&
iday == TD) {
cell.className += " today";
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (weekend.indexOf(wday.toString()) != -1)
cell.className += cell.otherMonth ? " oweekend" : " weekend";
}
}
if (!(hasdays || this.showsOtherMonths))
row.className = "emptyrow";
}
this.title.innerHTML = Calendar._MN[month] + ", " + year;
this.onSetTime();
this.table.style.visibility = "visible";
this._initMultipleDates();
// PROFILE
// this.tooltips.innerHTML = "Generated in " + ((new Date()) - today) + " ms";
}; Calendar.prototype._initMultipleDates = function() {
if (this.multiple) {
for (var i in this.multiple) {
var cell = this.datesCells[i];
var d = this.multiple[i];
if (!d)
continue;
if (cell)
cell.className += " selected";
}
}
}; Calendar.prototype._toggleMultipleDate = function(date) {
if (this.multiple) {
var ds = date.print("%Y%m%d");
var cell = this.datesCells[ds];
if (cell) {
var d = this.multiple[ds];
if (!d) {
Calendar.addClass(cell, "selected");
this.multiple[ds] = date;
} else {
Calendar.removeClass(cell, "selected");
delete this.multiple[ds];
}
}
}
}; Calendar.prototype.setDateToolTipHandler = function (unaryFunction) {
this.getDateToolTip = unaryFunction;
}; /**
* Calls _init function above for going to a certain date (but only if the * date is different than the currently selected one). */
Calendar.prototype.setDate = function (date) {
if (!date.equalsTo(this.date)) {
this._init(this.firstDayOfWeek, date);
}
}; /**
* Refreshes the calendar. Useful if the "disabledHandler" function is * dynamic, meaning that the list of disabled date can change at runtime. * Just * call this function if you think that the list of disabled dates * should * change. */
Calendar.prototype.refresh = function () {
this._init(this.firstDayOfWeek, this.date);
}; /** Modifies the "firstDayOfWeek" parameter (pass 0 for Synday, 1 for Monday, etc.). */ Calendar.prototype.setFirstDayOfWeek = function (firstDayOfWeek) {
this._init(firstDayOfWeek, this.date); this._displayWeekdays();
}; /**
* Allows customization of what dates are enabled. The "unaryFunction" * parameter must be a function object that receives the date (as a JS Date * object) and returns a boolean value. If the returned value is true then * the passed date will be marked as disabled. */
Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.getDateStatus = unaryFunction;
}; /** Customization of allowed year range for the calendar. */ Calendar.prototype.setRange = function (a, z) {
this.minYear = a; this.maxYear = z;
}; /** Calls the first user handler (selectedHandler). */ Calendar.prototype.callHandler = function () {
if (this.onSelected) {
this.onSelected(this, this.date.print(this.dateFormat));
}
}; /** Calls the second user handler (closeHandler). */ Calendar.prototype.callCloseHandler = function () {
if (this.onClose) {
this.onClose(this);
}
this.hideShowCovered();
}; /** Removes the calendar object from the DOM tree and destroys it. */ Calendar.prototype.destroy = function () {
var el = this.element.parentNode; el.removeChild(this.element); Calendar._C = null; window._dynarch_popupCalendar = null;
}; /**
* Moves the calendar element to a different section in the DOM tree (changes * its parent). */
Calendar.prototype.reparent = function (new_parent) {
var el = this.element; el.parentNode.removeChild(el); new_parent.appendChild(el);
}; // This gets called when the user presses a mouse button anywhere in the // document, if the calendar is shown. If the click was outside the open // calendar this function closes it. Calendar._checkCalendar = function(ev) {
var calendar = window._dynarch_popupCalendar;
if (!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) {
// calls closeHandler which should hide the calendar.
window._dynarch_popupCalendar.callCloseHandler();
return Calendar.stopEvent(ev);
}
}; /** Shows the calendar. */ 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._dynarch_popupCalendar = this;
Calendar.addEvent(document, "keydown", Calendar._keyEvent);
Calendar.addEvent(document, "keypress", Calendar._keyEvent);
Calendar.addEvent(document, "mousedown", Calendar._checkCalendar);
}
this.hideShowCovered();
}; /**
* Hides the calendar. Also removes any "hilite" from the class of any TD * element. */
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();
}; /**
* Shows the calendar at a given absolute position (beware that, depending on * the calendar element style -- position property -- this might be relative * to the parent"s containing rectangle). */
Calendar.prototype.showAt = function (x, y) {
var s = this.element.style; s.left = x + "px"; s.top = y + "px"; this.show();
}; /** Shows the calendar near a given element. */ Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight);
return true;
}
function fixPosition(box) {
if (box.x < 0)
box.x = 0;
if (box.y < 0)
box.y = 0;
var cp = document.createElement("div");
var s = cp.style;
s.position = "absolute";
s.right = s.bottom = s.width = s.height = "0px";
document.body.appendChild(cp);
var br = Calendar.getAbsolutePos(cp);
document.body.removeChild(cp);
if (Calendar.is_ie) {
br.y += document.body.scrollTop;
br.x += document.body.scrollLeft;
} else {
br.y += window.scrollY;
br.x += window.scrollX;
}
var tmp = box.x + box.width - br.x;
if (tmp > 0) box.x -= tmp;
tmp = box.y + box.height - br.y;
if (tmp > 0) box.y -= tmp;
};
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);
}
// vertical alignment
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; // already there
}
// horizontal alignment
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 "l": p.x += el.offsetWidth - w; break;
case "r": break; // already there
}
p.width = w;
p.height = h + 40;
self.monthsCombo.style.display = "none";
fixPosition(p);
self.showAt(p.x, p.y);
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
}; /** Customizes the date format. */ Calendar.prototype.setDateFormat = function (str) {
this.dateFormat = str;
}; /** Customizes the tooltip date format. */ Calendar.prototype.setTtDateFormat = function (str) {
this.ttDateFormat = str;
}; /**
* Tries to identify the date represented in a string. If successful it also * calls this.setDate which moves the calendar to the given date. */
Calendar.prototype.parseDate = function(str, fmt) {
if (!fmt) fmt = this.dateFormat; this.setDate(Date.parseDate(str, fmt));
}; Calendar.prototype.hideShowCovered = function () {
if (!Calendar.is_ie && !Calendar.is_opera)
return;
function getVisib(obj){
var value = obj.style.visibility;
if (!value) {
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
if (!Calendar.is_khtml)
value = document.defaultView.
getComputedStyle(obj, "").getPropertyValue("visibility");
else
value = "";
} else if (obj.currentStyle) { // IE
value = obj.currentStyle.visibility;
} else
value = "";
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = this.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 (this.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";
}
}
}
}; /** Internal function; it displays the bar with the names of the weekday. */ Calendar.prototype._displayWeekdays = function () {
var fdow = this.firstDayOfWeek;
var cell = this.firstdayname;
var weekend = Calendar._TT["WEEKEND"];
for (var i = 0; i < 7; ++i) {
cell.className = "day name";
var realday = (i + fdow) % 7;
if (i) {
cell.ttip = Calendar._TT["DAY_FIRST"].replace("%s", Calendar._DN[realday]);
cell.navtype = 100;
cell.calendar = this;
cell.fdow = realday;
Calendar._add_evs(cell);
}
if (weekend.indexOf(realday.toString()) != -1) {
Calendar.addClass(cell, "weekend");
}
cell.innerHTML = Calendar._SDN[(i + fdow) % 7];
cell = cell.nextSibling;
}
}; /** Internal function. Hides all combo boxes that might be displayed. */ Calendar.prototype._hideCombos = function () {
this.monthsCombo.style.display = "none"; this.yearsCombo.style.display = "none";
}; /** Internal function. Starts dragging the element. */ 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, "mouseup", calDragEnd);
}
}; // BEGIN: DATE OBJECT PATCHES /** Adds the number of days array to the Date object. */ Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31); /** Constants used for time computations */ Date.SECOND = 1000 /* milliseconds */; Date.MINUTE = 60 * Date.SECOND; Date.HOUR = 60 * Date.MINUTE; Date.DAY = 24 * Date.HOUR; Date.WEEK = 7 * Date.DAY; Date.parseDate = function(str, fmt) {
var today = new Date();
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/\W+/);
var b = fmt.match(/%./g);
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (!a[i])
continue;
switch (b[i]) {
case "%d":
case "%e":
d = parseInt(a[i], 10);
break;
case "%m":
m = parseInt(a[i], 10) - 1;
break;
case "%Y":
case "%y":
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
break;
case "%b":
case "%B":
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
break;
case "%H":
case "%I":
case "%k":
case "%l":
hr = parseInt(a[i], 10);
break;
case "%P":
case "%p":
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
else if (/am/i.test(a[i]) && hr >= 12)
hr -= 12;
break;
case "%M":
min = parseInt(a[i], 10);
break;
}
}
if (isNaN(y)) y = today.getFullYear();
if (isNaN(m)) m = today.getMonth();
if (isNaN(d)) d = today.getDate();
if (isNaN(hr)) hr = today.getHours();
if (isNaN(min)) min = today.getMinutes();
if (y != 0 && m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
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)
y = today.getFullYear();
if (m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
return today;
}; /** Returns the number of days in the current month */ 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];
}
}; /** Returns the number of day in the year. */ Date.prototype.getDayOfYear = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var then = new Date(this.getFullYear(), 0, 0, 0, 0, 0); var time = now - then; return Math.floor(time / Date.DAY);
}; /** Returns the number of the week in year, as defined in ISO 8601. */ Date.prototype.getWeekNumber = function() {
var d = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var DoW = d.getDay(); d.setDate(d.getDate() - (DoW + 6) % 7 + 3); // Nearest Thu var ms = d.valueOf(); // GMT d.setMonth(0); d.setDate(4); // Thu in Week 1 return Math.round((ms - d.valueOf()) / (7 * 864e5)) + 1;
}; /** Checks date and time equality */ 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()));
}; /** Set only the year, month, date parts (keep existing time) */ Date.prototype.setDateOnly = function(date) {
var tmp = new Date(date); this.setDate(1); this.setFullYear(tmp.getFullYear()); this.setMonth(tmp.getMonth()); this.setDate(tmp.getDate());
}; /** Prints the date in a string according to the given format. */ 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]; // abbreviated weekday name [FIXME: I18N]
s["%A"] = Calendar._DN[w]; // full weekday name
s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["%B"] = Calendar._MN[m]; // full month name
// FIXME: %c : preferred date and time representation for the current locale
s["%C"] = 1 + Math.floor(y / 100); // the century number
s["%d"] = (d < 10) ? ("0" + d) : d; // the day of the month (range 01 to 31)
s["%e"] = d; // the day of the month (range 1 to 31)
// FIXME: %D : american date style: %m/%d/%y
// FIXME: %E, %F, %G, %g, %h (man strftime)
s["%H"] = (hr < 10) ? ("0" + hr) : hr; // hour, range 00 to 23 (24h format)
s["%I"] = (ir < 10) ? ("0" + ir) : ir; // hour, range 01 to 12 (12h format)
s["%j"] = (dy < 100) ? ((dy < 10) ? ("00" + dy) : ("0" + dy)) : dy; // day of the year (range 001 to 366)
s["%k"] = hr; // hour, range 0 to 23 (24h format)
s["%l"] = ir; // hour, range 1 to 12 (12h format)
s["%m"] = (m < 9) ? ("0" + (1+m)) : (1+m); // month, range 01 to 12
s["%M"] = (min < 10) ? ("0" + min) : min; // minute, range 00 to 59
s["%n"] = "\n"; // a newline character
s["%p"] = pm ? "PM" : "AM";
s["%P"] = pm ? "pm" : "am";
// FIXME: %r : the time in am/pm notation %I:%M:%S %p
// FIXME: %R : the time in 24-hour notation %H:%M
s["%s"] = Math.floor(this.getTime() / 1000);
s["%S"] = (sec < 10) ? ("0" + sec) : sec; // seconds, range 00 to 59
s["%t"] = "\t"; // a tab character
// FIXME: %T : the time in 24-hour notation (%H:%M:%S)
s["%U"] = s["%W"] = s["%V"] = (wn < 10) ? ("0" + wn) : wn;
s["%u"] = w + 1; // the day of the week (range 1 to 7, 1 = MON)
s["%w"] = w; // the day of the week (range 0 to 6, 0 = SUN)
// FIXME: %x : preferred date representation for the current locale without the time
// FIXME: %X : preferred time representation for the current locale without the date
s["%y"] = ("" + y).substr(2, 2); // year without the century (range 00 to 99)
s["%Y"] = y; // year with the century
s["%%"] = "%"; // a literal "%" character
var re = /%./g;
if (!Calendar.is_ie5 && !Calendar.is_khtml)
return str.replace(re, function (par) { return s[par] || par; });
var a = str.match(re);
for (var i = 0; i < a.length; i++) {
var tmp = s[a[i]];
if (tmp) {
re = new RegExp(a[i], "g");
str = str.replace(re, tmp);
}
}
return str;
}; Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear; Date.prototype.setFullYear = function(y) {
var d = new Date(this); d.__msh_oldSetFullYear(y); if (d.getMonth() != this.getMonth()) this.setDate(28); this.__msh_oldSetFullYear(y);
}; // END: DATE OBJECT PATCHES
// global object that remembers the calendar window._dynarch_popupCalendar = null;
</script> <script type="text/javascript">
// ** I18N // Calendar EN language // Author: Mihai Bazon, <mihai_bazon@yahoo.ru> // Encoding: any // Distributed under the same terms as the calendar itself. // For translators: please use UTF-8 if possible. We strongly believe that // Unicode is the answer to a real internationalized world. Also please // include your contact information in the header, as can be seen above. // full day names Calendar._DN = new Array ("Sunday",
"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
// Please note that the following array of short day names (and the same goes // for short month names, _SMN) isn"t absolutely necessary. We give it here // for exemplification on how one can customize the short day names, but if // they are simply the first N letters of the full name you can simply say: // // Calendar._SDN_len = N; // short day name length // Calendar._SMN_len = N; // short month name length // // If N = 3 then this is not needed either since we assume a value of 3 if not // present, to be compatible with translation files that were written before // this feature. // short day names Calendar._SDN = new Array ("Sun",
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
// First day of the week. "0" means display Sunday first, "1" means display // Monday first, etc. Calendar._FD = 0; // full month names Calendar._MN = new Array ("January",
"February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// short month names Calendar._SMN = new Array ("Jan",
"Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// tooltips Calendar._TT = {}; Calendar._TT["INFO"] = "About the calendar"; Calendar._TT["ABOUT"] = "DHTML Date/Time Selector\n" + "(c) dynarch.ru 2002-2005 / Author: Mihai Bazon\n" + // don"t translate this this ;-) "For latest version visit: http://www.dynarch.ru/projects/calendar/\n" + "Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." + "\n\n" + "Date selection:\n" + "- Use the \xab, \xbb buttons to select year\n" + "- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" + "- Hold mouse button on any of the above buttons for faster selection."; Calendar._TT["ABOUT_TIME"] = "\n\n" + "Time selection:\n" + "- Click on any of the time parts to increase it\n" + "- or Shift-click to decrease it\n" + "- or click and drag for faster selection."; Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["GO_TODAY"] = "Go Today"; Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)"; Calendar._TT["SEL_DATE"] = "Select date"; Calendar._TT["DRAG_TO_MOVE"] = "Drag to move"; Calendar._TT["PART_TODAY"] = " (today)"; // the following is to inform that "%s" is to be the first day of week // %s will be replaced with the day name. Calendar._TT["DAY_FIRST"] = "Display %s first"; // This may be locale-dependent. It specifies the week-end days, as an array // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 // means Monday, etc. Calendar._TT["WEEKEND"] = "0,6"; Calendar._TT["CLOSE"] = "Close"; Calendar._TT["TODAY"] = "Today"; Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value"; // date formats Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d"; Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e"; Calendar._TT["WK"] = "wk"; Calendar._TT["TIME"] = "Time:";
</script> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.ru/mishoo/
* --------------------------------------------------------------------------- * * The DHTML Calendar * * Details and latest version at: * http://dynarch.ru/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.25 2005/03/07 09:51:33 mishoo 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) * firstDay | numeric: 0 to 6. "0" means display Sunday first, "1" means display Monday first, etc. * align | alignment (default: "Br"); 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" * electric | if true (default) then given fields/date areas are updated for each move; otherwise they"re updated only on close * step | configures the step of the years in drop-down boxes; default: 2 * position | configures the calendar absolute position; default: null * cache | if "true" (but default: "false") it will reuse the same calendar object, where possible * showOthers | if "true" (but default: "false") it will show days from other months too * * 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("dateText", null);
param_default("firstDay", null);
param_default("align", "Br");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
param_default("electric", true);
param_default("step", 2);
param_default("position", null);
param_default("cache", false);
param_default("showOthers", false);
param_default("multiple", 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.multiple || 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) {
var p = cal.params;
var update = (cal.dateClicked || p.electric);
if (update && p.inputField) {
p.inputField.value = cal.date.print(p.ifFormat);
if (typeof p.inputField.onchange == "function")
p.inputField.onchange();
}
if (update && p.displayArea)
p.displayArea.innerHTML = cal.date.print(p.daFormat);
if (update && typeof p.onUpdate == "function")
p.onUpdate(cal);
if (update && p.flat) {
if (typeof p.flatCallback == "function")
p.flatCallback(cal);
}
if (update && p.singleClick && cal.dateClicked)
cal.callCloseHandler();
};
if (params.flat != null) {
if (typeof params.flat == "string")
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.firstDay, params.date, params.onSelect || onSelect);
cal.showsOtherMonths = params.showOthers;
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.getDateText = params.dateText;
if (params.ifFormat) {
cal.setDateFormat(params.ifFormat);
}
if (params.inputField && typeof params.inputField.value == "string") {
cal.parseDate(params.inputField.value);
}
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 (dateEl)
params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
if (!(cal && params.cache)) {
window.calendar = cal = new Calendar(params.firstDay,
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 {
if (params.date)
cal.setDate(params.date);
cal.hide();
}
if (params.multiple) {
cal.multiple = {};
for (var i = params.multiple.length; --i >= 0;) {
var d = params.multiple[i];
var ds = d.print("%Y%m%d");
cal.multiple[ds] = d;
}
}
cal.showsOtherMonths = params.showOthers;
cal.yearStep = params.step;
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.getDateText = params.dateText;
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.refresh();
if (!params.position)
cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
else
cal.showAt(params.position[0], params.position[1]);
return false;
};
return cal;
};
</script>
<script type="text/javascript">
// define info for dates in this table:
var dateInfo = {
"20050308" : "Mishoo"s birthday",
"20050310" : "foo",
"20050315" : "bar",
"20050318" : "25$",
"20050324" : "60$"
};
</script> <style type="text/css">
@import url(calendar-win2k-1.css);
.calendar .inf { font-size: 80%; color: #444; }
.calendar .wn { font-weight: bold; vertical-align: top; }
</style> </head> <body>
How to include additional info in day cells
<script type="text/javascript">
function getDateText(date, d) {
var inf = dateInfo[date.print("%Y%m%d")];
if (!inf) {
return d + " } else {
return d + " }
};
function flatCallback(cal) {
if (cal.dateClicked) {
// do something here
window.status = "Selected: " + cal.date;
var inf = dateInfo[cal.date.print("%Y%m%d")];
if (inf) {
window.status += ". Additional info: " + inf;
}
}
};
Calendar.setup({
flat: "flatcal",
dateText: getDateText,
flatCallback: flatCallback
});
</script>
The idea is simple:
-
Define a callback that takes two parameters like this:
function getDateText(date, d)
This function will receive the date object as the first parameter and the current date number (1..31) as the second (you can get it as well by calling date.getDate() but since it"s very probably useful I thought I"d pass it too so that we can avoid a function call).
This function must return the text to be inserted in the cell of the passed date. That is, one should at least "return d;".
- Pass the above function as the "dateText" parameter to Calendar.setup.
The function could simply look like:
function getDateText(date, d) {
if (d == 12) {
return "12th";
} else if (d == 13) {
return "bad luck";
} /* ... etc ... */
}
but it"s easy to imagine that this approach sucks. For a better way, see the source of this page and note the usage of an externally defined "dateText" object which maps "date" to "date info", also taking into account the year and month. This object can be easily generated from a database, and the getDateText function becomes extremely simple (and static).
Cheers!
<address><a href="http://dynarch.ru/mishoo/">mishoo</a></address>
Last modified: Sat Mar 5 17:18:06 EET 2005
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jscalendar-1.0.zip">jscalendar-1.0.zip( 396 k)</a>
Calendar (IE only)
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title>JavaScript Date Picker</title> <style rel="stylesheet" id="mainStyle" type="text/css" > html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <style type="text/css">
- calendar {position:absolute;
left:0px;
top:0px;
visibility:hidden
}
table {font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999
}
th {background-color:#ccffcc;
text-align:center; font-size:10px; width:26px }
- tableHeader {background-color:#ffcccc;
width:100%
}
td {background-color:#ffffcc;
text-align:center; font-size:10px }
- tableBody tr td {width:26px}
- today {background-color:#ffcc33}
a:link {color:#000000; text-decoration:none} a:active {color:#000000; text-decoration:none} a:visited {color:#000000; text-decoration:none} a:hover {color:#990033; text-decoration:underline} </style> <script type="text/javascript"> /* *********************************************************** Example 4-3 (DHTMLAPI.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O"Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.ru Copyright 2002 Danny Goodman. All Rights Reserved.
- */
// DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.ru). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS; // Initialize upon load to let all browsers establish content objects function initDHTMLAPI() {
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
}
} // Set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
} // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
} // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
} // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
} // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
} // Set the z-order of an object function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
} // Set the background color of an object function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
} // Set the visibility of an object to visible function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
} // Set the visibility of an object to hidden function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
} // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
} // Retrieve the y coordinate of a positionable object function getObjectTop(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
} // Retrieve the rendered width of an element function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
} // Retrieve the rendered height of an element function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
} // Return the available content width space in browser window function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element"s clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
} // Return the available content height space in browser window function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element"s clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script> <script type="text/javascript"> /*******************
UTILITY FUNCTIONS
- /
// day of week of month"s first day function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1); return firstDate.getDay();
} // number of days in the month function getMonthLen(theYear, theMonth) {
var nextMonth = new Date(theYear, theMonth + 1, 1); nextMonth.setHours(nextMonth.getHours() - 3); return nextMonth.getDate();
} function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
} // position and show calendar function showCalendar(evt) {
evt = (evt) ? evt : event;
if (evt) {
if (document.getElementById("calendar").style.visibility != "visible") {
var elem = (evt.target) ? evt.target : evt.srcElement;
var position = getElementPosition(elem.id);
shiftTo("calendar", position.left + elem.offsetWidth, position.top);
show("calendar");
} else {
hide("calendar");
}
}
} /************************
DRAW CALENDAR CONTENTS
- /
// clear and re-populate table based on form"s selections function populateTable(form) {
// pick up date form choices
var theMonth = form.chooseMonth.selectedIndex;
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text);
// initialize date-dependent variables
var firstDay = getFirstDay(theYear, theMonth);
var howMany = getMonthLen(theYear, theMonth);
var today = new Date();
// fill in month/year in table header
document.getElementById("tableHeader").innerHTML =
form.chooseMonth.options[theMonth].text + " " + theYear;
// initialize vars for table creation
var dayCounter = 1;
var TBody = document.getElementById("tableBody");
// clear any existing rows
while (TBody.rows.length > 0) {
TBody.deleteRow(0);
}
var newR, newC, dateNum;
var done=false;
while (!done) {
// create new row at end
newR = TBody.insertRow(TBody.rows.length);
if (newR) {
for (var i = 0; i < 7; i++) {
// create new cell at end of row
newC = newR.insertCell(newR.cells.length);
if (TBody.rows.length == 1 && i < firstDay) {
// empty boxes before first day
newC.innerHTML = " ";
continue;
}
if (dayCounter == howMany) {
// no more rows after this one
done = true;
}
// plug in link/date (or empty for boxes after last day)
if (dayCounter <= howMany) {
if (today.getFullYear() == theYear &&
today.getMonth() == form.chooseMonth.selectedIndex &&
today.getDate() == dayCounter) {
newC.id = "today";
}
newC.innerHTML = "<a href="#"onclick="chooseDate(" +
dayCounter + "," + theMonth + "," + theYear +
"); return false;">" + dayCounter + "</a>";
dayCounter++;
} else {
newC.innerHTML = " ";
}
}
} else {
done = true;
}
}
} /*******************
INITIALIZATIONS
- /
// create dynamic list of year choices function fillYears() {
var today = new Date();
var thisYear = today.getFullYear();
var yearChooser = document.dateChooser.chooseYear;
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i);
}
setCurrMonth(today);
} // set month choice to current month function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth();
} /*******************
PROCESS CHOICE
- /
function chooseDate(date, month, year) {
document.mainForm.date.value = date;
document.mainForm.month.value = month + 1;
document.mainForm.year.value = year;
hide("calendar");
} </script> </head> <body onload="fillYears(); populateTable(document.dateChooser); initDHTMLAPI()">
Date Picker
<form name="mainForm" id="mainForm" method="POST" action="">
Enter a date:
mm:<input type="text" name="month" id="month" size="3" maxlength="2" value="1"> dd:<input type="text" name="date" id="date" size="3" maxlength="2" value="1"> yyyy:<input type="text" name="year" id="year" size="5" maxlength="4" value="2003"> <input type="button" id="showit" value="Pick Date >>" onclick="showCalendar(event)">
</form>
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
|
<form name="dateChooser"> <select name="chooseMonth" onchange="populateTable(this.form)"> <option selected>January<option>February <option>March<option>April<option>May <option>June<option>July<option>August <option>September<option>October <option>November<option>December </select> <select name="chooseYear" onchange="populateTable(this.form)"> </select> </form> |
||||||
</body> </html>
</source>
Calendar in slide tab
<source lang="html4strict"> <html><head><title>DHTML Calendar</title>
<meta name="author" content="Eric Pretorious"> <meta name="subject" content="DHTML Calendar"> <meta name="keywords" content="DHTML, dynamic HTML, crossbrowser, cross-browser, cross browser, javascript, calendar script">
<style rel="stylesheet" type="text/css">
- banner {
position:absolute; top:0px;left:0px; width:740px;height:110px; padding:10px;margin:10px; border-bottom:1px solid gray;
}
- buttons {
position:absolute; z-index:0; top:141px;left:10px;
} .button {
position:relative; width:140px; background:#ccffcc; border:1px solid #99ff99; padding:9px;margin:10px; font-family:sans-serif;font-size:10px;
} .badge {
position:relative; width:140px; background:transparent; padding:10px;margin:10px; text-align:center;
} .badge a img {
border:1px solid white;
}
- cover {
position:absolute; z-index:2; top:141px;left:191px; width:570px;height:450px; background:#ccccff; border:1px solid #ff9999; padding:0;margin:10 8 10 0; font-family:sans-serif;font-size:10px;
}
- page {
position:absolute; z-index:1; top:141px;left:191px; width:570px;height:450px; background:#ccccff; border:1px solid #9999ff; padding:0;margin:10 8 10 0; font-family:sans-serif;font-size:10px;
} .container {
position:absolute; width:550px; background:transparent; border-bottom:1px solid gray; padding-bottom:10px;margin:10px;
} .container .title {
font-weight:600; font-size:11px; padding:0;margin:0;
} .container .content {
font-weight:400; font-size:10px; line-height:18px;
} .code_ref {
position:relative; display:block; border:1px solid #9999ff; background:white; padding:10px; margin:5 0 5 0;
} </style>
<style rel="stylesheet" type="text/css">
- DHTMLC {
position:relative; margin:0 0 10 10; height:180px;width:230px; visibility:hidden; font-family:verdana, arial, sans-serif;font-size:10px; line-height:18px; background-color:white;border:1px solid #9999ff;
} .months {
position:absolute; height :18px;width:45px; text-align:center;background-color:#ccccff;
} .dotw {
position:absolute; height :18px;width:28px; text-align:center;background-color:#ccccff;
} .days {
position:absolute; height :18px;width:28px; text-align:center;background-color:white;
} .days a:link {
text-decoration:none;
}
- moniker {
height:18px;width:210px; text-align:center;color:#ccc; font-family:verdana, arial, sans-serif;font-size:7px; line-height:9px;
}
- moniker a:link {
color:gray;
} </style>
<script type="text/javascript" > /* cbe_core.js $Revision: 0.22 $
* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru * Copyright (c) 2002 Michael Foster (mike@cross-browser.ru) * Distributed under the terms of the GNU LGPL from gnu.org
- /
var cbeVersion="4.19", cbeDocumentId="idDocument", cbeWindowId="idWindow", cbeAll=new Array(); window.onload=function(){cbeInitialize("DIV", "SPAN"); if (window.windowOnload) window.windowOnload();} window.onunload=function(){if(window.windowOnunload){window.windowOnunload();}if(window.cbeDebugObj){window.cbeDebugObj=null;}for(var i=0; i<cbeAll.length; i++){if(cbeAll[i]){if(cbeAll[i].ele){if(cbeAll[i].ele.cbe){cbeAll[i].ele.cbe=null;}cbeAll[i].ele=null;}cbeAll[i]=null;}}} function CrossBrowserNode(){this.parentNode=null; this.childNodes=0; this.firstChild=null; this.lastChild=null; this.previousSibling=null; this.nextSibling=null;} CrossBrowserNode.prototype.appendNode=function(cbeChild){if (cbeChild){if (!this.firstChild){this.firstChild=cbeChild;} else{cbeChild.previousSibling=this.lastChild; this.lastChild.nextSibling=cbeChild;}cbeChild.parentNode=this; this.lastChild=cbeChild; ++this.childNodes;}return cbeChild;} CrossBrowserElement.prototype=new CrossBrowserNode; function CrossBrowserElement(){
this.contains=this.left=this.top=this.offsetLeft=this.offsetTop=this.pageX=this.pageY=this.zIndex=_retZero;
this.show=this.hide=this.moveTo=this.moveBy=this.sizeTo=this.sizeBy=this.resizeTo=this.resizeBy=_retVoid;
this.visibility=this.color=this.background=this.clip=this.innerHtml=_retEStr;
if (cbeAll.length < 2){this.width=cbeInnerWidth; this.height=cbeInnerHeight; this.scrollLeft=cbePageXOffset; this.scrollTop=cbePageYOffset;}
else{this.width=this.height=this.scrollLeft=this.scrollTop=_retZero;}
this.id=""; this.index=cbeAll.length; cbeAll[this.index]=this; this.w=this.h=0; this.x=this.y=0;
if (window.cbeEventJsLoaded) this.listeners=new Array();
} function cbeBindElement(cbe, ele){
if (!cbe || !ele) return;
cbe.ele=ele; cbe.ele.cbe=cbe; cbe.parentElement=cbeGetParentElement(ele);
if (ele==window){cbe.id=ele.id=cbeWindowId; return;} else if (ele==document){cbe.id=ele.id=cbeDocumentId; return;} else{cbe.id=ele.id;}
if (_def(ele.clip)){cbe.w=ele.clip.width; cbe.h=ele.clip.height;}
var css=_def(ele.style);
// left, top
cbe.moveTo=_cbeMoveTo; cbe.moveBy=_cbeMoveBy; if (css && _def(ele.style.left, ele.style.top) && typeof(ele.style.left)=="string"){cbe.left=_domLeft; cbe.top=_domTop;}else if (css && _def(ele.style.pixelLeft, ele.style.pixelTop)){cbe.left=_ieLeft; cbe.top=_ieTop;}else if (_def(ele.left, ele.top)){cbe.left=_nnLeft; cbe.top=_nnTop;}else{_sup(false,"left","top","moveTo","moveBy");}
// width, height
cbe.sizeTo=_cbeSizeTo; cbe.sizeBy=_cbeSizeBy; cbe.resizeTo=_cbeResizeTo; cbe.resizeBy=_cbeResizeBy; if (css && _def(ele.style.width, ele.style.height, ele.offsetWidth, ele.offsetHeight) && typeof(ele.style.width)=="string"){cbe.width=_domWidth; cbe.height=_domHeight;}else if (css && _def(ele.style.pixelWidth, ele.style.pixelHeight)){cbe.width=_ieWidth; cbe.height=_ieHeight;}else if (_def(ele.clip) && _def(ele.clip.width, ele.clip.height)){cbe.width=_nnWidth; cbe.height=_nnHeight;}else{_sup(false, "width","height","sizeTo","sizeBy","resizeTo","resizeBy");}
// zIndex
if (css && _def(ele.style.zIndex)){cbe.zIndex=_domZIndex;} else if (_def(ele.zIndex)){cbe.zIndex=_nnZIndex;} else{_sup(false,"zIndex");}
// visibility
cbe.show=_cbeShow; cbe.hide=_cbeHide; if (css && _def(ele.style.visibility)){cbe.visibility=_domVisibility;} else if (_def(ele.visibility)){cbe.visibility=_nnVisibility;} else{_sup(false,"visibility","show","hide");}
// background
if (css && _def(ele.style.backgroundColor, ele.style.backgroundImage)){cbe.background=_domBackground;} else if (_def(ele.bgColor, ele.background)){cbe.background=_nnBackground;} else{_sup(false,"background");}
// color
if (css && _def(ele.style.color)){cbe.color=_domColor;} else{_sup(false,"color");}
// clip
if (css && _def(ele.style.clip)){cbe.clip=_domClip;} else if (_def(ele.clip)){cbe.clip=_nnClip;} else{_sup(false,"clip");}
// offsetLeft, offsetTop
if (_def(ele.offsetLeft, ele.offsetTop, ele.offsetParent)){cbe.offsetLeft=_ieOffsetLeft; cbe.offsetTop=_ieOffsetTop;}else if (_def(ele.pageX, ele.pageY)){cbe.offsetLeft=_nnOffsetLeft; cbe.offsetTop=_nnOffsetTop;}else{_sup(false,"offsetLeft","offsetTop");}
// pageX, pageY
cbe.contains=_cbeContains; if (_def(ele.pageX, ele.pageY)){cbe.pageX=_nnPageX; cbe.pageY=_nnPageY;}else if (document.cbe.isSupported("offsetLeft")){cbe.pageX=_cbePageX; cbe.pageY=_cbePageY;}else{_sup(false,"pageX","pageY","contains");}
// innerHtml
if (_def(ele.innerHTML)){cbe.innerHtml=_ieInnerHtml;} else if (_def(ele.document) && _def(ele.document.write)){cbe.innerHtml=_nnInnerHtml;} else{_sup(false,"innerHtml");}
// scrollLeft, scrollTop
if (_def(ele.scrollLeft, ele.scrollTop)){cbe.scrollLeft=_cbeScrollLeft; cbe.scrollTop=_cbeScrollTop;}else{_sup(false,"scrollLeft","scrollTop");}
// createElement, appendChild, removeChild (these need more work)
if (!_def(document.createElement) && !document.layers){_sup(false,"createElement","appendChild","removeChild");}else{if (!_def(ele.appendChild)){_sup(false,"appendChild");} if (!_def(ele.removeChild)){_sup(false,"removeChild");}}
} function cbeInitialize(sTagNames){
var t,i,ele,eleList,cbe;
cbe=new CrossBrowserElement(window);
cbeBindElement(cbe, window);
cbe=new CrossBrowserElement(document);
cbeBindElement(cbe, document);
if (!document.getElementById) document.getElementById=cbeGetElementById;
if (document.createElement || document.layers) document.cbe.createElement=_cbeCreateElement;
document.cbe.isSupported=_cbeIsSupported;
document.cbe.supported=new Array();
_sup(true,"left","top","width","height","zIndex","show","hide","visibility","background","color","clip","offsetLeft","offsetTop","pageX","pageY","innerHtml","scrollLeft","scrollTop","createElement","appendChild","removeChild","moveTo","moveBy","sizeTo","sizeBy","resizeTo","resizeBy","contains");
for (t=0; t < arguments.length; ++t){
eleList=cbeGetElementsByTagName(arguments[t]);
for (i=0; i < eleList.length; ++i){
ele=eleList[i];
if ( ele.id && ele.id !=""){
cbe=new CrossBrowserElement();
cbeBindElement(cbe, ele);
}
}
if (document.layers) break;
}
_cbeCreateTree();
if (window.cbeEventJsLoaded && (document.layers || is.opera5or6)){window.cbe.addEventListener("resize", cbeDefaultResizeListener);}
} function _cbeIsSupported(sMethods){var i; for (i=0; i<arguments.length; ++i){if (!document.cbe.supported[arguments[i]]) return false;}return true;} function _sup(bValue, sMethods){var i; for (i=1; i<arguments.length; ++i) document.cbe.supported[arguments[i]]=bValue;} function _cbeCreateTree(){var parent; for (var i=1; i < cbeAll.length; ++i){parent=cbeAll[i].parentElement; if (!parent.cbe){while (parent && !parent.cbe){parent=cbeGetParentElement(parent);}if (!parent) parent=document;}parent.cbe.appendNode(cbeAll[i]);}} function cbeGetElementById(sId){var ele=null; if (sId==window.cbeWindowId) ele=window; else if (sId==window.cbeDocumentId) ele=document; else if (is.dom1getbyid) ele=document.getElementById(sId); else if (document.all) ele=document.all[sId]; else if (document.layers) ele=nnGetElementById(sId); if (!ele && window.cbeUtilJsLoaded){ele=cbeGetImageByName(sId); if (!ele){ele=cbeGetFormByName(sId);}} return ele;} function nnGetElementById(sId){for (var i=0; i < cbeAll.length; i++){if ( cbeAll[i].id==sId ) return cbeAll[i].ele;}return null;} function cbeGetElementsByTagName(sTagName){
var eleList;
if (document.getElementsByTagName) eleList=document.getElementsByTagName(sTagName); // standard
else if (document.body && document.body.getElementsByTagName) eleList=document.body.getElementsByTagName(sTagName); // opera5or6
else if (document.all && document.all.tags) eleList=document.all.tags(sTagName); // ie4
else if (document.layers){eleList=new Array(); nnGetAllLayers(window, eleList, 0);}// nn4
return eleList;
} function nnGetAllLayers(parent, layerArray, nextIndex){
var i, layer;
for (i=0; i < parent.document.layers.length; i++){
layer=parent.document.layers[i]; layerArray[nextIndex++]=layer;
if (layer.document.layers.length) nextIndex=nnGetAllLayers(layer, layerArray, nextIndex);
}
return nextIndex;
} function cbeGetParentElement(child){
var parent=document;
if (child==window) parent=null;
else if (child==document) parent=window;
else if (child.parentLayer){if (child.parentLayer !=window) parent=child.parentLayer;}
else{
if (child.parentNode) parent=child.parentNode;
else if (child.offsetParent) parent=child.offsetParent;
else if (child.parentElement) parent=child.parentElement;
}
return parent;
} function _def(){var i; for (i=0; i<arguments.length; ++i){if (typeof(arguments[i])=="" || typeof(arguments[i])=="undefined") return false;}return true;} function _retZero(){return 0;} function _retNull(){return null;} function _retEStr(){return "";} function _retVoid(){} ////// when optimizing, don"t remove anything above this comment ////// function _cbeCreateElement(sEleType){// returns an Element object
var ele=null;
if (document.createElement && sEleType.length){
ele=document.createElement(sEleType);
if (ele && ele.style){ele.style.position="absolute";}
}
else if (document.layers){
ele=new Object();
}
return ele;
} CrossBrowserNode.prototype.appendChild=function(eleChild){// returns the appended Element object on success
var cbe, ele, rv=null;
if (document.layers){
var thisEle;
if (this.index < 2) thisEle=window;
else thisEle=this.ele;
ele=new Layer(this.width(), thisEle);
if (ele){
if (eleChild.id) ele.id=ele.name=eleChild.id;
cbe=new CrossBrowserElement();
cbeBindElement(cbe, ele);
this.appendNode(ele.cbe);
eleChild.cbe=cbe;
++this.childNodes;
rv=ele;
}
}
else{
if (this.index < 2) ele=document.body;
else ele=this.ele;
if (ele.appendChild){
ele.appendChild(eleChild);
cbe=new CrossBrowserElement();
cbeBindElement(cbe, eleChild);
this.appendNode(eleChild.cbe);
++this.childNodes;
rv=eleChild;
}
}
return rv;
} CrossBrowserNode.prototype.removeChild=function(eleChild){
var ele, rv=null;
if (this.index < 2) ele=document.body;
else ele=this.ele;
if (ele.removeChild || document.layers){
--this.childNodes;
var prevSib=eleChild.cbe.previousSibling;
var nextSib=eleChild.cbe.nextSibling;
with (eleChild.cbe){
parentNode=null;
previousSibling=null;
nextSibling=null;
}
if (prevSib) prevSib.nextSibling=nextSib;
else this.firstChild=nextSib;
if (nextSib) nextSib.previousSibling=prevSib;
else this.lastChild=prevSib;
if (document.layers){
//// working on it
}
else{
ele.removeChild(eleChild);
}
rv=eleChild;
}
return rv;
} function _cbeContains(iLeft, iTop, iClipTop, iClipRight, iClipBottom, iClipLeft){if (arguments.length==2){iClipTop=iClipRight=iClipBottom=iClipLeft=0;} else if (arguments.length==3){iClipRight=iClipBottom=iClipLeft=iClipTop;} else if (arguments.length==4){iClipLeft=iClipRight; iClipBottom=iClipTop;} var thisX=this.pageX(), thisY=this.pageY(); return ( iLeft >=thisX + iClipLeft && iLeft <=thisX + this.width() - iClipRight && iTop >=thisY + iClipTop && iTop <=thisY + this.height() - iClipBottom );} function _cbeMoveTo(x_cr, y_mar, outside, xEndL){if (isFinite(x_cr)){this.left(x_cr); this.top(y_mar);}else{this.cardinalPosition(x_cr, y_mar, outside); this.left(this.x); this.top(this.y);}if (xEndL) cbeEval(xEndL, this);} function _cbeMoveBy(uDX, uDY, xEndL){if (uDX){this.left(this.left() + uDX);} if (uDY){this.top(this.top() + uDY);} if (xEndL){cbeEval(xEndL, this);}} function _domLeft(iX){if (arguments.length){this.ele.style.left=iX + "px";} else{iX=parseInt(this.ele.style.left); if (isNaN(iX)) iX=0;}return iX;} function _ieLeft(iX){if (arguments.length){this.ele.style.pixelLeft=iX;} else{iX=this.ele.style.pixelLeft;} return iX;} function _nnLeft(iX){if (arguments.length){this.ele.left=iX;} else{iX=this.ele.left;} return iX;} function _domTop(iY){if (arguments.length){this.ele.style.top=iY + "px";} else{iY=parseInt(this.ele.style.top); if (isNaN(iY)) iY=0;}return iY;} function _ieTop(iY){if (arguments.length){this.ele.style.pixelTop=iY;} else{iY=this.ele.style.pixelTop;} return iY;} function _nnTop(iY){if (arguments.length){this.ele.top=iY;} else{iY=this.ele.top;} return iY;} function _nnOffsetLeft(){var ol=this.ele.pageX - this.parentElement.pageX; if (isNaN(ol)){ol=this.ele.pageX;} return ol;} function _nnOffsetTop(){var ot=this.ele.pageY - this.parentElement.pageY; if (isNaN(ot)){ot=this.ele.pageY;} return ot;} function _ieOffsetLeft(){var x=this.ele.offsetLeft, parent=this.ele.offsetParent; while(parent && !parent.cbe){x +=parent.offsetLeft; parent=parent.offsetParent;}return x;} function _ieOffsetTop(){var y=this.ele.offsetTop, parent=this.ele.offsetParent; while(parent && !parent.cbe){y +=parent.offsetTop; parent=parent.offsetParent;}return y;} function _nnPageX(){return this.ele.pageX;} function _nnPageY(){return this.ele.pageY;} function _cbePageX(){var x=this.offsetLeft(), parent=this.parentNode; if (parent){while(parent.index > 1){x +=parent.offsetLeft(); parent=parent.parentNode;}} return x;} function _cbePageY(){var y=this.offsetTop(), parent=this.parentNode; if (parent){while(parent.index > 1){y +=parent.offsetTop(); parent=parent.parentNode;}} return y;} function _cbeSizeTo(uW, uH){this.width(uW); this.height(uH);} function _cbeSizeBy(iDW, iDH){this.width(this.width() + iDW); this.height(this.height() + iDH);} function _cbeResizeTo(uW, uH, xEndListener){this.sizeTo(uW, uH); this.clip("auto"); cbeEval(xEndListener, this);} function _cbeResizeBy(iDW, iDH, xEndListener){this.sizeBy(iDW, iDH); this.clip("auto"); cbeEval(xEndListener, this);} function _domWidth(uW){if (arguments.length){uW=Math.round(uW); _domSetWidth(this.ele, uW);}return this.ele.offsetWidth;} function _ieWidth(uW){if (arguments.length){uW=Math.round(uW); this.ele.style.pixelWidth=uW;}return this.ele.style.pixelWidth;} function _nnWidth(uW){if (arguments.length){this.w=Math.round(uW); this.ele.clip.right=this.w;}return this.w;} function _domHeight(uH){if (arguments.length){uH=Math.round(uH); _domSetHeight(this.ele, uH);}return this.ele.offsetHeight;} function _ieHeight(uH){if (arguments.length){uH=Math.round(uH); this.ele.style.pixelHeight=uH;}return this.ele.style.pixelHeight;} function _nnHeight(uH){if (arguments.length){this.h=Math.round(uH); this.ele.clip.bottom=this.h;}return this.h;} function _domSetWidth(ele,uW){
if (uW < 0) return;
var pl=0,pr=0,bl=0,br=0;
if (_def(document.defaultView) && _def(document.defaultView.getComputedStyle)){// gecko and standard
pl=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-left"));
pr=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-right"));
bl=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-left-width"));
br=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-right-width"));
}
else if (_def(ele.currentStyle, document.rupatMode)){
if (document.rupatMode=="CSS1Compat"){// ie6up in css1compat mode
pl=parseInt(ele.currentStyle.paddingLeft);
pr=parseInt(ele.currentStyle.paddingRight);
bl=parseInt(ele.currentStyle.borderLeftWidth);
br=parseInt(ele.currentStyle.borderRightWidth);
}
}
if (isNaN(pl)) pl=0; if (isNaN(pr)) pr=0; if (isNaN(bl)) bl=0; if (isNaN(br)) br=0;
var cssW=uW-(pl+pr+bl+br);
if (isNaN(cssW) || cssW < 0) return;
ele.style.width=cssW + "px";
} function _domSetHeight(ele,uH){
if (uH < 0) return;
var pt=0,pb=0,bt=0,bb=0;
if (_def(document.defaultView) && _def(document.defaultView.getComputedStyle)){
pt=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-top"));
pb=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-bottom"));
bt=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-top-width"));
bb=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-bottom-width"));
}
else if (_def(ele.currentStyle, document.rupatMode)){
if (document.rupatMode=="CSS1Compat"){
pt=parseInt(ele.currentStyle.paddingTop);
pb=parseInt(ele.currentStyle.paddingBottom);
bt=parseInt(ele.currentStyle.borderTopWidth);
bb=parseInt(ele.currentStyle.borderBottomWidth);
}
}
if (isNaN(pt)) pt=0; if (isNaN(pb)) pb=0; if (isNaN(bt)) bt=0; if (isNaN(bb)) bb=0;
var cssH=uH-(pt+pb+bt+bb);
if (isNaN(cssH) || cssH < 0) return;
ele.style.height=cssH + "px";
} function _cbeScrollLeft(){return this.ele.scrollLeft;} function _cbeScrollTop(){return this.ele.scrollTop;} function _cbeShow(){this.visibility(1);} function _cbeHide(){this.visibility(0);} function _domVisibility(vis){if (arguments.length){if (vis){this.ele.style.visibility="inherit";} else{this.ele.style.visibility="hidden";}}else return (this.ele.style.visibility=="visible" || this.ele.style.visibility=="inherit" || this.ele.style.visibility=="");} function _nnVisibility(vis){if (arguments.length){if (vis){this.ele.visibility="inherit";} else{this.ele.visibility="hide";}}else return (this.ele.visibility=="show" || this.ele.visibility=="inherit" || this.ele.visibility=="");} function _domZIndex(uZ){if (arguments.length){this.ele.style.zIndex=uZ;} else{uZ=parseInt(this.ele.style.zIndex); if (isNaN(uZ)) uZ=0;}return uZ;} function _nnZIndex(uZ){if (arguments.length) this.ele.zIndex=uZ; return this.ele.zIndex;} function _domBackground(sColor, sImage){if (arguments.length){if (!sColor){sColor="transparent";} this.ele.style.backgroundColor=sColor; if (arguments.length==2){this.ele.style.backgroundImage="url(" + sImage + ")";}}else return this.ele.style.backgroundColor;} function _nnBackground(sColor, sImage){if (arguments.length){if (sColor=="transparent"){sColor=null;} this.ele.bgColor=sColor; if (arguments.length==2){this.ele.background.src=sImage || null;}}else{var bg=this.ele.bgColor; if (window.cbeUtilJsLoaded){bg=cbeHexString(bg,6,"#");} return bg;}} function _domColor(newColor){if (arguments.length){this.ele.style.color=newColor;}else return this.ele.style.color;} function _domClip(iTop, iRight, iBottom, iLeft){if (arguments.length==4){var clipRect="rect(" + iTop + "px " + iRight + "px " + iBottom + "px " + iLeft + "px" + ")"; this.ele.style.clip=clipRect;}else{this.clip(0, this.ele.offsetWidth, this.ele.offsetHeight, 0);}} function _nnClip(iTop, iRight, iBottom, iLeft){if (arguments.length==4){this.ele.clip.top=iTop; this.ele.clip.right=iRight; this.ele.clip.bottom=iBottom; this.ele.clip.left=iLeft;}else{this.clip(0, this.width(), this.height(), 0);}} function _ieInnerHtml(sHtml){if (arguments.length){this.ele.innerHTML=sHtml;}else return this.ele.innerHTML;} function _nnInnerHtml(sHtml){if (arguments.length){if (sHtml==""){sHtml=" ";} this.ele.document.open(); this.ele.document.write(sHtml); this.ele.document.close();}else return "";} CrossBrowserElement.prototype.cardinalPosition=function(cp, margin, outside){
if (typeof(cp) !="string"){window.status="cardinalPosition() error: cp=" + cp + ", id=" + this.id; return;}
var x=this.left(), y=this.top(), w=this.width(), h=this.height();
var pw=this.parentNode.width(), ph=this.parentNode.height();
var sx=this.parentNode.scrollLeft(), sy=this.parentNode.scrollTop();
var right=sx + pw, bottom=sy + ph;
var cenLeft=sx + Math.floor((pw-w)/2), cenTop=sy + Math.floor((ph-h)/2);
if (!margin) margin=0;
else{
if (outside) margin=-margin;
sx +=margin; sy +=margin; right -=margin; bottom -=margin;
}
switch (cp.toLowerCase()){
case "n": x=cenLeft; if (outside) y=sy - h; else y=sy; break;
case "ne": if (outside){x=right; y=sy - h;}else{x=right - w; y=sy;}break;
case "e": y=cenTop; if (outside) x=right; else x=right - w; break;
case "se": if (outside){x=right; y=bottom;}else{x=right - w; y=bottom - h}break;
case "s": x=cenLeft; if (outside) y=sy - h; else y=bottom - h; break;
case "sw": if (outside){x=sx - w; y=bottom;}else{x=sx; y=bottom - h;}break;
case "w": y=cenTop; if (outside) x=sx - w; else x=sx; break;
case "nw": if (outside){x=sx - w; y=sy - h;}else{x=sx; y=sy;}break;
case "cen": case "center": x=cenLeft; y=cenTop; break;
case "cenh": x=cenLeft; break;
case "cenv": y=cenTop; break;
}
this.x=x; this.y=y;
} function cbeInnerWidth(){
var w=0;
if (is.opera5or6){w=window.innerWidth;}
else if (is.ie && document.documentElement && document.documentElement.clientWidth) w=document.documentElement.clientWidth; // ie6 compat mode
else if (document.body && document.body.clientWidth) w=document.body.clientWidth; // ie4up and gecko
else if (_def(window.innerWidth,window.innerHeight,document.height)){// nn4
w=window.innerWidth;
if (document.height > window.innerHeight) w -=16;
}
return w;
} function cbeInnerHeight(){
var h=0;
if (is.opera5or6){h=window.innerHeight;}
else if (is.ie && document.documentElement && document.documentElement.clientHeight) h=document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight) h=document.body.clientHeight;
else if (_def(window.innerWidth,window.innerHeight,document.width)){
h=window.innerHeight;
if (document.width > window.innerWidth) h -=16;
}
return h;
} function cbePageXOffset(){
var offset=0; if (_def(window.pageXOffset)) offset=window.pageXOffset; // gecko, nn4, opera else if (document.documentElement && document.documentElement.scrollLeft) offset=document.documentElement.scrollLeft; // ie6 compat mode else if (document.body && _def(document.body.scrollLeft)) offset=document.body.scrollLeft; // ie4up return offset;
} function cbePageYOffset(){
var offset=0; if (_def(window.pageYOffset)) offset=window.pageYOffset; else if (document.documentElement && document.documentElement.scrollTop) offset=document.documentElement.scrollTop; else if (document.body && _def(document.body.scrollTop)) offset=document.body.scrollTop; return offset;
} function cbeEval(exp, arg1, arg2, arg3, arg4, arg5, arg6){
if (typeof(exp)=="function") exp(arg1, arg2, arg3, arg4, arg5, arg6);
else if (typeof(exp)=="object" && typeof(arg1)=="function") {
exp._cbeEval_ = arg1;
exp._cbeEval_(arg2, arg3, arg4, arg5, arg6);
}
else if (typeof(exp)=="string") eval(exp);
} function ClientSnifferJr(){
this.ua=navigator.userAgent.toLowerCase();
this.major=parseInt(navigator.appVersion);
this.minor=parseFloat(navigator.appVersion);
if (document.addEventListener && document.removeEventListener) this.dom2events=true;
if (document.getElementById) this.dom1getbyid=true;
if (window.opera){
this.opera=true;
this.opera5=(this.ua.indexOf("opera 5") !=-1 || this.ua.indexOf("opera/5") !=-1);
this.opera6=(this.ua.indexOf("opera 6") !=-1 || this.ua.indexOf("opera/6") !=-1);
this.opera5or6=this.opera5 || this.opera6;
this.opera7=(this.ua.indexOf("opera 7") !=-1 || this.ua.indexOf("opera/7") !=-1);
return;
}
this.konq=this.ua.indexOf("konqueror") !=-1;
this.ie=this.ua.indexOf("msie") !=-1;
if (this.ie){
this.ie3=this.major < 4;
this.ie4=(this.major==4 && this.ua.indexOf("msie 5")==-1 && this.ua.indexOf("msie 6")==-1);
this.ie4up=this.major >=4;
this.ie5=(this.major==4 && this.ua.indexOf("msie 5.0") !=-1);
this.ie5up=!this.ie3 && !this.ie4;
this.ie6=(this.major==4 && this.ua.indexOf("msie 6.0") !=-1);
this.ie6up=(!this.ie3 && !this.ie4 && !this.ie5 && this.ua.indexOf("msie 5.5")==-1);
return;
}
this.hotjava=this.ua.indexOf("hotjava") !=-1;
this.webtv=this.ua.indexOf("webtv") !=-1;
this.aol=this.ua.indexOf("aol") !=-1;
if (this.hotjava || this.webtv || this.aol) return;
// Gecko, NN4, and NS6
this.gecko=this.ua.indexOf("gecko") !=-1;
this.nav=(this.ua.indexOf("mozilla") !=-1 && this.ua.indexOf("spoofer")==-1 && this.ua.indexOf("compatible")==-1);
if (this.nav){
this.nav4=this.major==4;
this.nav4up=this.major >=4;
this.nav5up=this.major >=5;
this.nav6=this.major==5;
this.nav6up=this.nav5up;
}
} window.is=new ClientSnifferJr(); // End cbe_core.js </script>
<script type="text/javascript" > /* cbe_event.js $Revision: 0.15 $
* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru * Copyright (c) 2002 Michael Foster (mike@cross-browser.ru) * Distributed under the terms of the GNU LGPL from gnu.org
- /
function cbeELReg(eventType, eventListener, eventCapture, listenerObject) { // event listener registration object constructor
this.type = eventType; this.listener = eventListener; this.capture = eventCapture; this.obj = listenerObject;
} function CrossBrowserEvent(e) { // Object constructor
// from DOM2 Interface Event
this.type = "";
this.target = null;
this.currentTarget = null;
this.eventPhase = 0;
this.bubbles = true;
this.cancelable = true;
this.timeStamp = 0;
this.AT_TARGET = 1; this.BUBBLING_PHASE = 2; this.CAPTURING_PHASE = 3; // eventPhase masks
// from DOM2 Interface MouseEvent : UIEvent
this.screenX = 0;
this.screenY = 0;
this.clientX = 0;
this.clientY = 0;
this.ctrlKey = false;
this.shiftKey = false;
this.altKey = false;
this.metaKey = false;
this.button = 3; // 3 == undefined
this.relatedTarget = null;
this.LEFT = 0; this.MIDDLE = 1; this.RIGHT = 2; // button masks
// from IE4 Object Model
this.keyCode = 0;
this.offsetX = 0;
this.offsetY = 0;
// from NN4 Object Model
this.pageX = 0;
this.pageY = 0;
// CBE
this.stopPropagationFlag = false;
this.preventDefaultFlag = false;
this.cbeTarget = window.cbe;
this.cbeCurrentTarget = window.cbe;
if (!e) return;
if (e.type) { this.type = e.type; }
if (e.target) { this.target = e.target; }
else if (e.srcElement) { this.target = e.srcElement; }
if (e.currentTarget) { this.currentTarget = e.currentTarget; }
else if (e.toElement) { this.currentTarget = e.toElement; }
if (e.eventPhase) { this.eventPhase = e.eventPhase; }
if (e.bubbles) { this.bubbles = e.bubbles; }
if (e.cancelable) { this.cancelable = e.cancelable; }
if (e.timeStamp) { this.timeStamp = e.timeStamp; }
if (e.screenX) { this.screenX = e.screenX; }
if (e.screenY) { this.screenY = e.screenY; }
if (is.opera5or6) { this.clientX = e.clientX - document.cbe.scrollLeft(); }
else if (e.clientX) { this.clientX = e.clientX; }
else if (e.pageX) { this.clientX = e.pageX - document.cbe.scrollLeft(); }
if (is.opera5or6) { this.clientY = e.clientY - document.cbe.scrollLeft(); }
else if (e.clientY) { this.clientY = e.clientY; }
else if (e.pageY) { this.clientY = e.pageY - document.cbe.scrollLeft(); }
if (is.opera5or6) { this.ctrlKey = e.type=="mousemove" ? e.shiftKey : e.ctrlKey; }
else if (_def(e.ctrlKey)) { this.ctrlKey = e.ctrlKey; }
else if (_def(e.modifiers) && window.Event) { this.ctrlKey = (e.modifiers & window.Event.CONTROL_MASK) != 0; }
if (is.opera5or6) { this.shiftKey = e.type=="mousemove" ? e.ctrlKey : e.shiftKey; }
else if (_def(e.shiftKey)) { this.shiftKey = e.shiftKey; }
else if (_def(e.modifiers) && window.Event) { this.shiftKey = (e.modifiers & Event.SHIFT_MASK) != 0; }
if (e.altKey) { this.altKey = e.altKey; }
else if (_def(e.modifiers) && window.Event) { this.altKey = (e.modifiers & Event.ALT_MASK) != 0; }
if (e.metaKey) { this.metaKey = e.metaKey; }
// button (?)
if (is.ie) {
if (this.type.indexOf("mouse") != -1) {
if (e.button == 1) this.button = this.LEFT;
else if (e.button == 4) this.button = this.MIDDLE;
else if (e.button == 2) this.button = this.RIGHT;
}
else if (this.type == "click") this.button = this.LEFT;
else this.button = 4; // non-mouse event
}
else if (_def(e.button)) { // standard
if (this.type.indexOf("mouse") != -1) { this.button = e.button; if (this.button < 0 || this.button > 2) {this.button = 3;} }
else if (this.type == "click") this.button = this.LEFT;
else this.button = 4; // non-mouse event
}
else if (_def(e.which)) {
if (document.layers) { // nn4
if (this.type.indexOf("mouse") != -1) { this.button = e.which - 1; if (this.button < 0 || this.button > 2) {this.button = 3;} }
else if (this.type == "click") this.button = this.LEFT;
else this.button = 4; // non-mouse event
}
else { // opera5or6
if ((e.type == "click" && e.which == 0) || ((e.type == "mousedown" || e.type == "mouseup") && e.which == 1)) {this.button = this.LEFT;}
}
}
if (e.relatedTarget) { this.relatedTarget = e.relatedTarget; }
else if (e.fromElement) { this.relatedTarget = e.fromElement; } // ? may need to be toElement in some cases ?
if (_def(e.which)) { this.keyCode = e.which; }
else if (_def(e.keyCode)) { this.keyCode = e.keyCode; }
var calcOfs = false;
if (_def(e.layerX,e.layerY)) { this.offsetX = e.layerX; this.offsetY = e.layerY; }
else calcOfs = true; // calculate it below
if (is.opera5or6) { this.pageX = e.clientX; this.pageY = e.clientY; }
else if (_def(e.pageX,e.pageY)) { this.pageX = e.pageX; this.pageY = e.pageY; }
else {
this.pageX = this.clientX + document.cbe.scrollLeft();
this.pageY = this.clientY + document.cbe.scrollTop();
}
// Find the CBE event target
if (document.layers) {
this.cbeTarget = cbeGetNodeFromPoint(this.pageX, this.pageY);
// NN4 note: mouseout works only if mouseover and mouseout are both added to the same object
if (this.type == "mouseover") cbeMOT = this.cbeTarget;
else if (this.type == "mouseout") this.cbeTarget = cbeMOT || document.cbe;
}
else { var target = this.target; while (!target.cbe) {target = cbeGetParentElement(target);} this.cbeTarget = target.cbe; }
this.cbeCurrentTarget = this.cbeTarget;
if (calcOfs) { this.offsetX = this.pageX - this.cbeTarget.pageX(); this.offsetY = this.pageY - this.cbeTarget.pageY(); }
} CrossBrowserElement.prototype.addEventListener = function(eventType, eventListener, useCapture, listenerObject) {
if (!useCapture) useCapture = false;
eventType = eventType.toLowerCase();
if (
(eventType.indexOf("mouse") != -1)
|| eventType == "click"
|| (eventType.indexOf("key") != -1)
/* || (eventType.indexOf("resize") != -1 && !is.nav4 && !is.opera)
|| (eventType.indexOf("scroll") != -1 && !is.nav && !is.opera) */
) {
var add=true;
for (var i=0; i < this.listeners.length; ++i) { if (eventType == this.listeners[i].type) {add=false; break;} }
if (add) {
cbeNativeAddEventListener(this.ele, eventType, cbePropagateEvent, false);
}
this.listeners[this.listeners.length] = new cbeELReg(eventType, eventListener, useCapture, listenerObject);
return;
}
switch(eventType) {
case "slidestart": this.onslidestart = eventListener; return;
case "slide": this.onslide = eventListener; return;
case "slideend": this.onslideend = eventListener; return;
case "dragstart": this.ondragstart = eventListener; return;
case "drag":
this.ondragCapture = useCapture;
this.ondrag = eventListener;
this.addEventListener("mousedown", cbeDragStartEvent, useCapture);
return;
case "dragend": this.ondragend = eventListener; return;
case "dragresize": if (window.cbeUtilJsLoaded) cbeAddDragResizeListener(this); return;
case "scroll":
if (is.nav || is.opera) {
window.cbeOldScrollTop = cbePageYOffset();
window.cbeOnScrollListener = eventListener;
cbeScrollEvent();
return;
}
break;
case "resize":
if (is.nav4 || is.opera) {
window.cbeOldWidth = cbeInnerWidth();
window.cbeOldHeight = cbeInnerHeight();
window.cbeOnResizeListener = eventListener;
cbeResizeEvent();
return;
}
break;
} // end switch
cbeNativeAddEventListener(this.ele, eventType, eventListener, useCapture);
} function cbeNativeAddEventListener(ele, eventType, eventListener, useCapture) {
if (!useCapture) useCapture = false;
eventType = eventType.toLowerCase();
var eh = "ele.on" + eventType + "=eventListener";
if (ele.addEventListener) {
ele.addEventListener(eventType, eventListener, useCapture);
}
else if (ele.captureEvents) {
// if (useCapture || (eventType.indexOf("mousemove")!=-1)) // ???
ele.captureEvents(eval("Event." + eventType.toUpperCase()));
eval(eh);
}
else { eval(eh); }
} function cbeNativeRemoveEventListener(ele, eventType, eventListener, useCapture) {
if (!useCapture) useCapture = false;
eventType = eventType.toLowerCase();
var eh = "ele.on" + eventType + "=null";
if (ele.removeEventListener) {
ele.removeEventListener(eventType, eventListener, useCapture);
}
else if (ele.releaseEvents) {
// if (useCapture || (eventType.indexOf("mousemove")!=-1)) // ???
ele.releaseEvents(eval("Event." + eventType.toUpperCase()));
eval(eh);
}
else { eval(eh); }
} CrossBrowserElement.prototype.removeEventListener = function(eventType, eventListener, useCapture) {
eventType = eventType.toLowerCase();
if (!useCapture) useCapture = false;
if ((eventType.indexOf("mouse") != -1) || eventType == "click" || (eventType.indexOf("key") != -1)) {
var i;
for (i = 0; i < this.listeners.length; ++i) {
if (this.listeners[i].type == eventType && this.listeners[i].listener == eventListener && this.listeners[i].capture == useCapture) {
if (this.listeners.splice) this.listeners.splice(i, 1);
else this.listeners[i].type = "*";
break;
}
}
var remove=true;
for (i = 0; i < this.listeners.length; ++i) { if (eventType == this.listeners[i].type) { remove = false; break; } }
if (remove) cbeNativeRemoveEventListener(this.ele, eventType, cbePropagateEvent, false);
return;
}
switch(eventType) {
case "slidestart": this.onslidestart = null; return;
case "slide": this.onslide = null; return;
case "slideend": this.onslideend = null; return;
case "dragstart": this.ondragstart = null; return;
case "drag":
this.removeEventListener("mousedown", cbeDragStartEvent, this.ondragCapture);
this.ondrag = null;
return;
case "dragend": this.ondragend = null; return;
case "dragresize": if (window.cbeUtilJsLoaded) cbeRemoveDragResizeListener(this); return;
case "scroll":
if (is.nav || is.opera) {
window.cbeOnScrollListener = null;
return;
}
break;
case "resize":
if (is.nav4 || is.opera) {
window.cbeOnResizeListener = null;
return;
}
break;
} // end switch
cbeNativeRemoveEventListener(this.ele, eventType, eventListener, useCapture);
} CrossBrowserEvent.prototype.stopPropagation = function() { this.stopPropagationFlag = true; } CrossBrowserEvent.prototype.preventDefault = function() { this.preventDefaultFlag = true; } CrossBrowserElement.prototype.dispatchEvent= function(e) {
var dispatch;
e.cbeCurrentTarget = this;
for (var i=0; i < this.listeners.length; ++i) {
dispatch = false;
if (e.type == this.listeners[i].type) {
if (e.eventPhase == e.CAPTURING_PHASE) {
if (this.listeners[i].capture) dispatch = true;
}
else if (!this.listeners[i].capture) dispatch = true;
}
if (dispatch) {
if (this.listeners[i].obj) cbeEval(this.listeners[i].obj, this.listeners[i].listener, e);
else cbeEval(this.listeners[i].listener, e);
}
}
} function cbePropagateEvent(evt) {
var i=0, e=null, a=new Array();
if (evt) e = new CrossBrowserEvent(evt);
else if (window.event) e = new CrossBrowserEvent(window.event);
else return;
// Create an array of EventTargets, following the parent chain up (does not include cbeTarget)
var node = e.cbeTarget.parentNode;
while(node) {
a[i++] = node;
node = node.parentNode;
}
// The capturing phase
e.eventPhase = e.CAPTURING_PHASE;
for (i = a.length-1; i>=0; --i) {
a[i].dispatchEvent(e);
if (e.stopPropagationFlag) break;
}
// The at-target phase
if (!e.stopPropagationFlag) {
e.eventPhase = e.AT_TARGET;
e.cbeTarget.dispatchEvent(e);
// The bubbling phase
if (!e.stopPropagationFlag && e.bubbles) {
e.eventPhase = e.BUBBLING_PHASE;
for (i = 0; i < a.length; ++i) {
a[i].dispatchEvent(e);
if (e.stopPropagationFlag) break;
}
}
}
// Don"t allow native bubbling
if (is.ie) window.event.cancelBubble = true;
else if (is.gecko) evt.stopPropagation();
// Allow listener to cancel default action
if (e.cancelable && e.preventDefaultFlag) {
if (is.gecko || is.opera) evt.preventDefault();
return false;
}
else return true;
} function cbeGetNodeFromPoint(x, y) {
var hn /* highNode */, hz=0 /* highZ */, cn /* currentNode */, cz /* currentZ */;
hn = document.cbe;
while (hn.firstChild && hz >= 0) {
hz = -1;
cn = hn.firstChild;
while (cn) {
if (cn.contains(x, y)) {
cz = cn.zIndex();
if (cz >= hz) {
hn = cn;
hz = cz;
}
}
cn = cn.nextSibling;
}
}
return hn;
} function cbeScrollEvent() {
if (!window.cbeOnScrollListener) { return; }
if (cbePageYOffset() != window.cbeOldScrollTop) {
cbeEval(window.cbeOnScrollListener);
window.cbeOldScrollTop = cbePageYOffset();
}
setTimeout("cbeScrollEvent()", 250);
} function cbeResizeEvent() {
if (!window.cbeOnResizeListener) { return; }
var dw = window.cbeOldWidth - cbeInnerWidth();
var dh = window.cbeOldHeight - cbeInnerHeight();
if (dw != 0 || dh != 0) {
if (window.cbeOnResizeListener) cbeEval(window.cbeOnResizeListener, dw, dh);
window.cbeOldWidth = cbeInnerWidth();
window.cbeOldHeight = cbeInnerHeight();
}
setTimeout("cbeResizeEvent()", 250);
} function cbeDefaultResizeListener() {
if (is.opera) location.replace(location.href); else history.go(0);
} var cbeDragObj, cbeDragTarget, cbeDragPhase; function cbeDragStartEvent(e) {
if (is.opera) { var tn = e.target.tagName.toLowerCase(); if (tn == "a") return; }
else if (is.nav4) { if (e.target.href) return; }
cbeDragObj = e.cbeCurrentTarget;
cbeDragTarget = e.cbeTarget;
if (cbeDragTarget.id == cbeDragObj.id) cbeDragPhase = e.AT_TARGET;
else if (cbeDragObj.ondragCapture) cbeDragPhase = e.CAPTURING_PHASE;
else cbeDragPhase = e.BUBBLING_PHASE;
if (cbeDragObj) {
if (cbeDragObj.ondragstart) { e.type = "dragstart"; cbeEval(cbeDragObj.ondragstart, e); e.type = "mousedown"; }
cbeDragObj.x = e.pageX;
cbeDragObj.y = e.pageY;
document.cbe.addEventListener("mousemove", cbeDragEvent, cbeDragObj.ondragCapture);
document.cbe.addEventListener("mouseup", cbeDragEndEvent, false);
}
e.stopPropagation();
e.preventDefault();
} function cbeDragEndEvent(e) {
document.cbe.removeEventListener("mousemove", cbeDragEvent, cbeDragObj.ondragCapture);
document.cbe.removeEventListener("mouseup", cbeDragEndEvent, false);
if (cbeDragObj.ondragend) {
e.type = "dragend";
e.cbeCurrentTarget = cbeDragObj;
e.cbeTarget = cbeDragTarget;
cbeEval(cbeDragObj.ondragend, e);
e.type = "mouseup";
}
//e.stopPropagation();
e.preventDefault();
} function cbeDragEvent(e) {
if (cbeDragObj) {
e.dx = e.pageX - cbeDragObj.x;
e.dy = e.pageY - cbeDragObj.y;
cbeDragObj.x = e.pageX;
cbeDragObj.y = e.pageY;
e.type = "drag";
e.cbeTarget = cbeDragTarget;
e.cbeCurrentTarget = cbeDragObj;
e.eventPhase = cbeDragPhase;
if (cbeDragObj.ondrag) cbeEval(cbeDragObj.ondrag, e);
else cbeDragObj.moveBy(e.dx,e.dy);
e.type = "mousemove";
}
//e.stopPropagation();
e.preventDefault();
} var cbeEventPhase = new Array("", "AT_TARGET", "BUBBLING_PHASE", "CAPTURING_PHASE"); var cbeButton = new Array("LEFT", "MIDDLE", "RIGHT", "undefined", "non-mouse event"); CrossBrowserElement.prototype.ondragstart = null; CrossBrowserElement.prototype.ondrag = null; CrossBrowserElement.prototype.ondragend = null; var cbeEventJsLoaded = true; // End cbe_event.js </script>
<script type="text/javascript" > /* cbe_slide.js $Revision: 0.12 $
* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru * Copyright (c) 2002 Michael Foster (mike@cross-browser.ru) * Distributed under the terms of the GNU LGPL from gnu.org
- /
CrossBrowserElement.prototype.slideBy = function(dX, dY, totalTime, endListener) {
var targetX, targetY; dX = parseInt(dX); dY = parseInt(dY); targetX = this.left() + dX; targetY = this.top() + dY; this.slideTo(targetX, targetY, totalTime, endListener)
} CrossBrowserElement.prototype.slideTo = function(x, y, totalTime, endListener) {
if (this.onslidestart) cbeEval(this.onslidestart, this);
this.xTarget = parseInt(x); this.yTarget = parseInt(y);
this.slideTime = parseInt(totalTime);
if (isNaN(this.xTarget)) {
var outside=false;
if (isNaN(this.yTarget)) { y = 0; outside = true; }
this.cardinalPosition(x, y, outside); this.xTarget = this.x; this.yTarget = this.y;
}
if (endListener && window.cbeEventJsLoaded) { this.autoRemoveListener = true; this.addEventListener("slideend", endListener); }
this.stop = false;
this.yA = this.yTarget - this.top(); this.xA = this.xTarget - this.left(); // A = distance
this.B = Math.PI / (2 * this.slideTime); // B = period
this.yD = this.top(); this.xD = this.left(); // D = initial position
if (this.slideRate == cbeSlideRateLinear) { this.B = 1/this.slideTime; }
else if (this.slideRate == cbeSlideRateCosine) {
this.yA = -this.yA; this.xA = -this.xA; this.yD = this.yTarget; this.xD = this.xTarget;
}
var d = new Date(); this.C = d.getTime();
if (!this.moving) this.slide();
} CrossBrowserElement.prototype.slide = function() {
var now, s, t, newY, newX;
now = new Date();
t = now.getTime() - this.C;
if (this.stop) { this.moving = false; }
else if (t < this.slideTime) {
setTimeout("window.cbeAll["+this.index+"].slide()", this.timeout);
if (this.slideRate == cbeSlideRateLinear) s = this.B * t;
else if (this.slideRate == cbeSlideRateSine) s = Math.sin(this.B * t);
else s = Math.cos(this.B * t); // this.slideRate == cbeSlideRateCosine
newX = Math.round(this.xA * s + this.xD);
newY = Math.round(this.yA * s + this.yD);
if (this.onslide) cbeEval(this.onslide, this, newX, newY, t);
this.moveTo(newX, newY);
this.moving = true;
}
else {
this.moveTo(this.xTarget, this.yTarget);
this.moving = false;
if (this.onslideend) {
var tmp = this.onslideend;
if (this.autoRemoveListener && window.cbeEventJsLoaded) {
this.autoRemoveListener = false;
this.removeEventListener("slideend");
}
cbeEval(tmp, this);
}
}
} CrossBrowserElement.prototype.ellipse = function(xRadius, yRadius, radiusInc, totalTime, startAngle, stopAngle, endListener) {
if (this.onslidestart) cbeEval(this.onslidestart, this);
this.stop = false;
this.xA = parseInt(xRadius);
this.yA = parseInt(yRadius);
this.radiusInc = parseInt(radiusInc);
this.slideTime = parseInt(totalTime);
startAngle = cbeRadians(parseFloat(startAngle));
stopAngle = cbeRadians(parseFloat(stopAngle));
if (endListener && window.cbeEventJsLoaded) {
this.autoRemoveListener = true;
this.addEventListener("slideend", endListener);
}
var startTime = (startAngle * this.slideTime) / (stopAngle - startAngle);
this.stopTime = this.slideTime + startTime;
this.B = (stopAngle - startAngle) / this.slideTime;
this.xD = this.left() - Math.round(this.xA * Math.cos(this.B * startTime)); // center point
this.yD = this.top() - Math.round(this.yA * Math.sin(this.B * startTime));
this.xTarget = Math.round(this.xA * Math.cos(this.B * this.stopTime) + this.xD); // end point
this.yTarget = Math.round(this.yA * Math.sin(this.B * this.stopTime) + this.yD);
var d = new Date();
this.C = d.getTime() - startTime;
if (!this.moving) this.ellipse1();
} CrossBrowserElement.prototype.ellipse1 = function() {
var now, t, newY, newX;
now = new Date();
t = now.getTime() - this.C;
if (this.stop) { this.moving = false; }
else if (t < this.stopTime) {
setTimeout("window.cbeAll["+this.index+"].ellipse1()", this.timeout);
if (this.radiusInc) {
this.xA += this.radiusInc;
this.yA += this.radiusInc;
}
newX = Math.round(this.xA * Math.cos(this.B * t) + this.xD);
newY = Math.round(this.yA * Math.sin(this.B * t) + this.yD);
if (this.onslide) cbeEval(this.onslide, this, newX, newY, t);
this.moveTo(newX, newY);
this.moving = true;
}
else {
if (this.radiusInc) {
this.xTarget = Math.round(this.xA * Math.cos(this.B * this.slideTime) + this.xD);
this.yTarget = Math.round(this.yA * Math.sin(this.B * this.slideTime) + this.yD);
}
this.moveTo(this.xTarget, this.yTarget);
this.moving = false;
if (this.onslideend) {
var tmp = this.onslideend;
if (this.autoRemoveListener && window.cbeEventJsLoaded) {
this.autoRemoveListener = false;
this.removeEventListener("slideend");
}
cbeEval(tmp, this);
}
}
} CrossBrowserElement.prototype.stopSlide = function() { this.stop = true; } CrossBrowserElement.prototype.startSequence = function(uIndex) {
if (!this.moving) {
if (!uIndex) this.seqIndex = 0;
else this.seqIndex = uIndex;
this.addEventListener("slideEnd", cbeSlideSequence);
cbeSlideSequence(this);
}
} CrossBrowserElement.prototype.stopSequence = function() {
this.stop=true;
this.removeEventListener("slideEnd", cbeSlideSequence);
} function cbeSlideSequence(cbe) {
var
pw = cbe.parentNode.width(),
ph = cbe.parentNode.height(),
w = cbe.width(),
h = cbe.height();
if (cbe.seqIndex >= cbe.sequence.length) cbe.seqIndex = 0;
eval("cbe."+cbe.sequence[cbe.seqIndex++]);
} var cbeSlideRateLinear=0, cbeSlideRateSine=1, cbeSlideRateCosine=2; CrossBrowserElement.prototype.slideRate = cbeSlideRateSine; CrossBrowserElement.prototype.seqIndex = 0; CrossBrowserElement.prototype.radiusInc = 0; CrossBrowserElement.prototype.t = 0; CrossBrowserElement.prototype.xTarget = 0; CrossBrowserElement.prototype.yTarget = 0; CrossBrowserElement.prototype.slideTime = 1000; CrossBrowserElement.prototype.xA = 0; CrossBrowserElement.prototype.yA = 0; CrossBrowserElement.prototype.xD = 0; CrossBrowserElement.prototype.yD = 0; CrossBrowserElement.prototype.B = 0; CrossBrowserElement.prototype.C = 0; CrossBrowserElement.prototype.moving = false; CrossBrowserElement.prototype.stop = true; CrossBrowserElement.prototype.timeout = 35; CrossBrowserElement.prototype.autoRemoveListener = false; CrossBrowserElement.prototype.onslidestart = null; CrossBrowserElement.prototype.onslide = null; CrossBrowserElement.prototype.onslideend = null; var cbeSlideJsLoaded = true; // End cbe_slide.js </script>
<script type="text/javascript" > /* cbe_util.js $Revision: 0.14 $
* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru * Copyright (c) 2002 Michael Foster (mike@cross-browser.ru) * Distributed under the terms of the GNU LGPL from gnu.org
- /
// visit function returns: 0 == stop, 1 == continue, 2 == skip subtree function cbeTraverseTree(order, startNode, visitFunction, data) {
cbeTraversePreOrder(startNode, 0, 0, visitFunction, data);
} function cbeTraversePreOrder(node, level, branch, vFn, data) {
var ret = vFn(node,level,branch,data);
if (!ret) return 0;
if (ret == 1 && node.firstChild) {
var child = node.firstChild;
while (child) {
if (!level) ++branch;
if (!cbeTraversePreOrder(child,level+1,branch,vFn,data)) return 1;
child = child.nextSibling;
}
}
return 1;
} var cbeImageCount=0; var cbeImageObj = new Array(); var cbeImageName = new Array(); function cbeNewImage(imgName, imgUrl, imgWidth, imgHeight) {
var imgObj; if (arguments.length == 4) imgObj = new Image(imgWidth,imgHeight); else imgObj = new Image(); imgObj.src = imgUrl; imgObj.id = imgObj.name = imgName; cbeImageObj[cbeImageCount] = imgObj; cbeImageName[cbeImageCount++] = imgName; return imgObj;
} function cbeSetImage(tagImg, preloadedImg) {
var t, p; if (typeof(tagImg)=="string") t = cbeGetImageByName(tagImg); else t = tagImg; if (typeof(preloadedImg)=="string") p = cbeGetImageByName(preloadedImg); else p = preloadedImg; t.src = p.src;
} function cbeGetImageByName(imgName) {
var i, j;
if (document.images[imgName]) return document.images[imgName];
if (is.nav4) {
for (i = 0; i < cbeAll.length; i++) {
if (cbeAll[i].ele.document) {
for (j = 0; j < cbeAll[i].ele.document.images.length; j++) {
if (imgName == cbeAll[i].ele.document.images[j].name) return cbeAll[i].ele.document.images[j];
}
}
}
}
for (i = 0; i < cbeImageName.length; i++) {
if (cbeImageName[i] == imgName) return cbeImageObj[i];
}
return null;
} function cbeGetFormByName(frmName) {
var i, j;
if (document.forms[frmName]) return document.forms[frmName];
if (is.nav4) {
for (i = 0; i < cbeAll.length; i++) {
if (cbeAll[i].ele.document) {
for (j = 0; j < cbeAll[i].ele.document.forms.length; j++) {
if (frmName == cbeAll[i].ele.document.forms[j].name) return cbeAll[i].ele.document.forms[j];
}
}
}
}
return null;
} // cookie implementations based on code from Netscape Javascript Guide function cbeSetCookie(name, value, expire, path) {
document.cookie = name + "=" + escape(value) + ((!expire) ? "" : ("; expires=" + expire.toGMTString())) + "; path=/";
} function cbeGetCookie(name) {
var value=null, search=name+"=";
if (document.cookie.length > 0) {
var offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
var end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
value = unescape(document.cookie.substring(offset, end));
}
}
return value;
} function cbeGetURLArguments() {
var idx = location.href.indexOf("?");
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split("&");
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split("=");
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
} function cbePad(str, finalLen, padChar, left) {
if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; }
else { for (var i=str.length; i<finalLen; ++i) str += padChar; }
return str;
} function cbeHexString(n, digits, prefix) {
var p = "", n = Math.ceil(n);
if (prefix) p = prefix;
n = n.toString(16);
for (var i=0; i < digits - n.length; ++i) {
p += "0";
}
return p + n;
} function cbeRadians(deg) { return deg * (Math.PI / 180); } function cbeDegrees(rad) { return rad * (180 / Math.PI); } function cbeAddDragResizeListener(cbe) {
cbe.addEventListener("dragStart", cbeDragResizeStartListener);
cbe.addEventListener("drag", cbeDragResizeListener);
} function cbeRemoveDragResizeListener(cbe) {
cbe.removeEventListener("dragStart", cbeDragResizeStartListener);
cbe.removeEventListener("drag", cbeDragResizeListener);
} function cbeDragResizeStartListener(e) {
if (e.offsetX > (e.cbeCurrentTarget.width() - 20) && e.offsetY > (e.cbeCurrentTarget.height() - 20)) {
e.cbeCurrentTarget.isResizing = true;
}
else e.cbeCurrentTarget.isResizing = false;
} function cbeDragResizeListener(e) {
if (e.cbeCurrentTarget.isResizing) e.cbeCurrentTarget.resizeBy(e.dx, e.dy); else e.cbeCurrentTarget.moveBy(e.dx, e.dy);
} var cbeUtilJsLoaded = true; // End cbe_util.js </script>
<script type="text/javascript" > var now = new Date(); var currYear,currMonth; var i,j,currDateObj,firstDay,daysInMonth,sevenDayRows; var DHTMLC, prev, curr, next, moniker; var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); var days = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); /* 1. Is Cookie set?
YES: Retrieve and set currMonth & currYear to the values stored in Cookie NO: Set currMonth & currYear to now and set Cookie
2. CBE will automatically call windowOnLoad() which, in turn, will...
a. Create the CrossBrowserElement objects. b. Call Calendar() which will... i. Calculate the calendar info: firstDay, daysInMonth, sevenDayRows. ii. Determine nextMonth, nextYear, prevMonth, & prevYear. iii. Call cbeTraverseTree() with a reference to drawCalendar() which will... * Populate the innerHTML for each object in the CBE Object Tree.
- /
// For simplicity"s sake: Include the equal sign in the cookie"s name var cookieName = "ISO8601="; if (document.cookie.indexOf(cookieName) != -1) {
// Retrieve the stored date to set the global variables (used to generate the calender)
start = document.cookie.indexOf(cookieName) + cookieName.length;
end = document.cookie.indexOf(";",start);
if (end == -1) end = document.cookie.length;
ISO8601 = document.cookie.substring(start,end);
currDate = ISO8601.split("-");
currYear = currDate[0];
currMonth = currDate[1];
} else {
// Use the present date to set the global variables (used to generate the calender) currYear = now.getYear(); currMonth = now.getMonth(); // Some browsers may not be Y2K compliant... if (currYear < 1900) currYear += 1900;
} function Calendar(Month,Year) {
currDateObj = new Date(Year,Month,1);
// Update the global variables (used to generate the calender)
currMonth = Month;
currYear = Year;
// Perform the basic calculations necessary to generate a calendar
firstDay = currDateObj.getDay(); // The day-of-the-week of the first day of the month;
daysInMonth = 32 - new Date(Year,Month,32).getDate();
sevenDayRows = Math.ceil((firstDay + daysInMonth) / 7);
switch (Month) {
case 0:
nextMonth = Month + 1;
nextYear = Year;
prevMonth = 11;
prevYear = Year - 1;
break;
case 11:
nextMonth = 0;
nextYear = Year + 1;
prevMonth = Month - 1;
prevYear = Year;
break;
default:
nextMonth = Month + 1;
nextYear = Year;
prevMonth = Month - 1;
prevYear = Year;
break;
}
i = 0; j = 1;
cbeTraverseTree("preorder",DHTMLC,drawCalendar);
DHTMLC.resizeTo(230, sevenDayRows * 20 + 60);
moniker.top(sevenDayRows * 20 + 50);
prev.innerHtml("<A HREF="javascript:Calendar(prevMonth,prevYear);">" + months[prevMonth].substr(0,3) + "</A>");
curr.innerHtml(months[Month] + ", " + Year);
next.innerHtml("<A HREF="javascript:Calendar(nextMonth,nextYear);">" + months[nextMonth].substr(0,3) + "</A>");
} function drawCalendar(node,level,branch) {
var HREF;
if (level == 2 && branch > 2) {
if (i >= firstDay && j <= daysInMonth) {
HREF = "javascript:void(document.forms[0].elements[0].value=\"" + (currMonth + 1) + "/" + j + "/" + currYear + "\")";
node.innerHtml("<A HREF="" + HREF + "">" + j++ + "</A>");
node.innerHtml();node.show();
} else {
node.hide();
}
i++;
}
return true;
} var clicked, displaying; var buttons, button1, button2, button3, button4, button5; var page, wii, htui, will, htgi, wywn; var cover; function createSlides(node,level,branch) {
if (level == 1) {
with(node) {
node.moveTo(0,450);
node.sizeTo(550,420);
}
}
return true;
} function resetButtonColors(node,level,branch) {
if (node.id == "badge1") return true;
if (level == 1) node.background("#ccffcc");
return true;
} function mouseOverListener(e) {
if (e.cbeCurrentTarget.id == clicked) return true;
e.cbeCurrentTarget.background("#99ff99");
} function mouseOutListener(e) {
if (e.cbeCurrentTarget.id == clicked) return true;
e.cbeCurrentTarget.background("#ccffcc");
} function onClickListener(e) {
cbeTraverseTree("preorder",buttons,resetButtonColors);
e.cbeCurrentTarget.background("#ffffff");
clicked = e.cbeCurrentTarget.id;
if (displaying) eval(displaying).slideTo(0,450,1500);
switch(e.cbeCurrentTarget.id) {
case "button1": displaying = "wii"; wii.slideTo(0,0,1500); break;
case "button2": displaying = "will"; will.slideTo(0,0,1500); break;
case "button3": displaying = "wywn"; wywn.slideTo(0,0,1500); break;
case "button4": displaying = "htgi"; htgi.slideTo(0,0,1500); break;
case "button5": displaying = "htui"; htui.slideTo(0,0,1500); break;
}
} function windowOnload() {
page = cbeGetElementById("page").cbe;
page.sizeTo(570,450);
page.clip("auto");
if (is.ie4up) page.left(171);
cbeTraverseTree("preorder",page,createSlides);
// These references will be accessed by eval"ing their names in onClickListener()
wii = cbeGetElementById("wii").cbe;
htui = cbeGetElementById("htui").cbe;
will = cbeGetElementById("will").cbe;
htgi = cbeGetElementById("htgi").cbe;
wywn = cbeGetElementById("wywn").cbe;
buttons = cbeGetElementById("buttons").cbe;
button1 = cbeGetElementById("button1").cbe;
button1.addEventListener("mouseOver",mouseOverListener);
button1.addEventListener("mouseOut",mouseOutListener);
button1.addEventListener("click",onClickListener);
button2 = cbeGetElementById("button2").cbe;
button2.addEventListener("mouseOver",mouseOverListener);
button2.addEventListener("mouseOut",mouseOutListener);
button2.addEventListener("click",onClickListener);
button3 = cbeGetElementById("button3").cbe;
button3.addEventListener("mouseOver",mouseOverListener);
button3.addEventListener("mouseOut",mouseOutListener);
button3.addEventListener("click",onClickListener);
button4 = cbeGetElementById("button4").cbe;
button4.addEventListener("mouseOver",mouseOverListener);
button4.addEventListener("mouseOut",mouseOutListener);
button4.addEventListener("click",onClickListener);
button5 = cbeGetElementById("button5").cbe;
button5.addEventListener("mouseOver",mouseOverListener);
button5.addEventListener("mouseOut",mouseOutListener);
button5.addEventListener("click",onClickListener);
cover = cbeGetElementById("cover").cbe;
cover.sizeTo(570,450);
cover.hide();
DHTMLC = cbeGetElementById("DHTMLC").cbe;
prev = cbeGetElementById("prev").cbe;
curr = cbeGetElementById("curr").cbe;
next = cbeGetElementById("next").cbe;
moniker = cbeGetElementById("moniker").cbe;
Calendar(currMonth,currYear);
DHTMLC.clip("auto");
DHTMLC.show();
}
</script> </head> <body>
First Item
Content
Content
- 1
- 2
<form>You selected...<input size="10" type="text"></form>
2
LIne
- C -
- w s.
- days - T
3
.
- The DHTML Calendar files:
- ,
- d
- .
- d
- cbe_core.js, and
- cbe_util.js.
H
e
- via HTTP, or
- via </a>.
T
H
A
- R
- R
- U
- E
- I
- I
- n.
</body></html>
</source>
Calendar: Multiple day selection
<source lang="html4strict">
<html> <head>
<title>Sample for the multiple dates feature</title> <style rel="stylesheet" type="text/css" media="all" title="win2k-cold-1">
/* 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 tbody .day.othermonth {
font-size: 80%; color: #aaa;
} .calendar tbody .day.othermonth.oweekend {
color: #faa;
} .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) */ .calendar .rubo {
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: 90%; padding: 1px; z-index: 100;
} .calendar .rubo .label, .calendar .rubo .label-IEfix {
text-align: center; padding: 1px;
} .calendar .rubo .label-IEfix {
width: 4em;
} .calendar .rubo .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;
} .calendar .rubo .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;
}
</style> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo
* ----------------------------------------------------------- * * The DHTML Calendar, version 1.0 "It is happening again" * * Details and latest version at: * www.dynarch.ru/projects/calendar * * This script is developed by Dynarch.ru. Visit us at www.dynarch.ru. * * 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.51 2005/03/07 16:44:31 mishoo Exp $ /** The Calendar object constructor. */ Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
this.getDateStatus = null;
this.getDateToolTip = null;
this.getDateText = 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.firstDayOfWeek = typeof firstDayOfWeek == "number" ? firstDayOfWeek : Calendar._FD; // 0 for Sunday, 1 for Monday, etc.
this.showsOtherMonths = false;
this.dateStr = dateStr;
this.ar_days = null;
this.showsTime = false;
this.time24 = true;
this.yearStep = 2;
this.hiliteToday = true;
this.multiple = null;
// HTML elements
this.table = null;
this.element = null;
this.tbody = null;
this.firstdayname = null;
// Combo boxes
this.monthsCombo = null;
this.yearsCombo = null;
this.hilitedMonth = null;
this.activeMonth = null;
this.hilitedYear = null;
this.activeYear = null;
// Information
this.dateClicked = false;
// one-time initializations
if (typeof Calendar._SDN == "undefined") {
// table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array();
for (var i = 8; i > 0;) {
ar[--i] = Calendar._DN[i].substr(0, Calendar._SDN_len);
}
Calendar._SDN = ar;
// table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array();
for (var i = 12; i > 0;) {
ar[--i] = Calendar._MN[i].substr(0, Calendar._SMN_len);
}
Calendar._SMN = ar;
}
}; // ** constants /// "static", needed for event handlers. Calendar._C = null; /// detect a special case of "web browser" Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) );
Calendar.is_ie5 = ( Calendar.is_ie && /msie 5\.0/i.test(navigator.userAgent) ); /// detect Opera browser Calendar.is_opera = /opera/i.test(navigator.userAgent); /// detect KHTML-based browsers Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent); // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate // library, at some point. Calendar.getAbsolutePos = function(el) {
var 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 = this.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;
}; // FIXME: the following 2 functions totally suck, are useless and should be replaced immediately. Calendar.getElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.currentTarget; while (f.nodeType != 1 || /^div$/i.test(f.tagName)) f = f.parentNode; return f;
}; Calendar.getTargetElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.target; while (f.nodeType != 1) f = f.parentNode; return f;
}; 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) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
}; Calendar.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
}; Calendar.createElement = function(type, parent) {
var el = null;
if (document.createElementNS) {
// use the XHTML namespace; IE won"t normally get here unless
// _they_ "fix" the DOM2 implementation.
el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
} else {
el = document.createElement(type);
}
if (typeof parent != "undefined") {
parent.appendChild(el);
}
return el;
}; // END: UTILITY FUNCTIONS // BEGIN: CALENDAR STATIC FUNCTIONS /** Internal -- adds a set of events to make some element behave like a button. */ 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 {
var mcw = mc.offsetWidth;
if (typeof mcw == "undefined")
// Konqueror brain-dead techniques
mcw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - mcw) + "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.innerHTML = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else {
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? cal.yearStep : -cal.yearStep;
}
if (show) {
var s = yc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else {
var ycw = yc.offsetWidth;
if (typeof ycw == "undefined")
// Konqueror brain-dead techniques
ycw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - ycw) + "px";
}
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
}
}; // event handlers 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 < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = 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, "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.innerHTML;
addEvent(document, "mousemove", tableMouseOver);
} else
addEvent(document, Calendar.is_ie5 ? "mousemove" : "mouseover", tableMouseOver);
addClass(el, "hilite active");
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) == "_") {
el.ttip = el.caldate.print(el.calendar.ttDateFormat) + el.ttip.substr(1);
}
el.calendar.tooltips.innerHTML = 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");
if (el.calendar)
el.calendar.tooltips.innerHTML = _TT["SEL_DATE"];
return stopEvent(ev);
}
}; /**
* A generic "click" handler :) handles all types of buttons defined in this * calendar. */
Calendar.cellClick = function(el, ev) {
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == "undefined") {
if (cal.currentDateEl) {
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = (cal.currentDateEl == el);
if (!closing) {
cal.currentDateEl = el;
}
}
cal.date.setDateOnly(el.caldate);
date = cal.date;
var other_month = !(cal.dateClicked = !el.otherMonth);
if (!other_month && !cal.currentDateEl)
cal._toggleMultipleDate(new Date(date));
else
newdate = !el.disabled;
// a date was clicked
if (other_month)
cal._init(cal.firstDayOfWeek, date);
} else {
if (el.navtype == 200) {
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = new Date(cal.date);
if (el.navtype == 0)
date.setDateOnly(new Date()); // TODAY
// unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when
// in single-click mode.
// cal.dateClicked = (el.navtype == 0);
cal.dateClicked = 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 {
// FIXME: this should be removed as soon as lang files get updated!
text = "Help and about box text is not translated into this language.\n" +
"If you know this language and you feel generous please update\n" +
"the corresponding file in \"lang\" subdir to match calendar-en.js\n" +
"and send it back to <mihai_bazon@yahoo.ru> to get it into the distribution ;-)\n\n" +
"Thank you!\n" +
"http://dynarch.ru/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.setFirstDayOfWeek(el.fdow);
return;
case 50:
var range = el._range;
var current = el.innerHTML;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
if (ev && ev.shiftKey) {
if (--i < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = newval;
cal.onUpdateTime();
return;
case 0:
// TODAY will bring us here
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;
} else if (el.navtype == 0)
newdate = closing = true;
}
if (newdate) {
ev && cal.callHandler();
}
if (closing) {
Calendar.removeClass(el, "hilite");
ev && cal.callCloseHandler();
}
}; // END: CALENDAR STATIC FUNCTIONS // BEGIN: CALENDAR OBJECT FUNCTIONS /**
* This function creates the calendar inside the given parent. If _par is * null than it creates a popup calendar inside the BODY element. If _par is * an element, be it BODY, then it creates a non-popup calendar (still * hidden). Some properties need to be set before calling this function. */
Calendar.prototype.create = function (_par) {
var parent = null;
if (! _par) {
// default parent is the document body, in which case we create
// a popup calendar.
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;
cell.innerHTML = " 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"];
// day names
row = Calendar.createElement("tr", thead);
row.className = "daynames";
if (this.weekNumbers) {
cell = Calendar.createElement("td", row);
cell.className = "name wn";
cell.innerHTML = Calendar._TT["WK"];
}
for (var i = 7; i > 0; --i) {
cell = Calendar.createElement("td", row);
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);
}
for (var j = 7; j > 0; --j) {
cell = Calendar.createElement("td", row);
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 = Calendar._TT["TIME"] || " ";
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.innerHTML = 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.innerHTML = ":";
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 pm, hrs = this.date.getHours(),
mins = this.date.getMinutes();
if (t12) {
pm = (hrs >= 12);
if (pm) hrs -= 12;
if (hrs == 0) hrs = 12;
AP.innerHTML = pm ? "pm" : "am";
}
H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};
cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.innerHTML, 10);
if (t12) {
if (/pm/i.test(AP.innerHTML) && h < 12)
h += 12;
else if (/am/i.test(AP.innerHTML) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.innerHTML, 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.innerHTML = 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";
div.appendChild(yr);
}
this._init(this.firstDayOfWeek, this.date);
parent.appendChild(this.element);
}; /** keyboard navigation, only for popup calendars */ Calendar._keyEvent = function(ev) {
var cal = window._dynarch_popupCalendar;
if (!cal || cal.multiple)
return false;
(Calendar.is_ie) && (ev = window.event);
var act = (Calendar.is_ie || ev.type == "keypress"),
K = ev.keyCode;
if (ev.ctrlKey) {
switch (K) {
case 37: // KEY left
act && Calendar.cellClick(cal._nav_pm);
break;
case 38: // KEY up
act && Calendar.cellClick(cal._nav_py);
break;
case 39: // KEY right
act && Calendar.cellClick(cal._nav_nm);
break;
case 40: // KEY down
act && Calendar.cellClick(cal._nav_ny);
break;
default:
return false;
}
} else switch (K) {
case 32: // KEY space (now)
Calendar.cellClick(cal._nav_now);
break;
case 27: // KEY esc
act && cal.callCloseHandler();
break;
case 37: // KEY left
case 38: // KEY up
case 39: // KEY right
case 40: // KEY down
if (act) {
var prev, x, y, ne, el, step;
prev = K == 37 || K == 38;
step = (K == 37 || K == 39) ? 1 : 7;
function setVars() {
el = cal.currentDateEl;
var p = el.pos;
x = p & 15;
y = p >> 4;
ne = cal.ar_days[y][x];
};setVars();
function prevMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() - step);
cal.setDate(date);
};
function nextMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() + step);
cal.setDate(date);
};
while (1) {
switch (K) {
case 37: // KEY left
if (--x >= 0)
ne = cal.ar_days[y][x];
else {
x = 6;
K = 38;
continue;
}
break;
case 38: // KEY up
if (--y >= 0)
ne = cal.ar_days[y][x];
else {
prevMonth();
setVars();
}
break;
case 39: // KEY right
if (++x < 7)
ne = cal.ar_days[y][x];
else {
x = 0;
K = 40;
continue;
}
break;
case 40: // KEY down
if (++y < cal.ar_days.length)
ne = cal.ar_days[y][x];
else {
nextMonth();
setVars();
}
break;
}
break;
}
if (ne) {
if (!ne.disabled)
Calendar.cellClick(ne);
else if (prev)
prevMonth();
else
nextMonth();
}
}
break;
case 13: // KEY enter
if (act)
Calendar.cellClick(cal.currentDateEl, ev);
break;
default:
return false;
}
return Calendar.stopEvent(ev);
}; /**
* (RE)Initializes the calendar to the given date and firstDayOfWeek */
Calendar.prototype._init = function (firstDayOfWeek, date) {
var today = new Date(),
TY = today.getFullYear(),
TM = today.getMonth(),
TD = today.getDate();
this.table.style.visibility = "hidden";
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.firstDayOfWeek = firstDayOfWeek;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = date.getMonthDays();
// calendar voodoo for computing the first day that would actually be
// displayed in the calendar, even if it"s from the previous month.
// WARNING: this is magic. ;-)
date.setDate(1);
var day1 = (date.getDay() - this.firstDayOfWeek) % 7;
if (day1 < 0)
day1 += 7;
date.setDate(-day1);
date.setDate(date.getDate() + 1);
var row = this.tbody.firstChild;
var MN = Calendar._SMN[month];
var ar_days = this.ar_days = new Array();
var weekend = Calendar._TT["WEEKEND"];
var dates = this.multiple ? (this.datesCells = {}) : null;
for (var i = 0; i < 6; ++i, row = row.nextSibling) {
var cell = row.firstChild;
if (this.weekNumbers) {
cell.className = "day wn";
cell.innerHTML = date.getWeekNumber();
cell = cell.nextSibling;
}
row.className = "daysrow";
var hasdays = false, iday, dpos = ar_days[i] = [];
for (var j = 0; j < 7; ++j, cell = cell.nextSibling, date.setDate(iday + 1)) {
iday = date.getDate();
var wday = date.getDay();
cell.className = "day";
cell.pos = i << 4 | j;
dpos[j] = cell;
var current_month = (date.getMonth() == month);
if (!current_month) {
if (this.showsOtherMonths) {
cell.className += " othermonth";
cell.otherMonth = true;
} else {
cell.className = "emptycell";
cell.innerHTML = " ";
cell.disabled = true;
continue;
}
} else {
cell.otherMonth = false;
hasdays = true;
}
cell.disabled = false;
cell.innerHTML = this.getDateText ? this.getDateText(date, iday) : iday;
if (dates)
dates[date.print("%Y%m%d")] = cell;
if (this.getDateStatus) {
var status = this.getDateStatus(date, year, month, iday);
if (this.getDateToolTip) {
var toolTip = this.getDateToolTip(date, year, month, iday);
if (toolTip)
cell.title = toolTip;
}
if (status === true) {
cell.className += " disabled";
cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
}
}
if (!cell.disabled) {
cell.caldate = new Date(date);
cell.ttip = "_";
if (!this.multiple && current_month
&& iday == mday && this.hiliteToday) {
cell.className += " selected";
this.currentDateEl = cell;
}
if (date.getFullYear() == TY &&
date.getMonth() == TM &&
iday == TD) {
cell.className += " today";
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (weekend.indexOf(wday.toString()) != -1)
cell.className += cell.otherMonth ? " oweekend" : " weekend";
}
}
if (!(hasdays || this.showsOtherMonths))
row.className = "emptyrow";
}
this.title.innerHTML = Calendar._MN[month] + ", " + year;
this.onSetTime();
this.table.style.visibility = "visible";
this._initMultipleDates();
// PROFILE
// this.tooltips.innerHTML = "Generated in " + ((new Date()) - today) + " ms";
}; Calendar.prototype._initMultipleDates = function() {
if (this.multiple) {
for (var i in this.multiple) {
var cell = this.datesCells[i];
var d = this.multiple[i];
if (!d)
continue;
if (cell)
cell.className += " selected";
}
}
}; Calendar.prototype._toggleMultipleDate = function(date) {
if (this.multiple) {
var ds = date.print("%Y%m%d");
var cell = this.datesCells[ds];
if (cell) {
var d = this.multiple[ds];
if (!d) {
Calendar.addClass(cell, "selected");
this.multiple[ds] = date;
} else {
Calendar.removeClass(cell, "selected");
delete this.multiple[ds];
}
}
}
}; Calendar.prototype.setDateToolTipHandler = function (unaryFunction) {
this.getDateToolTip = unaryFunction;
}; /**
* Calls _init function above for going to a certain date (but only if the * date is different than the currently selected one). */
Calendar.prototype.setDate = function (date) {
if (!date.equalsTo(this.date)) {
this._init(this.firstDayOfWeek, date);
}
}; /**
* Refreshes the calendar. Useful if the "disabledHandler" function is * dynamic, meaning that the list of disabled date can change at runtime. * Just * call this function if you think that the list of disabled dates * should * change. */
Calendar.prototype.refresh = function () {
this._init(this.firstDayOfWeek, this.date);
}; /** Modifies the "firstDayOfWeek" parameter (pass 0 for Synday, 1 for Monday, etc.). */ Calendar.prototype.setFirstDayOfWeek = function (firstDayOfWeek) {
this._init(firstDayOfWeek, this.date); this._displayWeekdays();
}; /**
* Allows customization of what dates are enabled. The "unaryFunction" * parameter must be a function object that receives the date (as a JS Date * object) and returns a boolean value. If the returned value is true then * the passed date will be marked as disabled. */
Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.getDateStatus = unaryFunction;
}; /** Customization of allowed year range for the calendar. */ Calendar.prototype.setRange = function (a, z) {
this.minYear = a; this.maxYear = z;
}; /** Calls the first user handler (selectedHandler). */ Calendar.prototype.callHandler = function () {
if (this.onSelected) {
this.onSelected(this, this.date.print(this.dateFormat));
}
}; /** Calls the second user handler (closeHandler). */ Calendar.prototype.callCloseHandler = function () {
if (this.onClose) {
this.onClose(this);
}
this.hideShowCovered();
}; /** Removes the calendar object from the DOM tree and destroys it. */ Calendar.prototype.destroy = function () {
var el = this.element.parentNode; el.removeChild(this.element); Calendar._C = null; window._dynarch_popupCalendar = null;
}; /**
* Moves the calendar element to a different section in the DOM tree (changes * its parent). */
Calendar.prototype.reparent = function (new_parent) {
var el = this.element; el.parentNode.removeChild(el); new_parent.appendChild(el);
}; // This gets called when the user presses a mouse button anywhere in the // document, if the calendar is shown. If the click was outside the open // calendar this function closes it. Calendar._checkCalendar = function(ev) {
var calendar = window._dynarch_popupCalendar;
if (!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) {
// calls closeHandler which should hide the calendar.
window._dynarch_popupCalendar.callCloseHandler();
return Calendar.stopEvent(ev);
}
}; /** Shows the calendar. */ 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._dynarch_popupCalendar = this;
Calendar.addEvent(document, "keydown", Calendar._keyEvent);
Calendar.addEvent(document, "keypress", Calendar._keyEvent);
Calendar.addEvent(document, "mousedown", Calendar._checkCalendar);
}
this.hideShowCovered();
}; /**
* Hides the calendar. Also removes any "hilite" from the class of any TD * element. */
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();
}; /**
* Shows the calendar at a given absolute position (beware that, depending on * the calendar element style -- position property -- this might be relative * to the parent"s containing rectangle). */
Calendar.prototype.showAt = function (x, y) {
var s = this.element.style; s.left = x + "px"; s.top = y + "px"; this.show();
}; /** Shows the calendar near a given element. */ Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight);
return true;
}
function fixPosition(box) {
if (box.x < 0)
box.x = 0;
if (box.y < 0)
box.y = 0;
var cp = document.createElement("div");
var s = cp.style;
s.position = "absolute";
s.right = s.bottom = s.width = s.height = "0px";
document.body.appendChild(cp);
var br = Calendar.getAbsolutePos(cp);
document.body.removeChild(cp);
if (Calendar.is_ie) {
br.y += document.body.scrollTop;
br.x += document.body.scrollLeft;
} else {
br.y += window.scrollY;
br.x += window.scrollX;
}
var tmp = box.x + box.width - br.x;
if (tmp > 0) box.x -= tmp;
tmp = box.y + box.height - br.y;
if (tmp > 0) box.y -= tmp;
};
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);
}
// vertical alignment
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; // already there
}
// horizontal alignment
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 "l": p.x += el.offsetWidth - w; break;
case "r": break; // already there
}
p.width = w;
p.height = h + 40;
self.monthsCombo.style.display = "none";
fixPosition(p);
self.showAt(p.x, p.y);
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
}; /** Customizes the date format. */ Calendar.prototype.setDateFormat = function (str) {
this.dateFormat = str;
}; /** Customizes the tooltip date format. */ Calendar.prototype.setTtDateFormat = function (str) {
this.ttDateFormat = str;
}; /**
* Tries to identify the date represented in a string. If successful it also * calls this.setDate which moves the calendar to the given date. */
Calendar.prototype.parseDate = function(str, fmt) {
if (!fmt) fmt = this.dateFormat; this.setDate(Date.parseDate(str, fmt));
}; Calendar.prototype.hideShowCovered = function () {
if (!Calendar.is_ie && !Calendar.is_opera)
return;
function getVisib(obj){
var value = obj.style.visibility;
if (!value) {
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
if (!Calendar.is_khtml)
value = document.defaultView.
getComputedStyle(obj, "").getPropertyValue("visibility");
else
value = "";
} else if (obj.currentStyle) { // IE
value = obj.currentStyle.visibility;
} else
value = "";
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = this.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 (this.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";
}
}
}
}; /** Internal function; it displays the bar with the names of the weekday. */ Calendar.prototype._displayWeekdays = function () {
var fdow = this.firstDayOfWeek;
var cell = this.firstdayname;
var weekend = Calendar._TT["WEEKEND"];
for (var i = 0; i < 7; ++i) {
cell.className = "day name";
var realday = (i + fdow) % 7;
if (i) {
cell.ttip = Calendar._TT["DAY_FIRST"].replace("%s", Calendar._DN[realday]);
cell.navtype = 100;
cell.calendar = this;
cell.fdow = realday;
Calendar._add_evs(cell);
}
if (weekend.indexOf(realday.toString()) != -1) {
Calendar.addClass(cell, "weekend");
}
cell.innerHTML = Calendar._SDN[(i + fdow) % 7];
cell = cell.nextSibling;
}
}; /** Internal function. Hides all combo boxes that might be displayed. */ Calendar.prototype._hideCombos = function () {
this.monthsCombo.style.display = "none"; this.yearsCombo.style.display = "none";
}; /** Internal function. Starts dragging the element. */ 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, "mouseup", calDragEnd);
}
}; // BEGIN: DATE OBJECT PATCHES /** Adds the number of days array to the Date object. */ Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31); /** Constants used for time computations */ Date.SECOND = 1000 /* milliseconds */; Date.MINUTE = 60 * Date.SECOND; Date.HOUR = 60 * Date.MINUTE; Date.DAY = 24 * Date.HOUR; Date.WEEK = 7 * Date.DAY; Date.parseDate = function(str, fmt) {
var today = new Date();
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/\W+/);
var b = fmt.match(/%./g);
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (!a[i])
continue;
switch (b[i]) {
case "%d":
case "%e":
d = parseInt(a[i], 10);
break;
case "%m":
m = parseInt(a[i], 10) - 1;
break;
case "%Y":
case "%y":
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
break;
case "%b":
case "%B":
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
break;
case "%H":
case "%I":
case "%k":
case "%l":
hr = parseInt(a[i], 10);
break;
case "%P":
case "%p":
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
else if (/am/i.test(a[i]) && hr >= 12)
hr -= 12;
break;
case "%M":
min = parseInt(a[i], 10);
break;
}
}
if (isNaN(y)) y = today.getFullYear();
if (isNaN(m)) m = today.getMonth();
if (isNaN(d)) d = today.getDate();
if (isNaN(hr)) hr = today.getHours();
if (isNaN(min)) min = today.getMinutes();
if (y != 0 && m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
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)
y = today.getFullYear();
if (m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
return today;
}; /** Returns the number of days in the current month */ 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];
}
}; /** Returns the number of day in the year. */ Date.prototype.getDayOfYear = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var then = new Date(this.getFullYear(), 0, 0, 0, 0, 0); var time = now - then; return Math.floor(time / Date.DAY);
}; /** Returns the number of the week in year, as defined in ISO 8601. */ Date.prototype.getWeekNumber = function() {
var d = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var DoW = d.getDay(); d.setDate(d.getDate() - (DoW + 6) % 7 + 3); // Nearest Thu var ms = d.valueOf(); // GMT d.setMonth(0); d.setDate(4); // Thu in Week 1 return Math.round((ms - d.valueOf()) / (7 * 864e5)) + 1;
}; /** Checks date and time equality */ 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()));
}; /** Set only the year, month, date parts (keep existing time) */ Date.prototype.setDateOnly = function(date) {
var tmp = new Date(date); this.setDate(1); this.setFullYear(tmp.getFullYear()); this.setMonth(tmp.getMonth()); this.setDate(tmp.getDate());
}; /** Prints the date in a string according to the given format. */ 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]; // abbreviated weekday name [FIXME: I18N]
s["%A"] = Calendar._DN[w]; // full weekday name
s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["%B"] = Calendar._MN[m]; // full month name
// FIXME: %c : preferred date and time representation for the current locale
s["%C"] = 1 + Math.floor(y / 100); // the century number
s["%d"] = (d < 10) ? ("0" + d) : d; // the day of the month (range 01 to 31)
s["%e"] = d; // the day of the month (range 1 to 31)
// FIXME: %D : american date style: %m/%d/%y
// FIXME: %E, %F, %G, %g, %h (man strftime)
s["%H"] = (hr < 10) ? ("0" + hr) : hr; // hour, range 00 to 23 (24h format)
s["%I"] = (ir < 10) ? ("0" + ir) : ir; // hour, range 01 to 12 (12h format)
s["%j"] = (dy < 100) ? ((dy < 10) ? ("00" + dy) : ("0" + dy)) : dy; // day of the year (range 001 to 366)
s["%k"] = hr; // hour, range 0 to 23 (24h format)
s["%l"] = ir; // hour, range 1 to 12 (12h format)
s["%m"] = (m < 9) ? ("0" + (1+m)) : (1+m); // month, range 01 to 12
s["%M"] = (min < 10) ? ("0" + min) : min; // minute, range 00 to 59
s["%n"] = "\n"; // a newline character
s["%p"] = pm ? "PM" : "AM";
s["%P"] = pm ? "pm" : "am";
// FIXME: %r : the time in am/pm notation %I:%M:%S %p
// FIXME: %R : the time in 24-hour notation %H:%M
s["%s"] = Math.floor(this.getTime() / 1000);
s["%S"] = (sec < 10) ? ("0" + sec) : sec; // seconds, range 00 to 59
s["%t"] = "\t"; // a tab character
// FIXME: %T : the time in 24-hour notation (%H:%M:%S)
s["%U"] = s["%W"] = s["%V"] = (wn < 10) ? ("0" + wn) : wn;
s["%u"] = w + 1; // the day of the week (range 1 to 7, 1 = MON)
s["%w"] = w; // the day of the week (range 0 to 6, 0 = SUN)
// FIXME: %x : preferred date representation for the current locale without the time
// FIXME: %X : preferred time representation for the current locale without the date
s["%y"] = ("" + y).substr(2, 2); // year without the century (range 00 to 99)
s["%Y"] = y; // year with the century
s["%%"] = "%"; // a literal "%" character
var re = /%./g;
if (!Calendar.is_ie5 && !Calendar.is_khtml)
return str.replace(re, function (par) { return s[par] || par; });
var a = str.match(re);
for (var i = 0; i < a.length; i++) {
var tmp = s[a[i]];
if (tmp) {
re = new RegExp(a[i], "g");
str = str.replace(re, tmp);
}
}
return str;
}; Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear; Date.prototype.setFullYear = function(y) {
var d = new Date(this); d.__msh_oldSetFullYear(y); if (d.getMonth() != this.getMonth()) this.setDate(28); this.__msh_oldSetFullYear(y);
}; // END: DATE OBJECT PATCHES
// global object that remembers the calendar window._dynarch_popupCalendar = null;
</script> <script type="text/javascript">
// ** I18N // Calendar EN language // Author: Mihai Bazon, <mihai_bazon@yahoo.ru> // Encoding: any // Distributed under the same terms as the calendar itself. // For translators: please use UTF-8 if possible. We strongly believe that // Unicode is the answer to a real internationalized world. Also please // include your contact information in the header, as can be seen above. // full day names Calendar._DN = new Array ("Sunday",
"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
// Please note that the following array of short day names (and the same goes // for short month names, _SMN) isn"t absolutely necessary. We give it here // for exemplification on how one can customize the short day names, but if // they are simply the first N letters of the full name you can simply say: // // Calendar._SDN_len = N; // short day name length // Calendar._SMN_len = N; // short month name length // // If N = 3 then this is not needed either since we assume a value of 3 if not // present, to be compatible with translation files that were written before // this feature. // short day names Calendar._SDN = new Array ("Sun",
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
// First day of the week. "0" means display Sunday first, "1" means display // Monday first, etc. Calendar._FD = 0; // full month names Calendar._MN = new Array ("January",
"February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// short month names Calendar._SMN = new Array ("Jan",
"Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// tooltips Calendar._TT = {}; Calendar._TT["INFO"] = "About the calendar"; Calendar._TT["ABOUT"] = "DHTML Date/Time Selector\n" + "(c) dynarch.ru 2002-2005 / Author: Mihai Bazon\n" + // don"t translate this this ;-) "For latest version visit: http://www.dynarch.ru/projects/calendar/\n" + "Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." + "\n\n" + "Date selection:\n" + "- Use the \xab, \xbb buttons to select year\n" + "- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" + "- Hold mouse button on any of the above buttons for faster selection."; Calendar._TT["ABOUT_TIME"] = "\n\n" + "Time selection:\n" + "- Click on any of the time parts to increase it\n" + "- or Shift-click to decrease it\n" + "- or click and drag for faster selection."; Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["GO_TODAY"] = "Go Today"; Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)"; Calendar._TT["SEL_DATE"] = "Select date"; Calendar._TT["DRAG_TO_MOVE"] = "Drag to move"; Calendar._TT["PART_TODAY"] = " (today)"; // the following is to inform that "%s" is to be the first day of week // %s will be replaced with the day name. Calendar._TT["DAY_FIRST"] = "Display %s first"; // This may be locale-dependent. It specifies the week-end days, as an array // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 // means Monday, etc. Calendar._TT["WEEKEND"] = "0,6"; Calendar._TT["CLOSE"] = "Close"; Calendar._TT["TODAY"] = "Today"; Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value"; // date formats Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d"; Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e"; Calendar._TT["WK"] = "wk"; Calendar._TT["TIME"] = "Time:";
</script> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.ru/mishoo/
* --------------------------------------------------------------------------- * * The DHTML Calendar * * Details and latest version at: * http://dynarch.ru/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.25 2005/03/07 09:51:33 mishoo 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) * firstDay | numeric: 0 to 6. "0" means display Sunday first, "1" means display Monday first, etc. * align | alignment (default: "Br"); 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" * electric | if true (default) then given fields/date areas are updated for each move; otherwise they"re updated only on close * step | configures the step of the years in drop-down boxes; default: 2 * position | configures the calendar absolute position; default: null * cache | if "true" (but default: "false") it will reuse the same calendar object, where possible * showOthers | if "true" (but default: "false") it will show days from other months too * * 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("dateText", null);
param_default("firstDay", null);
param_default("align", "Br");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
param_default("electric", true);
param_default("step", 2);
param_default("position", null);
param_default("cache", false);
param_default("showOthers", false);
param_default("multiple", 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.multiple || 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) {
var p = cal.params;
var update = (cal.dateClicked || p.electric);
if (update && p.inputField) {
p.inputField.value = cal.date.print(p.ifFormat);
if (typeof p.inputField.onchange == "function")
p.inputField.onchange();
}
if (update && p.displayArea)
p.displayArea.innerHTML = cal.date.print(p.daFormat);
if (update && typeof p.onUpdate == "function")
p.onUpdate(cal);
if (update && p.flat) {
if (typeof p.flatCallback == "function")
p.flatCallback(cal);
}
if (update && p.singleClick && cal.dateClicked)
cal.callCloseHandler();
};
if (params.flat != null) {
if (typeof params.flat == "string")
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.firstDay, params.date, params.onSelect || onSelect);
cal.showsOtherMonths = params.showOthers;
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.getDateText = params.dateText;
if (params.ifFormat) {
cal.setDateFormat(params.ifFormat);
}
if (params.inputField && typeof params.inputField.value == "string") {
cal.parseDate(params.inputField.value);
}
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 (dateEl)
params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
if (!(cal && params.cache)) {
window.calendar = cal = new Calendar(params.firstDay,
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 {
if (params.date)
cal.setDate(params.date);
cal.hide();
}
if (params.multiple) {
cal.multiple = {};
for (var i = params.multiple.length; --i >= 0;) {
var d = params.multiple[i];
var ds = d.print("%Y%m%d");
cal.multiple[ds] = d;
}
}
cal.showsOtherMonths = params.showOthers;
cal.yearStep = params.step;
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.getDateText = params.dateText;
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.refresh();
if (!params.position)
cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
else
cal.showAt(params.position[0], params.position[1]);
return false;
};
return cal;
};
</script>
</head> <body>
Sample for the multiple dates feature
Starting version 0.9.7, the calendar is able to handle multiple dates selection, in either flat or popup form. For this to happen one needs to pass the "multiple: true" parameter to Calendar.setup and to install an onUpdate handler that watches for modifications.
<a id="trigger" href="#">[open calendar...]</a>
<script type="text/javascript">
//
// the default multiple dates selected, first time the calendar is instantiated
var MA = [];
function closed(cal) {
// here we"ll write the output; this is only for example. You
// will normally fill an input field or something with the dates.
var el = document.getElementById("output");
// reset initial content.
el.innerHTML = "";
// Reset the "MA", in case one triggers the calendar again.
// CAREFUL! You don"t want to do "MA = [];". We need to modify
// the value of the current array, instead of creating a new one.
// Calendar.setup is called only once! :-) So be careful.
MA.length = 0;
// walk the calendar"s multiple dates selection hash
for (var i in cal.multiple) {
var d = cal.multiple[i];
// sometimes the date is not actually selected, that"s why we need to check.
if (d) {
// OK, selected. Fill an input field. Or something. Just for example,
// we will display all selected dates in the element having the id "output".
el.innerHTML += d.print("%A, %Y %B %d") + "
";
// and push it in the "MA", in case one triggers the calendar again.
MA[MA.length] = d;
}
}
cal.hide();
return true;
};
Calendar.setup({
align : "BR",
showOthers : true,
multiple : MA, // pass the initial or computed array of multiple dates to be initially selected
onClose : closed,
button : "trigger"
});
</script>
<address><a href="http://dynarch.ru/mishoo/">mishoo</a></address>
Last modified: Thu Mar 3 20:17:42 EET 2005
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jscalendar-1.0.zip">jscalendar-1.0.zip( 396 k)</a>
Calendar: special day
<source lang="html4strict">
<html> <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>Simple calendar setup [flat calendar]</title>
<style rel="stylesheet" type="text/css" media="all" title="win2k-cold-1">
/* 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 tbody .day.othermonth {
font-size: 80%; color: #aaa;
} .calendar tbody .day.othermonth.oweekend {
color: #faa;
} .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) */ .calendar .rubo {
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: 90%; padding: 1px; z-index: 100;
} .calendar .rubo .label, .calendar .rubo .label-IEfix {
text-align: center; padding: 1px;
} .calendar .rubo .label-IEfix {
width: 4em;
} .calendar .rubo .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;
} .calendar .rubo .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;
}
</style> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo
* ----------------------------------------------------------- * * The DHTML Calendar, version 1.0 "It is happening again" * * Details and latest version at: * www.dynarch.ru/projects/calendar * * This script is developed by Dynarch.ru. Visit us at www.dynarch.ru. * * 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.51 2005/03/07 16:44:31 mishoo Exp $ /** The Calendar object constructor. */ Calendar = function (firstDayOfWeek, dateStr, onSelected, onClose) {
// member variables
this.activeDiv = null;
this.currentDateEl = null;
this.getDateStatus = null;
this.getDateToolTip = null;
this.getDateText = 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.firstDayOfWeek = typeof firstDayOfWeek == "number" ? firstDayOfWeek : Calendar._FD; // 0 for Sunday, 1 for Monday, etc.
this.showsOtherMonths = false;
this.dateStr = dateStr;
this.ar_days = null;
this.showsTime = false;
this.time24 = true;
this.yearStep = 2;
this.hiliteToday = true;
this.multiple = null;
// HTML elements
this.table = null;
this.element = null;
this.tbody = null;
this.firstdayname = null;
// Combo boxes
this.monthsCombo = null;
this.yearsCombo = null;
this.hilitedMonth = null;
this.activeMonth = null;
this.hilitedYear = null;
this.activeYear = null;
// Information
this.dateClicked = false;
// one-time initializations
if (typeof Calendar._SDN == "undefined") {
// table of short day names
if (typeof Calendar._SDN_len == "undefined")
Calendar._SDN_len = 3;
var ar = new Array();
for (var i = 8; i > 0;) {
ar[--i] = Calendar._DN[i].substr(0, Calendar._SDN_len);
}
Calendar._SDN = ar;
// table of short month names
if (typeof Calendar._SMN_len == "undefined")
Calendar._SMN_len = 3;
ar = new Array();
for (var i = 12; i > 0;) {
ar[--i] = Calendar._MN[i].substr(0, Calendar._SMN_len);
}
Calendar._SMN = ar;
}
}; // ** constants /// "static", needed for event handlers. Calendar._C = null; /// detect a special case of "web browser" Calendar.is_ie = ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) );
Calendar.is_ie5 = ( Calendar.is_ie && /msie 5\.0/i.test(navigator.userAgent) ); /// detect Opera browser Calendar.is_opera = /opera/i.test(navigator.userAgent); /// detect KHTML-based browsers Calendar.is_khtml = /Konqueror|Safari|KHTML/i.test(navigator.userAgent); // BEGIN: UTILITY FUNCTIONS; beware that these might be moved into a separate // library, at some point. Calendar.getAbsolutePos = function(el) {
var 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 = this.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;
}; // FIXME: the following 2 functions totally suck, are useless and should be replaced immediately. Calendar.getElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.currentTarget; while (f.nodeType != 1 || /^div$/i.test(f.tagName)) f = f.parentNode; return f;
}; Calendar.getTargetElement = function(ev) {
var f = Calendar.is_ie ? window.event.srcElement : ev.target; while (f.nodeType != 1) f = f.parentNode; return f;
}; 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) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
}; Calendar.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
}; Calendar.createElement = function(type, parent) {
var el = null;
if (document.createElementNS) {
// use the XHTML namespace; IE won"t normally get here unless
// _they_ "fix" the DOM2 implementation.
el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
} else {
el = document.createElement(type);
}
if (typeof parent != "undefined") {
parent.appendChild(el);
}
return el;
}; // END: UTILITY FUNCTIONS // BEGIN: CALENDAR STATIC FUNCTIONS /** Internal -- adds a set of events to make some element behave like a button. */ 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 {
var mcw = mc.offsetWidth;
if (typeof mcw == "undefined")
// Konqueror brain-dead techniques
mcw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - mcw) + "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.innerHTML = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else {
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? cal.yearStep : -cal.yearStep;
}
if (show) {
var s = yc.style;
s.display = "block";
if (cd.navtype < 0)
s.left = cd.offsetLeft + "px";
else {
var ycw = yc.offsetWidth;
if (typeof ycw == "undefined")
// Konqueror brain-dead techniques
ycw = 50;
s.left = (cd.offsetLeft + cd.offsetWidth - ycw) + "px";
}
s.top = (cd.offsetTop + cd.offsetHeight) + "px";
}
}; // event handlers 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 < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = 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, "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.innerHTML;
addEvent(document, "mousemove", tableMouseOver);
} else
addEvent(document, Calendar.is_ie5 ? "mousemove" : "mouseover", tableMouseOver);
addClass(el, "hilite active");
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) == "_") {
el.ttip = el.caldate.print(el.calendar.ttDateFormat) + el.ttip.substr(1);
}
el.calendar.tooltips.innerHTML = 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");
if (el.calendar)
el.calendar.tooltips.innerHTML = _TT["SEL_DATE"];
return stopEvent(ev);
}
}; /**
* A generic "click" handler :) handles all types of buttons defined in this * calendar. */
Calendar.cellClick = function(el, ev) {
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == "undefined") {
if (cal.currentDateEl) {
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = (cal.currentDateEl == el);
if (!closing) {
cal.currentDateEl = el;
}
}
cal.date.setDateOnly(el.caldate);
date = cal.date;
var other_month = !(cal.dateClicked = !el.otherMonth);
if (!other_month && !cal.currentDateEl)
cal._toggleMultipleDate(new Date(date));
else
newdate = !el.disabled;
// a date was clicked
if (other_month)
cal._init(cal.firstDayOfWeek, date);
} else {
if (el.navtype == 200) {
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = new Date(cal.date);
if (el.navtype == 0)
date.setDateOnly(new Date()); // TODAY
// unless "today" was clicked, we assume no date was clicked so
// the selected handler will know not to close the calenar when
// in single-click mode.
// cal.dateClicked = (el.navtype == 0);
cal.dateClicked = 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 {
// FIXME: this should be removed as soon as lang files get updated!
text = "Help and about box text is not translated into this language.\n" +
"If you know this language and you feel generous please update\n" +
"the corresponding file in \"lang\" subdir to match calendar-en.js\n" +
"and send it back to <mihai_bazon@yahoo.ru> to get it into the distribution ;-)\n\n" +
"Thank you!\n" +
"http://dynarch.ru/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.setFirstDayOfWeek(el.fdow);
return;
case 50:
var range = el._range;
var current = el.innerHTML;
for (var i = range.length; --i >= 0;)
if (range[i] == current)
break;
if (ev && ev.shiftKey) {
if (--i < 0)
i = range.length - 1;
} else if ( ++i >= range.length )
i = 0;
var newval = range[i];
el.innerHTML = newval;
cal.onUpdateTime();
return;
case 0:
// TODAY will bring us here
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;
} else if (el.navtype == 0)
newdate = closing = true;
}
if (newdate) {
ev && cal.callHandler();
}
if (closing) {
Calendar.removeClass(el, "hilite");
ev && cal.callCloseHandler();
}
}; // END: CALENDAR STATIC FUNCTIONS // BEGIN: CALENDAR OBJECT FUNCTIONS /**
* This function creates the calendar inside the given parent. If _par is * null than it creates a popup calendar inside the BODY element. If _par is * an element, be it BODY, then it creates a non-popup calendar (still * hidden). Some properties need to be set before calling this function. */
Calendar.prototype.create = function (_par) {
var parent = null;
if (! _par) {
// default parent is the document body, in which case we create
// a popup calendar.
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;
cell.innerHTML = " 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"];
// day names
row = Calendar.createElement("tr", thead);
row.className = "daynames";
if (this.weekNumbers) {
cell = Calendar.createElement("td", row);
cell.className = "name wn";
cell.innerHTML = Calendar._TT["WK"];
}
for (var i = 7; i > 0; --i) {
cell = Calendar.createElement("td", row);
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);
}
for (var j = 7; j > 0; --j) {
cell = Calendar.createElement("td", row);
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 = Calendar._TT["TIME"] || " ";
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.innerHTML = 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.innerHTML = ":";
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 pm, hrs = this.date.getHours(),
mins = this.date.getMinutes();
if (t12) {
pm = (hrs >= 12);
if (pm) hrs -= 12;
if (hrs == 0) hrs = 12;
AP.innerHTML = pm ? "pm" : "am";
}
H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
};
cal.onUpdateTime = function() {
var date = this.date;
var h = parseInt(H.innerHTML, 10);
if (t12) {
if (/pm/i.test(AP.innerHTML) && h < 12)
h += 12;
else if (/am/i.test(AP.innerHTML) && h == 12)
h = 0;
}
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
date.setHours(h);
date.setMinutes(parseInt(M.innerHTML, 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.innerHTML = 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";
div.appendChild(yr);
}
this._init(this.firstDayOfWeek, this.date);
parent.appendChild(this.element);
}; /** keyboard navigation, only for popup calendars */ Calendar._keyEvent = function(ev) {
var cal = window._dynarch_popupCalendar;
if (!cal || cal.multiple)
return false;
(Calendar.is_ie) && (ev = window.event);
var act = (Calendar.is_ie || ev.type == "keypress"),
K = ev.keyCode;
if (ev.ctrlKey) {
switch (K) {
case 37: // KEY left
act && Calendar.cellClick(cal._nav_pm);
break;
case 38: // KEY up
act && Calendar.cellClick(cal._nav_py);
break;
case 39: // KEY right
act && Calendar.cellClick(cal._nav_nm);
break;
case 40: // KEY down
act && Calendar.cellClick(cal._nav_ny);
break;
default:
return false;
}
} else switch (K) {
case 32: // KEY space (now)
Calendar.cellClick(cal._nav_now);
break;
case 27: // KEY esc
act && cal.callCloseHandler();
break;
case 37: // KEY left
case 38: // KEY up
case 39: // KEY right
case 40: // KEY down
if (act) {
var prev, x, y, ne, el, step;
prev = K == 37 || K == 38;
step = (K == 37 || K == 39) ? 1 : 7;
function setVars() {
el = cal.currentDateEl;
var p = el.pos;
x = p & 15;
y = p >> 4;
ne = cal.ar_days[y][x];
};setVars();
function prevMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() - step);
cal.setDate(date);
};
function nextMonth() {
var date = new Date(cal.date);
date.setDate(date.getDate() + step);
cal.setDate(date);
};
while (1) {
switch (K) {
case 37: // KEY left
if (--x >= 0)
ne = cal.ar_days[y][x];
else {
x = 6;
K = 38;
continue;
}
break;
case 38: // KEY up
if (--y >= 0)
ne = cal.ar_days[y][x];
else {
prevMonth();
setVars();
}
break;
case 39: // KEY right
if (++x < 7)
ne = cal.ar_days[y][x];
else {
x = 0;
K = 40;
continue;
}
break;
case 40: // KEY down
if (++y < cal.ar_days.length)
ne = cal.ar_days[y][x];
else {
nextMonth();
setVars();
}
break;
}
break;
}
if (ne) {
if (!ne.disabled)
Calendar.cellClick(ne);
else if (prev)
prevMonth();
else
nextMonth();
}
}
break;
case 13: // KEY enter
if (act)
Calendar.cellClick(cal.currentDateEl, ev);
break;
default:
return false;
}
return Calendar.stopEvent(ev);
}; /**
* (RE)Initializes the calendar to the given date and firstDayOfWeek */
Calendar.prototype._init = function (firstDayOfWeek, date) {
var today = new Date(),
TY = today.getFullYear(),
TM = today.getMonth(),
TD = today.getDate();
this.table.style.visibility = "hidden";
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.firstDayOfWeek = firstDayOfWeek;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = date.getMonthDays();
// calendar voodoo for computing the first day that would actually be
// displayed in the calendar, even if it"s from the previous month.
// WARNING: this is magic. ;-)
date.setDate(1);
var day1 = (date.getDay() - this.firstDayOfWeek) % 7;
if (day1 < 0)
day1 += 7;
date.setDate(-day1);
date.setDate(date.getDate() + 1);
var row = this.tbody.firstChild;
var MN = Calendar._SMN[month];
var ar_days = this.ar_days = new Array();
var weekend = Calendar._TT["WEEKEND"];
var dates = this.multiple ? (this.datesCells = {}) : null;
for (var i = 0; i < 6; ++i, row = row.nextSibling) {
var cell = row.firstChild;
if (this.weekNumbers) {
cell.className = "day wn";
cell.innerHTML = date.getWeekNumber();
cell = cell.nextSibling;
}
row.className = "daysrow";
var hasdays = false, iday, dpos = ar_days[i] = [];
for (var j = 0; j < 7; ++j, cell = cell.nextSibling, date.setDate(iday + 1)) {
iday = date.getDate();
var wday = date.getDay();
cell.className = "day";
cell.pos = i << 4 | j;
dpos[j] = cell;
var current_month = (date.getMonth() == month);
if (!current_month) {
if (this.showsOtherMonths) {
cell.className += " othermonth";
cell.otherMonth = true;
} else {
cell.className = "emptycell";
cell.innerHTML = " ";
cell.disabled = true;
continue;
}
} else {
cell.otherMonth = false;
hasdays = true;
}
cell.disabled = false;
cell.innerHTML = this.getDateText ? this.getDateText(date, iday) : iday;
if (dates)
dates[date.print("%Y%m%d")] = cell;
if (this.getDateStatus) {
var status = this.getDateStatus(date, year, month, iday);
if (this.getDateToolTip) {
var toolTip = this.getDateToolTip(date, year, month, iday);
if (toolTip)
cell.title = toolTip;
}
if (status === true) {
cell.className += " disabled";
cell.disabled = true;
} else {
if (/disabled/i.test(status))
cell.disabled = true;
cell.className += " " + status;
}
}
if (!cell.disabled) {
cell.caldate = new Date(date);
cell.ttip = "_";
if (!this.multiple && current_month
&& iday == mday && this.hiliteToday) {
cell.className += " selected";
this.currentDateEl = cell;
}
if (date.getFullYear() == TY &&
date.getMonth() == TM &&
iday == TD) {
cell.className += " today";
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (weekend.indexOf(wday.toString()) != -1)
cell.className += cell.otherMonth ? " oweekend" : " weekend";
}
}
if (!(hasdays || this.showsOtherMonths))
row.className = "emptyrow";
}
this.title.innerHTML = Calendar._MN[month] + ", " + year;
this.onSetTime();
this.table.style.visibility = "visible";
this._initMultipleDates();
// PROFILE
// this.tooltips.innerHTML = "Generated in " + ((new Date()) - today) + " ms";
}; Calendar.prototype._initMultipleDates = function() {
if (this.multiple) {
for (var i in this.multiple) {
var cell = this.datesCells[i];
var d = this.multiple[i];
if (!d)
continue;
if (cell)
cell.className += " selected";
}
}
}; Calendar.prototype._toggleMultipleDate = function(date) {
if (this.multiple) {
var ds = date.print("%Y%m%d");
var cell = this.datesCells[ds];
if (cell) {
var d = this.multiple[ds];
if (!d) {
Calendar.addClass(cell, "selected");
this.multiple[ds] = date;
} else {
Calendar.removeClass(cell, "selected");
delete this.multiple[ds];
}
}
}
}; Calendar.prototype.setDateToolTipHandler = function (unaryFunction) {
this.getDateToolTip = unaryFunction;
}; /**
* Calls _init function above for going to a certain date (but only if the * date is different than the currently selected one). */
Calendar.prototype.setDate = function (date) {
if (!date.equalsTo(this.date)) {
this._init(this.firstDayOfWeek, date);
}
}; /**
* Refreshes the calendar. Useful if the "disabledHandler" function is * dynamic, meaning that the list of disabled date can change at runtime. * Just * call this function if you think that the list of disabled dates * should * change. */
Calendar.prototype.refresh = function () {
this._init(this.firstDayOfWeek, this.date);
}; /** Modifies the "firstDayOfWeek" parameter (pass 0 for Synday, 1 for Monday, etc.). */ Calendar.prototype.setFirstDayOfWeek = function (firstDayOfWeek) {
this._init(firstDayOfWeek, this.date); this._displayWeekdays();
}; /**
* Allows customization of what dates are enabled. The "unaryFunction" * parameter must be a function object that receives the date (as a JS Date * object) and returns a boolean value. If the returned value is true then * the passed date will be marked as disabled. */
Calendar.prototype.setDateStatusHandler = Calendar.prototype.setDisabledHandler = function (unaryFunction) {
this.getDateStatus = unaryFunction;
}; /** Customization of allowed year range for the calendar. */ Calendar.prototype.setRange = function (a, z) {
this.minYear = a; this.maxYear = z;
}; /** Calls the first user handler (selectedHandler). */ Calendar.prototype.callHandler = function () {
if (this.onSelected) {
this.onSelected(this, this.date.print(this.dateFormat));
}
}; /** Calls the second user handler (closeHandler). */ Calendar.prototype.callCloseHandler = function () {
if (this.onClose) {
this.onClose(this);
}
this.hideShowCovered();
}; /** Removes the calendar object from the DOM tree and destroys it. */ Calendar.prototype.destroy = function () {
var el = this.element.parentNode; el.removeChild(this.element); Calendar._C = null; window._dynarch_popupCalendar = null;
}; /**
* Moves the calendar element to a different section in the DOM tree (changes * its parent). */
Calendar.prototype.reparent = function (new_parent) {
var el = this.element; el.parentNode.removeChild(el); new_parent.appendChild(el);
}; // This gets called when the user presses a mouse button anywhere in the // document, if the calendar is shown. If the click was outside the open // calendar this function closes it. Calendar._checkCalendar = function(ev) {
var calendar = window._dynarch_popupCalendar;
if (!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) {
// calls closeHandler which should hide the calendar.
window._dynarch_popupCalendar.callCloseHandler();
return Calendar.stopEvent(ev);
}
}; /** Shows the calendar. */ 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._dynarch_popupCalendar = this;
Calendar.addEvent(document, "keydown", Calendar._keyEvent);
Calendar.addEvent(document, "keypress", Calendar._keyEvent);
Calendar.addEvent(document, "mousedown", Calendar._checkCalendar);
}
this.hideShowCovered();
}; /**
* Hides the calendar. Also removes any "hilite" from the class of any TD * element. */
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();
}; /**
* Shows the calendar at a given absolute position (beware that, depending on * the calendar element style -- position property -- this might be relative * to the parent"s containing rectangle). */
Calendar.prototype.showAt = function (x, y) {
var s = this.element.style; s.left = x + "px"; s.top = y + "px"; this.show();
}; /** Shows the calendar near a given element. */ Calendar.prototype.showAtElement = function (el, opts) {
var self = this;
var p = Calendar.getAbsolutePos(el);
if (!opts || typeof opts != "string") {
this.showAt(p.x, p.y + el.offsetHeight);
return true;
}
function fixPosition(box) {
if (box.x < 0)
box.x = 0;
if (box.y < 0)
box.y = 0;
var cp = document.createElement("div");
var s = cp.style;
s.position = "absolute";
s.right = s.bottom = s.width = s.height = "0px";
document.body.appendChild(cp);
var br = Calendar.getAbsolutePos(cp);
document.body.removeChild(cp);
if (Calendar.is_ie) {
br.y += document.body.scrollTop;
br.x += document.body.scrollLeft;
} else {
br.y += window.scrollY;
br.x += window.scrollX;
}
var tmp = box.x + box.width - br.x;
if (tmp > 0) box.x -= tmp;
tmp = box.y + box.height - br.y;
if (tmp > 0) box.y -= tmp;
};
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);
}
// vertical alignment
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; // already there
}
// horizontal alignment
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 "l": p.x += el.offsetWidth - w; break;
case "r": break; // already there
}
p.width = w;
p.height = h + 40;
self.monthsCombo.style.display = "none";
fixPosition(p);
self.showAt(p.x, p.y);
};
if (Calendar.is_khtml)
setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
else
Calendar.continuation_for_the_fucking_khtml_browser();
}; /** Customizes the date format. */ Calendar.prototype.setDateFormat = function (str) {
this.dateFormat = str;
}; /** Customizes the tooltip date format. */ Calendar.prototype.setTtDateFormat = function (str) {
this.ttDateFormat = str;
}; /**
* Tries to identify the date represented in a string. If successful it also * calls this.setDate which moves the calendar to the given date. */
Calendar.prototype.parseDate = function(str, fmt) {
if (!fmt) fmt = this.dateFormat; this.setDate(Date.parseDate(str, fmt));
}; Calendar.prototype.hideShowCovered = function () {
if (!Calendar.is_ie && !Calendar.is_opera)
return;
function getVisib(obj){
var value = obj.style.visibility;
if (!value) {
if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
if (!Calendar.is_khtml)
value = document.defaultView.
getComputedStyle(obj, "").getPropertyValue("visibility");
else
value = "";
} else if (obj.currentStyle) { // IE
value = obj.currentStyle.visibility;
} else
value = "";
}
return value;
};
var tags = new Array("applet", "iframe", "select");
var el = this.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 (this.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";
}
}
}
}; /** Internal function; it displays the bar with the names of the weekday. */ Calendar.prototype._displayWeekdays = function () {
var fdow = this.firstDayOfWeek;
var cell = this.firstdayname;
var weekend = Calendar._TT["WEEKEND"];
for (var i = 0; i < 7; ++i) {
cell.className = "day name";
var realday = (i + fdow) % 7;
if (i) {
cell.ttip = Calendar._TT["DAY_FIRST"].replace("%s", Calendar._DN[realday]);
cell.navtype = 100;
cell.calendar = this;
cell.fdow = realday;
Calendar._add_evs(cell);
}
if (weekend.indexOf(realday.toString()) != -1) {
Calendar.addClass(cell, "weekend");
}
cell.innerHTML = Calendar._SDN[(i + fdow) % 7];
cell = cell.nextSibling;
}
}; /** Internal function. Hides all combo boxes that might be displayed. */ Calendar.prototype._hideCombos = function () {
this.monthsCombo.style.display = "none"; this.yearsCombo.style.display = "none";
}; /** Internal function. Starts dragging the element. */ 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, "mouseup", calDragEnd);
}
}; // BEGIN: DATE OBJECT PATCHES /** Adds the number of days array to the Date object. */ Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31); /** Constants used for time computations */ Date.SECOND = 1000 /* milliseconds */; Date.MINUTE = 60 * Date.SECOND; Date.HOUR = 60 * Date.MINUTE; Date.DAY = 24 * Date.HOUR; Date.WEEK = 7 * Date.DAY; Date.parseDate = function(str, fmt) {
var today = new Date();
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/\W+/);
var b = fmt.match(/%./g);
var i = 0, j = 0;
var hr = 0;
var min = 0;
for (i = 0; i < a.length; ++i) {
if (!a[i])
continue;
switch (b[i]) {
case "%d":
case "%e":
d = parseInt(a[i], 10);
break;
case "%m":
m = parseInt(a[i], 10) - 1;
break;
case "%Y":
case "%y":
y = parseInt(a[i], 10);
(y < 100) && (y += (y > 29) ? 1900 : 2000);
break;
case "%b":
case "%B":
for (j = 0; j < 12; ++j) {
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }
}
break;
case "%H":
case "%I":
case "%k":
case "%l":
hr = parseInt(a[i], 10);
break;
case "%P":
case "%p":
if (/pm/i.test(a[i]) && hr < 12)
hr += 12;
else if (/am/i.test(a[i]) && hr >= 12)
hr -= 12;
break;
case "%M":
min = parseInt(a[i], 10);
break;
}
}
if (isNaN(y)) y = today.getFullYear();
if (isNaN(m)) m = today.getMonth();
if (isNaN(d)) d = today.getDate();
if (isNaN(hr)) hr = today.getHours();
if (isNaN(min)) min = today.getMinutes();
if (y != 0 && m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
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)
y = today.getFullYear();
if (m != -1 && d != 0)
return new Date(y, m, d, hr, min, 0);
return today;
}; /** Returns the number of days in the current month */ 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];
}
}; /** Returns the number of day in the year. */ Date.prototype.getDayOfYear = function() {
var now = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var then = new Date(this.getFullYear(), 0, 0, 0, 0, 0); var time = now - then; return Math.floor(time / Date.DAY);
}; /** Returns the number of the week in year, as defined in ISO 8601. */ Date.prototype.getWeekNumber = function() {
var d = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0); var DoW = d.getDay(); d.setDate(d.getDate() - (DoW + 6) % 7 + 3); // Nearest Thu var ms = d.valueOf(); // GMT d.setMonth(0); d.setDate(4); // Thu in Week 1 return Math.round((ms - d.valueOf()) / (7 * 864e5)) + 1;
}; /** Checks date and time equality */ 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()));
}; /** Set only the year, month, date parts (keep existing time) */ Date.prototype.setDateOnly = function(date) {
var tmp = new Date(date); this.setDate(1); this.setFullYear(tmp.getFullYear()); this.setMonth(tmp.getMonth()); this.setDate(tmp.getDate());
}; /** Prints the date in a string according to the given format. */ 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]; // abbreviated weekday name [FIXME: I18N]
s["%A"] = Calendar._DN[w]; // full weekday name
s["%b"] = Calendar._SMN[m]; // abbreviated month name [FIXME: I18N]
s["%B"] = Calendar._MN[m]; // full month name
// FIXME: %c : preferred date and time representation for the current locale
s["%C"] = 1 + Math.floor(y / 100); // the century number
s["%d"] = (d < 10) ? ("0" + d) : d; // the day of the month (range 01 to 31)
s["%e"] = d; // the day of the month (range 1 to 31)
// FIXME: %D : american date style: %m/%d/%y
// FIXME: %E, %F, %G, %g, %h (man strftime)
s["%H"] = (hr < 10) ? ("0" + hr) : hr; // hour, range 00 to 23 (24h format)
s["%I"] = (ir < 10) ? ("0" + ir) : ir; // hour, range 01 to 12 (12h format)
s["%j"] = (dy < 100) ? ((dy < 10) ? ("00" + dy) : ("0" + dy)) : dy; // day of the year (range 001 to 366)
s["%k"] = hr; // hour, range 0 to 23 (24h format)
s["%l"] = ir; // hour, range 1 to 12 (12h format)
s["%m"] = (m < 9) ? ("0" + (1+m)) : (1+m); // month, range 01 to 12
s["%M"] = (min < 10) ? ("0" + min) : min; // minute, range 00 to 59
s["%n"] = "\n"; // a newline character
s["%p"] = pm ? "PM" : "AM";
s["%P"] = pm ? "pm" : "am";
// FIXME: %r : the time in am/pm notation %I:%M:%S %p
// FIXME: %R : the time in 24-hour notation %H:%M
s["%s"] = Math.floor(this.getTime() / 1000);
s["%S"] = (sec < 10) ? ("0" + sec) : sec; // seconds, range 00 to 59
s["%t"] = "\t"; // a tab character
// FIXME: %T : the time in 24-hour notation (%H:%M:%S)
s["%U"] = s["%W"] = s["%V"] = (wn < 10) ? ("0" + wn) : wn;
s["%u"] = w + 1; // the day of the week (range 1 to 7, 1 = MON)
s["%w"] = w; // the day of the week (range 0 to 6, 0 = SUN)
// FIXME: %x : preferred date representation for the current locale without the time
// FIXME: %X : preferred time representation for the current locale without the date
s["%y"] = ("" + y).substr(2, 2); // year without the century (range 00 to 99)
s["%Y"] = y; // year with the century
s["%%"] = "%"; // a literal "%" character
var re = /%./g;
if (!Calendar.is_ie5 && !Calendar.is_khtml)
return str.replace(re, function (par) { return s[par] || par; });
var a = str.match(re);
for (var i = 0; i < a.length; i++) {
var tmp = s[a[i]];
if (tmp) {
re = new RegExp(a[i], "g");
str = str.replace(re, tmp);
}
}
return str;
}; Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear; Date.prototype.setFullYear = function(y) {
var d = new Date(this); d.__msh_oldSetFullYear(y); if (d.getMonth() != this.getMonth()) this.setDate(28); this.__msh_oldSetFullYear(y);
}; // END: DATE OBJECT PATCHES
// global object that remembers the calendar window._dynarch_popupCalendar = null;
</script> <script type="text/javascript">
// ** I18N // Calendar EN language // Author: Mihai Bazon, <mihai_bazon@yahoo.ru> // Encoding: any // Distributed under the same terms as the calendar itself. // For translators: please use UTF-8 if possible. We strongly believe that // Unicode is the answer to a real internationalized world. Also please // include your contact information in the header, as can be seen above. // full day names Calendar._DN = new Array ("Sunday",
"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
// Please note that the following array of short day names (and the same goes // for short month names, _SMN) isn"t absolutely necessary. We give it here // for exemplification on how one can customize the short day names, but if // they are simply the first N letters of the full name you can simply say: // // Calendar._SDN_len = N; // short day name length // Calendar._SMN_len = N; // short month name length // // If N = 3 then this is not needed either since we assume a value of 3 if not // present, to be compatible with translation files that were written before // this feature. // short day names Calendar._SDN = new Array ("Sun",
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
// First day of the week. "0" means display Sunday first, "1" means display // Monday first, etc. Calendar._FD = 0; // full month names Calendar._MN = new Array ("January",
"February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// short month names Calendar._SMN = new Array ("Jan",
"Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// tooltips Calendar._TT = {}; Calendar._TT["INFO"] = "About the calendar"; Calendar._TT["ABOUT"] = "DHTML Date/Time Selector\n" + "(c) dynarch.ru 2002-2005 / Author: Mihai Bazon\n" + // don"t translate this this ;-) "For latest version visit: http://www.dynarch.ru/projects/calendar/\n" + "Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." + "\n\n" + "Date selection:\n" + "- Use the \xab, \xbb buttons to select year\n" + "- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" + "- Hold mouse button on any of the above buttons for faster selection."; Calendar._TT["ABOUT_TIME"] = "\n\n" + "Time selection:\n" + "- Click on any of the time parts to increase it\n" + "- or Shift-click to decrease it\n" + "- or click and drag for faster selection."; Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)"; Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)"; Calendar._TT["GO_TODAY"] = "Go Today"; Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)"; Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)"; Calendar._TT["SEL_DATE"] = "Select date"; Calendar._TT["DRAG_TO_MOVE"] = "Drag to move"; Calendar._TT["PART_TODAY"] = " (today)"; // the following is to inform that "%s" is to be the first day of week // %s will be replaced with the day name. Calendar._TT["DAY_FIRST"] = "Display %s first"; // This may be locale-dependent. It specifies the week-end days, as an array // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 // means Monday, etc. Calendar._TT["WEEKEND"] = "0,6"; Calendar._TT["CLOSE"] = "Close"; Calendar._TT["TODAY"] = "Today"; Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value"; // date formats Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d"; Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e"; Calendar._TT["WK"] = "wk"; Calendar._TT["TIME"] = "Time:";
</script> <script type="text/javascript">
/* Copyright Mihai Bazon, 2002, 2003 | http://dynarch.ru/mishoo/
* --------------------------------------------------------------------------- * * The DHTML Calendar * * Details and latest version at: * http://dynarch.ru/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.25 2005/03/07 09:51:33 mishoo 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) * firstDay | numeric: 0 to 6. "0" means display Sunday first, "1" means display Monday first, etc. * align | alignment (default: "Br"); 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" * electric | if true (default) then given fields/date areas are updated for each move; otherwise they"re updated only on close * step | configures the step of the years in drop-down boxes; default: 2 * position | configures the calendar absolute position; default: null * cache | if "true" (but default: "false") it will reuse the same calendar object, where possible * showOthers | if "true" (but default: "false") it will show days from other months too * * 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("dateText", null);
param_default("firstDay", null);
param_default("align", "Br");
param_default("range", [1900, 2999]);
param_default("weekNumbers", true);
param_default("flat", null);
param_default("flatCallback", null);
param_default("onSelect", null);
param_default("onClose", null);
param_default("onUpdate", null);
param_default("date", null);
param_default("showsTime", false);
param_default("timeFormat", "24");
param_default("electric", true);
param_default("step", 2);
param_default("position", null);
param_default("cache", false);
param_default("showOthers", false);
param_default("multiple", 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.multiple || 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) {
var p = cal.params;
var update = (cal.dateClicked || p.electric);
if (update && p.inputField) {
p.inputField.value = cal.date.print(p.ifFormat);
if (typeof p.inputField.onchange == "function")
p.inputField.onchange();
}
if (update && p.displayArea)
p.displayArea.innerHTML = cal.date.print(p.daFormat);
if (update && typeof p.onUpdate == "function")
p.onUpdate(cal);
if (update && p.flat) {
if (typeof p.flatCallback == "function")
p.flatCallback(cal);
}
if (update && p.singleClick && cal.dateClicked)
cal.callCloseHandler();
};
if (params.flat != null) {
if (typeof params.flat == "string")
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.firstDay, params.date, params.onSelect || onSelect);
cal.showsOtherMonths = params.showOthers;
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.getDateText = params.dateText;
if (params.ifFormat) {
cal.setDateFormat(params.ifFormat);
}
if (params.inputField && typeof params.inputField.value == "string") {
cal.parseDate(params.inputField.value);
}
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 (dateEl)
params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
if (!(cal && params.cache)) {
window.calendar = cal = new Calendar(params.firstDay,
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 {
if (params.date)
cal.setDate(params.date);
cal.hide();
}
if (params.multiple) {
cal.multiple = {};
for (var i = params.multiple.length; --i >= 0;) {
var d = params.multiple[i];
var ds = d.print("%Y%m%d");
cal.multiple[ds] = d;
}
}
cal.showsOtherMonths = params.showOthers;
cal.yearStep = params.step;
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.getDateText = params.dateText;
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.refresh();
if (!params.position)
cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
else
cal.showAt(params.position[0], params.position[1]);
return false;
};
return cal;
};
</script>
<style type="text/css">
.special { background-color: #000; color: #fff; }
</style>
</head> <body>
DHTML Calendar for the special day
This page demonstrates how to setup a flat calendar.
The code in this page uses a helper function defined in "calendar-setup.js". With it you can setup the calendar in minutes.
<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>
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".
Following there is the code that has been used to create this calendar. You can find the full description of the Calendar.setup() function in the <a href="doc/html/reference.html">calendar documenation</a>.
<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>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jscalendar-1.0.zip">jscalendar-1.0.zip( 396 k)</a>
Calendar with different theme
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>The Coolest DHTML Calendar - Online Demo</title> <link rel="stylesheet" type="text/css" media="all" href="skins/aqua/theme.css" title="Aqua" /> <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-blue2.css" title="blue" /> <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="alternate 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" />
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-en.js"></script>
<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();
_dynarch_popupCalendar = 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, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
// we already have some calendar created
_dynarch_popupCalendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(1, 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");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
_dynarch_popupCalendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
_dynarch_popupCalendar.setDateFormat(format); // set the specified date format
_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field
_dynarch_popupCalendar.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.
_dynarch_popupCalendar.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(0, 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()">
<a href="http://www.dynarch.ru/projects/calendar/" title="Visit the project website">jscalendar</a>-1.0 "It is happening again"
Theme:
<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, "Aqua");">Aqua</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, "winter");">winter</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, "blue");">blue</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, "summer");">summer</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, "green");">green</a>
<a href="#" onclick="return setActiveStyleSheet(this, "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>
<a href="#" onclick="return setActiveStyleSheet(this, "system");">system</a>
<script type="text/javascript">
setActiveStyleSheet(document.getElementById("defaultTheme"), "Aqua");
</script>
|
<form action="#"> Popup examples
<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.
This is release 1.0. Works on MSIE/Win 5.0 or better (really), Opera 7+, Mozilla, Firefox, Netscape 6.x, 7.0 and all other Gecko-s, Konqueror and Safari. Starting with version 0.9.2, you can also use the keyboard to select dates (only for popup calendars; does not work with Opera 7 or Konqueror/Safari). The following keys are available:
|
Flat calendar A non-popup version will appear below as soon as the page is loaded. Note that it doesn"t show the week number.
The example above uses the </div> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <img src="" + this.pix[this.month].src + ""/> | ||||||
|---|---|---|---|---|---|---|
| " + months[this.month] + ", " + this.year + " | ||||||
| " + days[i].substring(0,3) + " | ";||||||
| "; | " + displayNum + " | ";"; | " + displayNum + " | ";|||
| < | "; calString += "< | "; calString += ""; calString += " | > | "; calString += "> | "; calString += "||
return calString;
} function getLength(){
//thirty days has September...
switch(this.month){
case 1:
if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
return 29; //leap year
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
} function changeDate(td,cal){
//Some JavaScript trickery //Change the cal argument to the existing calendar object //This is why the first argument in the constructor must match the variable name //The cal reference also allows for multiple calendars on a page cal = eval(cal); document.getElementById(cal.id + "selected").className = "days"; document.getElementById(cal.id + "selected").id = ""; td.className = "date"; td.id = cal.id + "selected"; //set the calendar object to the new date cal.dateObject.setDate(td.firstChild.nodeValue); cal = new calendar(cal.id,cal.dateObject,cal.pix); //here is where you could react to a date change - I"ll just display the formatted date alert(cal.getFormattedDate());
} function changeMonth(mo,cal){
//more trickery!
cal = eval(cal);
//The Date object is smart enough to know that it should roll over in December
//when going forward and in January when going back
cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
cal = new calendar(cal.id,cal.dateObject,cal.pix);
cal.formattedDate = cal.getFormattedDate();
document.getElementById("calContainer").innerHTML = cal.write();
}
</script> <style rel="stylesheet" type="text/css"> .month, .nav{
background-color: navy; color: white; font: 10pt sans-serif;
} .nav{
cursor: pointer; cursor: hand;
} .dayHeader{
color: black; font: 10pt sans-serif; border-bottom: 1px black solid; font-weight: bold;
} .empty{
background-color: white; border-bottom: 1px black solid;
} .days{
color: black; background-color: rgb(235,235,235);; font: 10pt sans-serif; border-bottom: 1px black solid; border-left: 1px black solid; border-right: 1px black solid; cursor: pointer; cursor: hand;
} .date{
color: maroon; font: 10pt sans-serif; font-weight: bold; border-bottom: 1px black solid; border-left: 1px black solid; border-right: 1px black solid; cursor: pointer; cursor: hand;
} </style> </head> <body> <script language="JavaScript"> //create the pix array var pix = new Array(); for(i=0; i<12; i++){
pix[i] = new Image(); pix[i].src = "patternImages/fractal" + i + ".jpg";
} //Place this script wherever you want your calendar //The first argument must match the var name var thisMonth = new calendar("thisMonth",new Date(),pix); document.write(thisMonth.write()); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/CalendarEachMonth.zip">CalendarEachMonth.zip( 135 k)</a>
Date Picker in new window
<source lang="html4strict"> <html>
<script language="JavaScript"> //Script by Denis Gritcyuk: tspicker@yahoo.ru // Title: Timestamp picker // Description: See the demo at url // URL: http://us.geocities.ru/tspicker/ // Version: 1.0 // Date: 12-05-2001 (mm-dd-yyyy) // Author: Denis Gritcyuk <denis@softcomplex.ru>; <tspicker@yahoo.ru> // Notes: Permission given to use this script in any kind of applications if // header lines are left unchanged. Feel free to contact the author // for feature requests and/or donations function show_calendar(str_target, str_datetime) {
var arr_months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; var n_weekstart = 1; // day week starts from (normally 0 or 1) var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); var dt_prev_month = new Date(dt_datetime); dt_prev_month.setMonth(dt_datetime.getMonth()-1); var dt_next_month = new Date(dt_datetime); dt_next_month.setMonth(dt_datetime.getMonth()+1); var dt_firstday = new Date(dt_datetime); dt_firstday.setDate(1); dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); var dt_lastday = new Date(dt_next_month); dt_lastday.setDate(0); // html generation (feel free to tune it for your particular application) // print calendar header var str_buffer = new String ( "<html>\n"+ "<head>\n"+ " <title>Calendar</title>\n"+ "</head>\n"+ "<body bgcolor=\"White\">\n"+"
\n"+
"
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
