JS Calender

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!--------------------

11-19-2002	Made the date selected text box a read-only text box w/o borders; added style for same

---------------------->

<html>
<head>
	<title>JS Calender</title>
</head>

.monthDate {
	border: none none none none;
	border-width: 0px 0px 0px 0px;
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:transparent;
	text-align:center;
}

.currentDate {
	background-color:#FFFF00;
}

/* "box" with selected date */
.textBox {
	font-size: 9px;
	border: 0px; 	
	border-style: solid; 
	text-align:center;
}	
/* Colored bars on main menu */
/* Also used for header coloring in reports */
.css_th01 {
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:9pt;
	font-weight:bold;
	color:#FFFFFF; /* white */
	text-decoration:none;
	background-color:CC3366; /* cranberry */
	/*background-color:3399cc;  blue */
	text-align: center;
	}
/* Report row formatting; Times font; virtually white background */
.css_r04 {
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:13px;
	color:000000; /* black */
	text-decoration:none;
	background-color:EEEEEE;
	/*background-color:FFCC00;  Cars Khaki */
	text-align:top;
	}
A.css_r04:visited {
	color: 000000;
	}	
A.css_r04:link {
	color: 000000;
	}		
A.css_r04:anchor {
	color: 000000;
	}		
A.css_r04:hover {
	color: 000000;
	background-color:FFFFFF;
	}	
.table {
	border-collapse : collapse;	
	border-color : #000066 #000066 #000066 #000066; /* faint bluish gray */
	border-width:1px 1px 1px 1px;
	border-style : solid solid solid solid;	
	}
.smallType {	
	font-family : verdana,arial,helvetica,sans-serif;
	font-size : 10px;
	font-weight : normal;
	color : 000000; /* black */
	}

.test {
	font-family : verdana,arial,helvetica,sans-serif;
	font-size : 20px;
	font-variant:small-caps;
	}	
	
</style>

<h1 align="center" class="test">Calendar</h1>

<script type="text/javascript">

/*********************************************
	prevNext() 
	When user clicks the previous or next month link,
	this function is called.
	Increment/decrement as needed by looking at the 
	pulldowns; pass new values to extractInfo()
	*********************************************/
	function prevNext(x){
		var form;
		form = document.calendarForm;
		
		// get current values; month will be reset; possibly year	
		whatMonth = parseInt(form.newMonth.options[form.newMonth.selectedIndex].value);
		whatYear = parseInt(form.newYear.options[form.newYear.selectedIndex].value);		
		
		// PREVIOUS MONTH
		if (x == 'prev') {

// if NOT January (0); merely decrement month
			if (whatMonth > 0) {
				whatMonth = whatMonth -1;
				whatYear = whatYear;
			}
			// otherwise, adjust year and month
			else {
				whatMonth = 11;
				whatYear = whatYear - 1;
			}
		} // end PREVIOUS
	
		// NEXT MONTH (make it explicit, instead of "else" for future use)
		if (x == 'next') {

// if NOT December (11); merely increment month	
			if (whatMonth < 11) {
				whatMonth = whatMonth + 1;
				whatYear = whatYear;
			}
			// otherwise; adjust month and year
			else {
				whatMonth = 0;
				whatYear = whatYear + 1;
			}
		} // end NEXT
	
	
		// send values to extractInfo
		extractInfo(whatMonth,whatYear);
	
	} // end prevNext()	
	
	/*******************************************
	getInitialMonthYear()
	Onload function; sets the initial month and year
	and passes down to getMonthYear();
	*******************************************/
	function getInitialMonthYear() {
		var myInitialDate = new Date();
		var myInitialMonth = myInitialDate.getMonth();
		var myInitialYear = myInitialDate.getFullYear();
	
		//alert ("month = " + myInitialMonth + "\nyear = " + myInitialYear);
		
		// pass down to getMonthYear to set defaults
		getMonthYear(myInitialMonth,myInitialYear);
		
		
		// **************************************
		// OnLoad, default to current date 
		// (cut/comment this section out to default to first of month)
			
			// month (increment by one; array begins at zero
			myInitialMonth++;
			// get numbers to mm/dd/yyyy format
			if (myInitialMonth < 10) {
				myInitialMonth = "0" + myInitialMonth;
			}
			var myDefaultDate = myInitialDate.getDate();
			if (myDefaultDate < 10) {
				myDefaultDate = "0" + myDefaultDate;		
			}
			
			// set value
			document.calendarForm.finalSelected.value = myInitialMonth + "/" + myDefaultDate + "/" + myInitialYear;

// END OnLoad default to current date
		// **************************************
	} // end getInitialMonthYear()
	
	/*********************************************
	getMonthYear() 
	This will figure out -- for different sources --
	the current month (0-11) and year (yyyy) and pass
	down to extractInfo()
	*********************************************/
	function getMonthYear(x,y){
		var form;
		form = document.calendarForm;
		
		// if no X (month), pull it from the form
		if (!x) {
			// get Month
			whatMonth = form.newMonth.options[form.newMonth.selectedIndex].value;
			whatMonth = parseInt(whatMonth);
		}
		else {			
			whatMonth = parseInt(x);
		}
	
		// if no Y (year), pull it from the form
		if (!y) {
			// get Year
			whatYear = form.newYear.options[form.newYear.selectedIndex].value;
			whatYear = parseInt(whatYear);
		}
		else {
			whatYear = parseInt(y);
		}
		
		//	pass down to extractInfo
		extractInfo(whatMonth,whatYear);
		
	} // end getMonthYear
	
	/*********************************************
	extractInfo()
	This function builds the date objects for both
	the current month and the next month. The next
	month is necessry to calculate how many days are
	in the current month. This information is passed 
	down to dateMe() for output to table.
	Two values are passed to this function:
	1) x -- month (0-11)
	2) y -- year (yyyy)
	*********************************************/
	function extractInfo(x,y) {
		whatMonth = x;
		whatYear = y;
		
		// create a year date object
		var fullYear = new Date(whatYear,whatMonth,1,0,0,0)
		
		// find out what day of week (0-7) month starts on
		whatDay = fullYear.getDay();
				
		// figure out how many days in month
		// so create date object one month ahead
			// increment year and month if month = 11 (Dec.)
			if (whatMonth == 11 ) {
				nextMonth = 0;
				nextYear = whatYear + 1;
			}
			// otherwise, increment only month
			else {
				nextMonth = whatMonth + 1;
				nextYear = whatYear;
			}
			
			// create new full year date object
			var fullYearNext = new Date(nextYear,nextMonth,1,0,0,0);
			/*alert ("this month is " + fullYear.getMonth() +
					"\nthis date is " + fullYear.getDate() +
					"\nthis year is " + fullYear.getFullYear() +
					"\n\nnext month is " + fullYearNext.getMonth() +
					"\nnext date is " + fullYearNext.getDate() +
					"\nnext year is " + fullYearNext.getFullYear() ) */
		
		// ------------------------------------------------------
		// HOW MANY DAYS IN CURRENT MONTH?
		// do this by figuring out the millisec diff between
		// current month and next month (same timestamp) and then
		// doing calculation to get days from milliseconds)
		// --------------------------------------------------------
		var endDate = fullYearNext.getTime() - fullYear.getTime();
		endDate = Math.round(endDate / (1000 * 60 * 60 * 24));
			
		//alert (whatDay+" "+endDate+" "+ whatYear+" "+ fullYear);			
		// call dateMe to actually do the page update
		dateMe(whatDay,endDate,whatYear,fullYear);

} // end extractInfo()

