??)
//assign the event handlers for the controls
function selectonchange() {
if(self.goToMonth(self.yearSelect.value,self.monthSelect.value)) {
self.displayMonth = self.monthSelect.value;
self.displayYear = self.yearSelect.value;
}
else {
self.monthSelect.value = self.displayMonth;
self.yearSelect.value = self.displayYear;
}
}
addEventHandler(monthUp,'click',function(){self.nextMonth();});
addEventHandler(monthDn,'click',function(){self.prevMonth();});
addEventHandler(self.monthSelect,'change',selectonchange);
addEventHandler(self.yearSelect,'change',selectonchange);
//and finally add the elements to the containing div
container.appendChild(monthDn);
container.appendChild(self.monthSelect);
container.appendChild(self.yearSelect);
container.appendChild(monthUp);
return container;
}
//
/**
* Creates the footer of the calendar - goes under the calendar cells
*/
function createFooter() {
var container = document.createElement('div');
var clearSelected = document.createElement('input');
clearSelected.setAttribute('type','button');
clearSelected.setAttribute('value',self.clearbtn_caption);
clearSelected.setAttribute('title',self.clearbtn_title);
clearSelected.owner = self;
addEventHandler(clearSelected,'click',function() {self.resetSelections(false);});
container.appendChild(clearSelected);
if(self.mode == 'popup') {
var closeBtn = document.createElement('input');
closeBtn.setAttribute('type','button')
closeBtn.setAttribute('value',self.closebtn_caption);
closeBtn.setAttribute('title',self.closebtn_title);
addEventHandler(closeBtn,'click',function(){self.hide();});
setClass(closeBtn,'closeBtn');
container.appendChild(closeBtn);
}
return container;
}
//
/**
* Creates the heading containing the day names
*/
function createDayHeading() {
//create the table element
self.calHeading = document.createElement('thead');
setClass(self.calHeading,'caldayheading');
var tr = document.createElement('tr'), th;
self.cols = new Array(false,false,false,false,false,false,false);
//if we're showing the week headings, create an empty | for filler
if(self.showWeeks) {
th = document.createElement('th');
setClass(th,'wkhead');
tr.appendChild(th);
}
//populate the day titles
for(var dow=0;dow<7;dow++) {
th = document.createElement('th');
th.appendChild(document.createTextNode(self.daynames[dow]));
if(self.selectMultiple) { //if selectMultiple is true, assign the cell a CalHeading Object to handle all events
th.headObj = new CalHeading(self,th,(dow + self.startDay < 7 ? dow + self.startDay : dow + self.startDay - 7));
}
tr.appendChild(th);
}
self.calHeading.appendChild(tr);
return self.calHeading;
}
//
/**
* Creates the table containing the calendar day cells
*/
function createCalCells() {
self.rows = new Array(false,false,false,false,false,false);
self.cells = new Array();
var row = -1, totalCells = (self.showWeeks ? 48 : 42);
var beginDate = new Date(self.displayYear,self.displayMonth,1);
var endDate = new Date(self.displayYear,self.displayMonth,self.monthDayCount[self.displayMonth]);
var sdt = new Date(beginDate);
sdt.setDate(sdt.getDate() + (self.startDay - beginDate.getDay()) - (self.startDay - beginDate.getDay() > 0 ? 7 : 0) );
//create the table element to hold the cells
self.calCells = document.createElement('tbody');
var tr,td;
var cellIdx = 0, cell, week, dayval;
for(var i=0;i= self.minDate.getTime() && sdt.getTime() <= self.maxDate.getTime());
self.cells[cellIdx] = cell;
td.cellObj = cell;
tr.appendChild(td);
self.calCells.appendChild(tr);
self.reDraw(cellIdx++); //and paint the cell according to its properties
sdt.setDate(dayval + 1); //increment the date
}
return self.calCells;
}
//
/**
* Runs all the operations necessary to change the mode of the calendar
* @param HTMLInputElement targetelement
*/
function setMode(targetelement) {
if(self.mode == 'popup') { //set positioning to absolute for popup
self.calendar.style.position = 'absolute';
}
//if a target element has been set, append the calendar to it
if(targetelement) {
switch(self.mode) {
case 'flat':
self.tgt = targetelement;
self.tgt.appendChild(self.calendar);
self.visible = true;
break;
case 'popup':
self.calendar.style.position = 'absolute';
document.body.appendChild(self.calendar);
self.setTarget(targetelement,false);
break;
}
}
else { //otherwise, add the calendar to the document.body (useful if targetelement will not be defined until after the calendar is initialized)
document.body.appendChild(self.calendar);
self.visible = false;
}
}
//
/**
* Removes the calendar table cells from the DOM (does not delete the cell objects associated with them)
*/
function deleteCells() {
self.calendar.celltable.removeChild(self.calendar.celltable.childNodes[1]); //remove the tbody element from the cell table
}
//
/**
* Sets the CSS class of the element, W3C & IE
* @param HTMLElement element
* @param string className
*/
function setClass(element,className) {
element.setAttribute('class',className);
element.setAttribute('className',className); //
}
/**
* Updates a cell's data, including css class and selection properties
* @param int cellindex
*/
function setCellProperties(cellindex) {
var cell = self.cells[cellindex];
var date;
idx = self.dateInArray(self.dates,cell.date);
if(idx > -1) {
date = self.dates[idx]; //reduce indirection
cell.date.selected = date.selected || false;
cell.date.type = date.type;
cell.date.canSelect = date.canSelect;
cell.setTitle(date.title);
cell.setURL(date.href);
cell.setHTML(date.cellHTML);
}
else {
cell.date.selected = false; //if the cell's date isn't in the dates array, set it's selected value to false
}
//make all cells lying outside the min and max dates un-selectable
if(cell.date.getTime() < self.minDate.getTime() || cell.date.getTime() > self.maxDate.getTime()) {
cell.date.canSelect = false;
}
cell.setClass();
}
//
function cal_onmouseover() {
self.mousein = true;
}
//
function cal_onmouseout() {
self.mousein = false;
}
//
/**
* Updates the calendar's selectedDates pointer array
*/
function updateSelectedDates() {
var idx = 0;
self.selectedDates = new Array();
for(i=0;i 0) { //i.e. if currently in the year
month--;
}
else { //if not, decrement the year as well
month = 11;
year--;
}
return self.goToMonth(year,month);
};
//
/**
* Sets the calendar to display the requested month/year, returning true if the
* date is within the minimum and maximum allowed dates
* @param int year
* @param int month
* @return bool
*/
self.goToMonth = function (year,month) {
var testdatemin = new Date(year, month, 31);
var testdatemax = new Date(year, month, 1);
if(testdatemin >= self.minDate && testdatemax <= self.maxDate) {
self.monthSelect.value = self.displayMonth = month;
self.yearSelect.value = self.displayYear = year;
//recreate the calendar for the new month
createCalCells();
deleteCells();
self.calendar.celltable.appendChild(self.calCells);
return true;
}
else {
alert(self.maxrange_caption);
return false;
}
};
//
/**
* Moves the calendar's position to the target element's location (popup mode only)
*/
self.updatePos = function (target) {
if(self.mode == 'popup') {
self.calendar.style.top = getTop(target) + self.topOffset + 'px';
self.calendar.style.left = getLeft(target) + self.leftOffset + 'px';
}
};
//
/**
* Displays the calendar
*/
self.show = function () {
self.updatePos(self.tgt); //update the calendar position, in case the page layout has changed since loading
self.calendar.style.display = 'block'; //'table'; // 'table' is the W3C-recommended spec, but IE isn't a fan of those
self.visible = true;
};
//
/**
* Hides the calendar
*/
self.hide = function () {
self.calendar.style.display = 'none';
self.visible = false;
};
//
/**
* Toggles (shows/hides) the calendar depending on its current state
*/
self.toggle = function () {
self.visible ? self.hide() : self.show();
};
//
/**
* Adds the array "dates" to the calendar's dates array, removing duplicate dates,
* and redraws the calendar if redraw is true
* @param array dates
* @param bool redraw
*/
self.addDates = function (dates,redraw) {
var i;
for(i=0;i -1) { //if the date is found, deselect and/or remove it from the calendar's dates array
self.dates[idx].selected = inpdates[i].selected = false;
if(self.dates[idx].type == 'normal') { //remove 'normal' dates from the dates array, since they're useless unless selected
self.dates.splice(idx,1);
}
}
}
}
//now rebuild the selectedDates pointer array
updateSelectedDates();
if(redraw != false) { //redraw the calendar if "redraw" is false or undefined
self.reDraw();
}
};
//
/**
* Adds the dates in dates as hidden inputs to the form "form". inputname
* is the name of each hidden element
* @param string form
* @param string inputname
*/
self.sendForm = function(form,inputname) {
var inp = inputname || 'epochdates';
for(var i=0;i
addEventHandler(tableCell,'mouseup',weekHeadingonclick);
}
/*****************************************************************************/
/**
* Object that holds all data & code related to a calendar cell
*/
/**
* The CalCell constructor function
* @param Epoch owner
* @param HTMLTableCellElement tableCell
* @param Date dateObj
* @param int row
* @param int week
*/
function CalCell(owner,tableCell,dateObj,row,week) {
var self = this;
//
function calCellonclick() {
if(self.date.canSelect) {
if(owner.selectMultiple == true) { //if we can select multiple cells simultaneously, add the currently selected self's date to the dates array
owner.selectDates(new Array(self.date),!self.date.selected,false);
self.setClass(); //update the current cell's style to reflect the changes - a full redraw isn't necessary
}
else { //if we can only select one date at a time
owner.selectDates(new Array(self.date),true,false,true);
if(owner.mode == 'popup') { //update the target element's value and hide the calendar if in popup mode
owner.tgt.value = self.date.dateFormat(); //use the default date format defined in dateFormat
owner.tgt.dateObj = new Date(self.date); //add a Date object to the target element for later reference
owner.hide();
}
owner.reDraw(); //redraw all the calendar cells
}
}
}
//
/**
* Replicate the CSS :hover effect for non-supporting browsers
*/
function calCellonmouseover() {
if(self.date.canSelect) {
tableCell.setAttribute('class',self.cellClass + ' hover');
tableCell.setAttribute('className',self.cellClass + ' hover');
}
}
//
/**
* Replicate the CSS :hover effect for non-supporting browsers
*/
function calCellonmouseout() {
self.setClass();
}
//
/**
* Sets the CSS class of the cell based on the specified criteria
*/
self.setClass = function ()
{
if(self.date.canSelect !== false) {
if(self.date.selected) {
self.cellClass = 'cell_selected';
}
else if(owner.displayMonth != self.date.getMonth() ) {
self.cellClass = 'notmnth';
}
else if(self.date.type == 'holiday') {
self.cellClass = 'hlday';
}
else if(self.dayOfWeek > 0 && self.dayOfWeek < 6) {
self.cellClass = 'wkday';
}
else {
self.cellClass = 'wkend';
}
}
else {
self.cellClass = 'noselect';
}
//highlight the current date
if(self.date.getUeDay() == owner.curDate.getUeDay()) {
self.cellClass = self.cellClass + ' curdate';
}
tableCell.setAttribute('class',self.cellClass);
tableCell.setAttribute('className',self.cellClass); //
};
//
/**
* Sets the cell's hyperlink, if declared
* @param string href
* @param string type ('anchor' or 'js' - default 'anchor')
*/
self.setURL = function(href,type) {
if(href) {
if(type == 'js') { //Make the WHOLE cell be a clickable link
addEventHandler(self.tableCell,'mousedown',function(){window.location.href = href;});
}
else { //make only the date number of the cell a clickable link:
var url = document.createElement('a');
url.setAttribute('href',href);
url.appendChild(document.createTextNode(self.date.getDate()));
self.tableCell.replaceChild(url,self.tableCell.firstChild); //assumes the first child of the cell DOM node is the date text
}
}
}
//
/**
* Sets the title (i.e. tooltip) that appears when a user holds their mouse cursor over a cell
* @param string titleStr
*/
self.setTitle = function(titleStr) {
if(titleStr && titleStr.length > 0) {
self.title = titleStr;
self.tableCell.setAttribute('title',titleStr);
}
};
//
/**
* Sets the internal html of the cell, using a string containing html markup
* @param string html
*/
self.setHTML = function(html) {
if(html && html.length > 0) {
if(self.tableCell.childNodes[1]) {
self.tableCell.childNodes[1].innerHTML = html;
}
else {
var htmlCont = document.createElement('div');
htmlCont.innerHTML = html;
self.tableCell.appendChild(htmlCont);
}
}
};
//
self.cellClass; //the CSS class of the cell
self.tableRow = row;
self.tableCell = tableCell;
self.date = new Date(dateObj);
self.date.canSelect = true; //whether this cell can be selected or not - always true unless set otherwise externally
self.date.type = 'normal'; //i.e. normal date, holiday, etc - always true unless set otherwise externally
self.date.selected = false; //whether the cell is selected (and is therefore stored in the owner's dates array)
self.date.cellHTML = '';
self.dayOfWeek = self.date.getDay();
self.week = week;
//assign the event handlers for the table cell element
addEventHandler(tableCell,'click', calCellonclick);
addEventHandler(tableCell,'mouseover', calCellonmouseover);
addEventHandler(tableCell,'mouseout', calCellonmouseout);
self.setClass();
}
/*****************************************************************************/
Date.prototype.getDayOfYear = function () //returns the day of the year for this date
{
return parseInt((this.getTime() - new Date(this.getFullYear(),0,1).getTime())/86400000 + 1);
};
//
/**
* Returns the week number for this date. dowOffset is the day of week the week
* "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday),
* the week returned is the ISO 8601 week number.
* @param int dowOffset
* @return int
*/
Date.prototype.getWeek = function (dowOffset) {
dowOffset = typeof(dowOffset) == 'int' ? dowOffset : 0; //default dowOffset to zero
var newYear = new Date(this.getFullYear(),0,1);
var day = newYear.getDay() - dowOffset; //the day of week the year begins on
day = (day >= 0 ? day : day + 7);
var weeknum, daynum = Math.floor((this.getTime() - newYear.getTime() - (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
//if the year starts before the middle of a week
if(day < 4) {
weeknum = Math.floor((daynum+day-1)/7) + 1;
if(weeknum > 52) {
nYear = new Date(this.getFullYear() + 1,0,1);
nday = nYear.getDay() - dowOffset;
nday = nday >= 0 ? nday : nday + 7;
weeknum = nday < 4 ? 1 : 53; //if the next year starts before the middle of the week, it is week #1 of that year
}
}
else {
weeknum = Math.floor((daynum+day-1)/7);
}
return weeknum;
};
//
Date.prototype.getUeDay = function () //returns the number of DAYS since the UNIX Epoch - good for comparing the date portion
{
return parseInt(Math.floor((this.getTime() - this.getTimezoneOffset() * 60000)/86400000)); //must take into account the local timezone
};
//
Date.prototype.dateFormat = function(format)
{
//if(!format) { // the default date format to use - can be customized to the current locale
format = 'Y-m-d';
//}
LZ = function(x) {return(x < 0 || x > 9 ? '' : '0') + x};
var MONTH_NAMES = new Array('January','February','March','April','May','June','July','August','September','October','November','December','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
var DAY_NAMES = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var result="";
var i_format=0;
var c="";
var token="";
var y=this.getFullYear().toString();
var M=this.getMonth()+1;
var d=this.getDate();
var E=this.getDay();
var H=this.getHours();
var m=this.getMinutes();
var s=this.getSeconds();
value = {
Y: y.toString(),
y: y.substring(2),
n: M,
m: LZ(M),
F: MONTH_NAMES[M-1],
M: MONTH_NAMES[M+11],
j: d,
d: LZ(d),
D: DAY_NAMES[E+7],
l: DAY_NAMES[E],
G: H,
H: LZ(H)
};
if (H==0) {value['g']=12;}
else if (H>12){value['g']=H-12;}
else {value['g']=H;}
value['h']=LZ(value['g']);
if (H > 11) {value['a']='pm'; value['A'] = 'PM';}
else { value['a']='am'; value['A'] = 'AM';}
value['i']=LZ(m);
value['s']=LZ(s);
//construct the result string
while (i_format < format.length) {
c=format.charAt(i_format);
token="";
while ((format.charAt(i_format)==c) && (i_format < format.length)) {
token += format.charAt(i_format++);
}
if (value[token] != null) { result=result + value[token]; }
else { result=result + token; }
}
return result;
};
/*****************************************************************************/
//
function addEventHandler(element, type, func) { //unfortunate hack to deal with Internet Explorer's horrible DOM event model
if(element.addEventListener) {
element.addEventListener(type,func,false);
}
else if (element.attachEvent) {
element.attachEvent('on'+type,func);
}
}
//
function removeEventHandler(element, type, func) { //unfortunate hack to deal with Internet Explorer's horrible DOM event model
if(element.removeEventListener) {
element.removeEventListener(type,func,false);
}
else if (element.attachEvent) {
element.detachEvent('on'+type,func);
}
}
//
function getTop(element) {//returns the absolute Top value of element, in pixels
var oNode = element;
var iTop = 0;
while(oNode.tagName != 'HTML') {
iTop += oNode.offsetTop || 0;
if(oNode.offsetParent) { //i.e. the parent element is not hidden
oNode = oNode.offsetParent;
}
else {
break;
}
}
return iTop;
}
//
function getLeft(element) { //returns the absolute Left value of element, in pixels
var oNode = element;
var iLeft = 0;
while(oNode.tagName != 'HTML') {
iLeft += oNode.offsetLeft || 0;
if(oNode.offsetParent) { //i.e. the parent element is not hidden
oNode = oNode.offsetParent;
}
else {
break;
}
}
return iLeft;
}
//
|