/*!! Epoch DHTML JavaScript Calendar - Version 2.0.2 English Edition Primary JavaScript File (c) 2006-2007 MeanFreePath Free for NON-COMMERCIAL use - see website for details and updates http://www.meanfreepath.com/javascript_calendar/index.html !!*/ /** * The main Epoch class. All publicly-accessible methods and properties are called from this class */ function Epoch(name,mode,targetelement,multiselect) { var self = this; //workaround due to varying definitions of "this" in variable scopes. see http://www.meanfreepath.com/support/epoch/epoch.html#self for details //DEFINE PRIVATE METHODS //----------------------------------------------------------------------------- /** * Declares and initializes the calendar variables. All the variables here can be safely changed * (within reason ;) by the developer */ function calConfig() { self.versionNumber = '2.0.2'; self.displayYearInitial = self.curDate.getFullYear(); //the initial year to display on load self.displayMonthInitial = self.curDate.getMonth(); //the initial month to display on load (0-11) self.displayYear = self.displayYearInitial; self.displayMonth = self.displayMonthInitial; self.minDate = new Date(2015,0,1); self.maxDate = new Date(2030,11,31); self.startDay = 0; // the day the week will 'start' on: 0(Sun) to 6(Sat) self.showWeeks = true; //whether the week numbers will be shown self.selCurMonthOnly = true; //allow user to only select dates in the currently displayed month } //----------------------------------------------------------------------------- /** * All language settings for Epoch are made here. * Check Date.dateFormat() for the Date object's language settings */ function setLang() { self.daylist = new Array('S','M','T','W','T','F','S','S','M','T','W','T','F','S'); self.months_sh = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'); self.monthup_title = 'Go to the next month'; self.monthdn_title = 'Go to the previous month'; self.clearbtn_caption = 'Clear'; self.clearbtn_title = 'Clears any dates selected on the calendar'; self.maxrange_caption = 'This is the maximum range'; self.closebtn_caption = 'Close'; self.closebtn_title = 'Close the calendar'; } //----------------------------------------------------------------------------- /** * Initializes the standard Gregorian Calendar parameters */ function setDays() { self.daynames = new Array(); var j=0; for(var i=self.startDay;i element var container = document.createElement('div'); setClass(container,'mainheading'); //create the child elements and other variables self.monthSelect = document.createElement('select'); self.yearSelect = document.createElement('select'); var monthDn = document.createElement('input'), monthUp = document.createElement('input'); var opt, i; //fill the month select box for(i=0;i<12;i++) { opt = document.createElement('option'); opt.setAttribute('value',i); if(self.displayMonth == i) { opt.setAttribute('selected','selected'); } opt.appendChild(document.createTextNode(self.months_sh[i])); self.monthSelect.appendChild(opt); } //and fill the year select box var yrMax = self.maxDate.getFullYear(), yrMin = self.minDate.getFullYear(); for(i=yrMin;i<=yrMax;i++) { opt = document.createElement('option'); opt.setAttribute('value',i); if(self.displayYear == i) { opt.setAttribute('selected','selected'); } opt.appendChild(document.createTextNode(i)); self.yearSelect.appendChild(opt); } //add the appropriate children for the month buttons monthUp.setAttribute('type','button'); monthUp.setAttribute('value','>'); monthUp.setAttribute('title',self.monthup_title); monthDn.setAttribute('type','button'); monthDn.setAttribute('value','<'); monthDn.setAttribute('title',self.monthdn_title); self.monthSelect.owner = self.yearSelect.owner = monthUp.owner = monthDn.owner = self; //hack to allow us to access self calendar in the events (??) //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. "form" can either be a pointer to the form's * DOM element or its id string. * @param mixed form * @param string inputname */ self.sendForm = function(form,inputname) { var inpname = inputname || 'epochdates', f, inp; f = (typeof(form) == 'string' ? document.getElementById(form) : form); if(!f) { alert('ERROR: Invalid form input'); return false; } 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; } //-----------------------------------------------------------------------------