/*********************************************
	dateMe()
	This function builds the actual table, based on
	four values passed down to it by extractInfo():
	1) whatDay -- day of week (0-6; Sun = 0) 1st of month falls on
	2) endDate -- How many days in month
	3) whatYear -- current year (YYYY)
	4) fullYear -- date object of current month, 1st @ 00:00:00
	*********************************************/
	function dateMe(x,y,z,theDate) {
		// set defauts
		whatDate = 1; // first of month; ALWAYS THE SAME (in my universe...)
		//whatDate = myInitialDate.getDate();
		whatDay = x; // day the first date falls on
		endDate = y; // how many days in month
		whatYear = z; // what year
		fullYear = theDate;
		
		var form;
		form = document.calendarForm;
		
		// FIRST WEEK: first populate first week; will vary from month to month
		for (var i = 0; i <= 6; i++) {
			// if the first day of month not here, blank out
			if (i < whatDay) {
				currentBlock = "form.block1" + i;
				updateDate = eval(currentBlock);
				updateDate.value = "";
			}
			// otherwise, put the date in
			else {
				currentBlock = "form.block1" + i;
				updateDate = eval(currentBlock);
				updateDate.value = whatDate;
				whatDate = whatDate + 1; // increment only if valid date	
			}
						
		} // end first week
		
		// WEEKS 2-4: Always full (21 days). Nested loop (3 weeks x 7 days per week)
		for (var i = 2; i <= 4; i++) {
			for (var j = 0; j <= 6; j++) {
				currentBlock = "form.block" + i + j;
				updateDate = eval(currentBlock);
				updateDate.value = whatDate;
				whatDate = whatDate + 1;
			} // end 7 days per week
		} // end WEEKS 2-4
		
		// WEEK 5/6: may be partially or fully populated
		for (var i = 5; i <= 6; i++) {
			// loop through each week	
			for (var j = 0; j <= 6; j++) {
				if (whatDate <= endDate) {
					currentBlock = "form.block" + i + j;
					updateDate = eval(currentBlock);
					updateDate.value = whatDate;
				}
				else {
					currentBlock = "form.block" + i + j;
					updateDate = eval(currentBlock);
					updateDate.value = "";			
				}
				whatDate = whatDate + 1; // increment in either case
			} // end per-week looping
		} // end WEEK 5/6 
		
		// set the date and year in table header
		// create array of months
		var stringMonth = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
		// set form value TEXT display
		form.monthDate.value = stringMonth[fullYear.getMonth()] + " " + fullYear.getFullYear();	
		
		// loop through months; select the correct month (in case year/prev/etc was selected)
		for (var m = 0; m <= 11; m++ ) {
			if (form.newMonth.options[m].value == fullYear.getMonth() ) {
				form.newMonth.selectedIndex = m;
				break;
			} // end if
		} // end month pull-down reset
		
		// loop through years; select the correct year (in case month/prev etc was selected)
		for (var y = 0; y <= form.newYear.length - 1; y++) {
			if (form.newYear.options[y].value == fullYear.getFullYear() ) {
				form.newYear.selectedIndex = y;
				break;
			} // end if
		} // end year pull-down reset
		
		// set the date to first of month selected
		finalMonth = fullYear.getMonth() + 1;
		// adjust month if necs
		if (finalMonth < 10) {
			finalMonth = "0" + finalMonth;
		}
		
		
		
		form.finalSelected.value = finalMonth + "/01/" + fullYear.getFullYear();
		
	} // end dateMe()

