//var iNumberOfCalendarsOnPage = 0; // number of calendars on page. this is incremented in the calendar constructor.
/*
IDOfElementToPlaceCalendar: id of element to place calendar
bgColor: Background color for calendar
MonthDayColor: bgcolor if day is in this month
NonMonthDayColor: bgcolor if day is not in this month
SelectedDayColor: bgcolor of the currently selected day
TodayColor: bgcolor of today's date.
TitleColor: color for title text
DayTextColor: color for day text
InstanceName: name of global variable this calendar instance is assigned to. Needed for onclick events.*/
// to further customize the look and feel of this calendar, you can change the following class names
/*
this.TableDayClass() -- the class name of the table that is used for each day of the week. TableDayClass(value) sets and TableDayClass() gets
this.DayComponentClass() -- class name of the table cell that is in the table mentioned above.
this.DayOfWeekHeaderClass() -- the class name for day of week headers, sun, mon, etc.
this.CalButtonClass() -- the class for the buttons at the bottom.
this.CalDropClass() -- the class for the month and year drop downs.
this.LeftRightArrowsClass() -- the class for the arrows at the top to scroll thru months
or set them all on one line with a call to SetClassNames(tblDayClass, dayComponent, dayOfWeekHeader, buttonClass, dropClass, arrowsClass)
*/
function Calendar(IDOfElementToPlaceCalendar, CanPickPastYears, ResetToCurrentMonthWhenOpened, bgColor, MonthDayColor, NonMonthDayColor, SelectedDayColor, TodayColor, InstanceName, numYears) {
var self = this;
var DateStringCellID = "DATESTRING"; // id of the cell that will contain the string representation of the selected date.
// default classes for calendar.
var tableDayClass = "tableDayClass"; // class name for the table that is each day of the week.
var dayComponentClass = "dayComponentClass"; // class name for the cell in the day of week table above.
var dayOfWeekHeaderClass = "dayOfWeekHeaderClass"; // class name for the day of week headers, sun, mon etc
var calButtonClass = "calButtonClass"; // class name for the buttons.
var calDropClass = "calDropClass"; // class name for the month and year drop downs.
var leftRightArrowsClass = "leftRightArrows"; // class name for the left and right month adjustment arrows.
this.currentDate; // New date for calendar constructor
this.todayDay; // Todays day date
this.currentDay; // Current day
this.currentMonth; // Current month
this.currentYear; // Current year
this.selectedDate // Date associated with click of valid calendar cell
this.selectedDateIndex = -1; // Index associated with valid calendar cell
this.totalCalDays = 42 // Total number of cells in calendar
this.arMonthLen = new Array("31", "28", "31", "30", "31",
"30", "31", "31", "30", "31", "30", "31") // Array for days in months
this.todayTooBig = false; // if todays date bigger than max num of
// selected month (ex: today is 30th. feb only
// has 28 days. todayTooBig = true;
this.todayBackUp = 0; // backup var for if above case is true
this.Index = InstanceName.split("[")[1].split("]")[0]; // the calendar index that determines which index this calendar instance is in a collection of calendars...
this.DayTableID = "TABLECONT" + this.Index; // prefix for ID of table element that represents a day on the calendar
this.DayCellID = "DATEDAY" + this.Index; // prefix for ID of table cell that holds the numeric day date.
this.MonthDropID = "drpMonth" + this.Index; // ID of month drop down
this.YearDropID = "drpYear" + this.Index; // ID of year drop down
DefaultDateToToday();
// public properties ---------------------------------------------------------------
// set the class names to be used when calendar is built.
this.TableDayClass = function (value) { if(value == null) { return tableDayClass; } else { tableDayClass = value; } }
this.DayComponentClass = function (value) { if(value == null) { return dayComponentClass; } else { dayComponentClass = value; } }
this.DayOfWeekHeaderClass = function (value) { if(value == null) { return dayOfWeekHeaderClass; } else { dayOfWeekHeaderClass = value; } }
this.CalButtonClass = function (value) { if(value == null) { return calButtonClass; } else { calButtonClass = value; } }
this.CalDropClass = function (value) { if(value == null) { return calDropClass; } else { calDropClass = value; } }
this.LeftRightArrowsClass = function (value) { if(value == null) { return leftRightArrowsClass; } else { leftRightArrowsClass = value; } }
this.SetClassNames = function (tblDayClass, dayComponent, dayOfWeekHeader, buttonClass, dropClass, arrowsClass) {
self.TableDayClass(tblDayClass);
self.DayComponentClass(dayComponent);
self.DayOfWeekHeaderClass(dayOfWeekHeader);
self.CalButtonClass(buttonClass);
self.CalDropClass(dropClass);
self.LeftRightArrowsClass(arrowsClass);
}
// dayOfMonthOffset: distance of first day of month from Sunday.
var dayOfMonthOffset = 0;
var arMonths = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
if(numYears == null) { numYears = 20; }
// Build, present calendar
this.makeCalendar = function () {
self.getDateInfo();
document.getElementById(IDOfElementToPlaceCalendar).innerHTML = self.createHeader() + "";
self.setupCalendar();
UpdateSelectedDate();
}
// Fetch calendar template, build colors, size,
this.createHeader = function () {
return "
" +
"
" +
"
" +
"
" +
self.createToolbar() +
"
" +
"
Sun
Mon
Tue
Wed
Thu
Fri
Sat
" +
"
" +
self.createDays() +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
"" +
"" +
"
" +
"
" +
"
";
}
// Create all day cells for calendar, active and inactive
this.createDays = function () {
var iCounter = 0;
var sAllDays = "";
// each iteration = one row of days
for(var i = 0; i < 6; i++) {
sAllDays += "
";
// each iteration = one day of week in row
for(var j = 0; j < 7; j++) {
var sCounter = iCounter.toString();
sAllDays += "
" + //" + InstanceName + ".PickDate();
"
" +
"
" +
"
" +
"
" +
"
" +
"
"
iCounter++;
}
sAllDays += "
";
}
return sAllDays;
}
// Populate first day offset for month and retrieve current date, month, year
this.getDateInfo = function () {
var iBackDate = self.currentDate.getDate();
self.currentDate.setDate(1);
dayOfMonthOffset = self.currentDate.getDay();
self.currentDate.setDate(iBackDate);
self.currentDay = self.currentDate.getDate();
self.currentMonth = self.currentDate.getMonth();
self.currentYear = self.currentDate.getFullYear();
}
// Build year droplist into calendar template
this.createToolbar = function () {
var options = "";
for(var i = 0; i < arMonths.length; i++) { options += ""; }
return "
" +
"
" +
"
" +
"
" +
"
" +
"" +
"<<" +
"" +
"
" +
"
" +
"" +
"
" +
"
" +
"
" +
"" +
"
" +
"
" +
"" +
">>" +
"" +
"
" +
"
" +
"
" +
"
" +
"
";
}
// Create year droplist, return for insertion
this.createYears = function () {
var sYearOptTemp = "";
var iFirstYear = self.currentYear;
if(CanPickPastYears) { iFirstYear = iFirstYear - numYears; }
for(var i = 0; i < numYears*2; i++) {
var year = (iFirstYear + i).toString();
sYearOptTemp += "";
}
return sYearOptTemp;
}
// Populate calendar days with days of month Color code calendar. Set current day, set droplist values
this.setupCalendar = function () {
var iPrevMonthLen = self.getMonthLength(self.currentMonth - 1);
var iMonthLen = self.getMonthLength(self.currentMonth);
for(var i = 0; i < self.totalCalDays; i++) {
var dayCell = document.getElementById(self.DayCellID + i);
var dayTable = document.getElementById(self.DayTableID + i);
//is day from previous month
if(i < dayOfMonthOffset) {
dayCell.innerHTML = iPrevMonthLen - dayOfMonthOffset + i + 1;
dayTable.style.backgroundColor = NonMonthDayColor;
// is day in month
} else if(i < iMonthLen + dayOfMonthOffset) {
var iNumber = i - dayOfMonthOffset + 1;
dayCell.innerHTML = iNumber;
if(iNumber == self.currentDay) {
dayTable.style.backgroundColor = SelectedDayColor;
self.selectedDateIndex = i;
} else {
dayTable.style.backgroundColor = MonthDayColor;
}
// is day for next month
} else {
dayCell.innerHTML = i - iMonthLen - dayOfMonthOffset + 1;
dayTable.style.backgroundColor = NonMonthDayColor;
}
}
if(!self.todayTooBig && self.selectedDateIndex != (dayOfMonthOffset + self.todayDay - 1)) { document.getElementById(self.DayTableID + (dayOfMonthOffset + self.todayDay - 1)).style.backgroundColor = TodayColor; }
document.getElementById(self.MonthDropID).value = self.currentMonth;
document.getElementById(self.YearDropID).value = self.currentYear;
}
// Returns number of days in current month
this.getMonthLength = function (iMonth) {
if(iMonth < 0) { iMonth = 11; }
var iRetValue = parseInt(self.arMonthLen[iMonth]);
if(iMonth == 1 && self.currentYear % 4 == 0) { iRetValue++; }
return iRetValue;
}
// Handler for incrementing or decrementing month
// Called upon clicking << or >>
this.incrMonth = function (bool) {
var iMonth = self.currentMonth + ( bool ? 1 : -1);
var iYear = document.getElementById(self.YearDropID).value;
if(iMonth < 0) {
iYear--;
if(iYear < self.MinYear()) { return; }
iMonth = 11;
}
else if(iMonth > 11) {
iYear++;
if( iYear > self.MaxYear()) { return; }
iMonth = 0;
}
document.getElementById(self.MonthDropID).value = iMonth;
self.currentDate.setFullYear(iYear);
self.changeMonth();
}
this.MaxYear = function () {
var obj = document.getElementById(self.YearDropID);
var opt = obj.options[obj.length - 1];
return parseInt(opt.value);
}
this.MinYear = function () {
return parseInt(document.getElementById(self.YearDropID).options[0].value);
}
// Handler for changing value of month
// Called upon selecting month from droplist
this.changeMonth = function () {
self.forceDateAdjustment();
var iDay = self.currentDay;
self.currentDate.setDate(self.currentDay);
self.currentDate.setMonth(document.getElementById(self.MonthDropID).value);
self.getDateInfo();
self.currentDay = iDay;
self.selectedDate = new Date(self.currentYear, self.currentMonth, self.currentDay);
self.setupCalendar();
UpdateSelectedDate();
}
// Handler for changing value of year
// Called upon selecting year from droplist
this.changeYear = function () {
self.currentDate.setFullYear(document.getElementById(self.YearDropID).value);
self.currentDate.setDate(self.currentDay);
self.getDateInfo();
self.setupCalendar();
self.selectedDate = new Date(self.currentYear, self.currentMonth, self.currentDay);
UpdateSelectedDate();
}
// Handler for changing value of day
// Called upon clicking valid month day
this.selectDay = function(objDay) {
var iSelectedIndex = parseInt(objDay.id.replace(self.DayTableID, ""));
//if box clicked is outside bounds of the month
if (iSelectedIndex < dayOfMonthOffset || iSelectedIndex >= self.getMonthLength(self.currentMonth) + dayOfMonthOffset) {
return;
} else {
// Restore previous color
if (self.selectedDateIndex != -1) {
if (self.selectedDateIndex == dayOfMonthOffset + self.todayDay - 1) {
document.getElementById(self.DayTableID + self.selectedDateIndex).style.backgroundColor = TodayColor;
} else {
document.getElementById(self.DayTableID + self.selectedDateIndex).style.backgroundColor = MonthDayColor;
}
}
document.getElementById(self.DayTableID + iSelectedIndex).style.backgroundColor = SelectedDayColor;
}
self.currentDay = parseInt(objDay.getElementsByTagName("div")[0].innerHTML);
self.SetDate(self.currentDay, self.currentMonth, self.currentYear);
self.selectedDateIndex = iSelectedIndex;
}
// assumes mm/dd/yyyy
this.SetFullDate = function(DateString) {
if (DateString == null || DateString == "") { return; }
var ardate = DateString.split("/");
self.SetDate(ardate[1], ardate[0], ardate[2]);
}
this.SetDate = function(Day, Month, Year) {
self.currentYear = Year;
self.currentMonth = Month;
self.currentDay = Day;
self.selectedDate = new Date(self.currentYear, self.currentMonth, self.currentDay);
UpdateSelectedDate();
}
//////////////////////////////////////////////////////////////////////
// if todaydate is 30th, user clicks feb, when adjust month to
// feb it automatically goes to march cuz 30 is out of feb's bounds
// when this occurs temporarily set date to 28. if exit month, reset
// date to the correct date
//////////////////////////////////////////////////////////////////////
this.forceDateAdjustment = function () {
var iNextMonthLen = self.getMonthLength(document.getElementById(self.MonthDropID).value);
if(self.todayDay > iNextMonthLen) {
self.todayTooBig = true;
self.todayBackUp = self.todayDay;
self.todayDay = iNextMonthLen;
} else {
self.todayTooBig = false;
if(self.todayBackUp > 0) { self.todayDay = self.todayBackUp; self.todayBackUp = 0; }
}
if(self.currentDay > iNextMonthLen) { self.currentDay = iNextMonthLen; }
}
// Resets calendar to current date
this.resetCalendar = function () {
self.currentDate = new Date();
self.getDateInfo();
self.setupCalendar();
self.selectedDate = new Date(self.currentYear, self.currentMonth, self.currentDay);
}
this.PickDate = function () {
if(!CanPickPastYears) {
var testDate = new Date();
if(self.currentYear == testDate.getFullYear()) {
if(self.currentMonth < testDate.getMonth()) {
alert("You can't select a month in the past.");
return;
} else if(self.currentMonth == testDate.getMonth()) {
if(self.currentDay < testDate.getDate()) {
alert("You can't pick a date in the past.");
return;
}
}
}
}
self.DatePicked(document.getElementById(DateStringCellID + self.Index).innerHTML);
self.ShowHide();
}
this.ShowHide = function () {
var div = document.getElementById(IDOfElementToPlaceCalendar);
if(!self.Hidden()) { div.style.display = "none"; }
else {
if(ResetToCurrentMonthWhenOpened) { DefaultDateToToday(); self.setupCalendar(); UpdateSelectedDate(); }
div.style.display = "block";
}
}
this.Hidden = function () {
if(document.getElementById(IDOfElementToPlaceCalendar).style.display.toLowerCase() != "none") { return false; }
else { return true; }
}
this.DatePicked = function (sDate) {
alert ("You have selected the date " + sDate + ".\nThe method for using this data has not been set.\nPlease do so by adding a line of code such as\nInstanceName.DatePicked = function (sDate) { document.getElementById(\"txtDate\").Value = sDate; }");
}
this.Cancel = function () { document.getElementById(IDOfElementToPlaceCalendar).style.display = "none"; }
// PRIVATE METHODS --------------------------------------------------------------------------------------
function UpdateSelectedDate() {
document.getElementById(DateStringCellID + self.Index).innerHTML = parseInt(self.currentMonth + 1) + "/" + self.currentDay + "/" + self.currentYear;
}
function DefaultDateToToday() {
self.currentDate = new Date();
self.todayDay = self.currentDate.getDate();
self.currentDay = self.todayDay;
self.currentMonth = self.currentDate.getMonth();
self.currentYear = self.currentDate.getFullYear();
self.selectedDate = self.currentDate;
}
}