/******************************************
	User date
	Changes display depending on user selection
	(clicking on square)
	******************************************/
	function userDate(userSelection) {
		var form;
		form = document.calendarForm;
		
		// get value of selected block
		selectedDate = "form." + userSelection + ".value";
		//alert ("selected date before eval = " + selectedDate);
		selectedDate = eval(selectedDate);
		//alert ("selected Date = " + selectedDate);
		// If date is zippo (clicking on empty grid square), basically abort
		// Leave as is
		// NOTE: not "01"; next conditional takes care of all this
		if (selectedDate.length != 0) {
		
			// Good date; let's process	
			
			// format date if necessary
			if (selectedDate < 10) {
				selectedDate = "0" + selectedDate;
			} // end date format
			
			// get month from pulldown (add one; array begins at zero)
			selectedMonth = parseInt(form.newMonth.options[form.newMonth.selectedIndex].value) + 1;
			// format month if necessary
			if (selectedMonth < 10) {
				selectedMonth = "0" + selectedMonth + "";
			}
			
			// get year from pulldown
			selectedYear = parseInt(form.newYear.options[form.newYear.selectedIndex].value);
			
			// build date string
			finalSelected = selectedMonth + "/" + selectedDate + "/" + selectedYear;
			
			// write to date box
			form.finalSelected.value = finalSelected;
			
		} // end processing real date; no action for click on empty square
		
	} // end userDate()

</script>

<form name="calendarForm">
<table cellpadding=2 cellspacing=0 border=1 class="table" align="center">
	<tr class="css_th01">
		
		<td align="center">
			<input type="button" class="monthDate" size=1 value="<" name="lessThan" style="width:10px;cursor:hand;" onclick="prevNext('prev');">
			<input type="hidden" name="prevMonth">
		</td>
		
		<td colspan=5 align="center">
		<input type="text" class="monthDate" size=15 name="monthDate">
		</td>
		
		<td align="center">
			<input type="button" class="monthDate" size=1 value=">" name="greaterThan" style="width:10px;cursor:hand;" onclick="prevNext('next');">
			<input type="hidden" name="nextMonth">
		</td>
	</tr>
	<tr class="css_th01">
		<td>S</td>
		<td>M</td>		
		<td>T</td>		
		<td>W</td>		
		<td>T</td>		
		<td>F</td>		
		<td>S</td>			
	</tr>
	
	
	<script language="javascript">

var whatBlock;
		// outer loop (weeks)
		for (i = 1; i <= 6; i ++) {
		document.write("<tr>");

// Inner loop (days of week)
			for (j = 0; j <= 6; j++) {
				document.write("<td align=center onmouseover=\"this.bgColor='EEEEEE';\" onmouseout=\"this.bgColor='#ffffff';\" onmousedown=\"this.bgColor='99cc33';\" onmouseup=\"this.bgColor='EEEEEE';\">");

whatBlock = "block" + i + "" + j;
				document.write("<input type=\"button\" class=\"cal\" name=\"" + whatBlock + "\" onClick=\"userDate('" + whatBlock + " ');\"></td>");
			} // end inner (j) loop
			//</cfloop>
		document.write("</tr>");
	} // end outer (i) loop
	</script>
		
	<tr>
		<td colspan=7 align=center>
		<select name="newMonth" class="smallType" onChange="getMonthYear()">
			<option value="0">January
			<option value="1">February
			<option value="2">March
			<option value="3">April
			<option value="4">May
			<option value="5">June
			<option value="6">July
			<option value="7">August
			<option value="8">September
			<option value="9">October
			<option value="10">November
			<option value="11">December
		</select>
		<select name="newYear" class="smallType" onChange="getMonthYear()">
			<option value="2001">2001
			<option value="2002">2002
			<option value="2003">2003					
		</select>
		</td>
	</tr>
	<tr>
		<td colspan=7 align="center">
			<input type="text" name="finalSelected" size=12 maxlength=10 class="textBox" readonly>
		</td>
	</tr>
</table>
</form>
</body>
</html>

Calendar

Steal this code...