curtismitchell/calendar.htm

## calendar.htm
<html>
	<head>
		<title>Calendar	Test</title>
		<style>

			body { width: 320; height: 480; margin: 20, auto; }
			#calWrapper { width: 100%; margin: 0 5; border: 1px solid #ccc; }
			.dayCell { width: 40px; height: 40px; font-size: 11px; vertical-align: top; text-align: right; background-color: aliceblue;}
			.dayHeader {
				width: 40px;
				height: 20px;
				background-color: #ddd;
			}
			.today { border: 2px solid blue;}
		</style>

	</head>

	<body>
	<h3>Month view for <span id="dateHolder" /></h3>

	<table id="calWrapper">
	</table>

	<script type="text/javascript">
		(function(){
			var today = new Date();
			var month,day,year,firstDay;
			month = today.getMonth();
			day = today.getDate();
			year = today.getFullYear();

			firstDay = new Date(year,month,1);

			var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
			var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

			function displayDate() {
				var holder = document.getElementById("dateHolder");
				holder.innerText = months[month] + ' ' + year;
			}

			function createDayHeaders() {
				var wrapper = document.getElementById("calWrapper");
				var row = document.createElement("tr");
				for(var i = 0; i<days.length; i++) {
					var el = document.createElement("th");
					el.setAttribute("class","dayHeader");
					el.innerText = days[i];
					row.appendChild(el);
				}
				wrapper.appendChild(row);
			}

			function createDayCells() {
				var dayOne = firstDay.getDay();
				var iDay = 0;

				var wrapper = document.getElementById("calWrapper");
				var lastDay = new Date(year,month+1,0).getDate();

				while(iDay < lastDay) {
					var row = document.createElement("tr");
					for(var i = 0; i<days.length; i++) {
						var el = document.createElement("td");

						if(dayOne === i || iDay > 0) {
							if(day === iDay)
								el.setAttribute("class", "dayCell today");
							else
								el.setAttribute("class", "dayCell");

							if(iDay < lastDay)
								iDay++;
							else
								break;
							el.innerText = iDay;
						}
						row.appendChild(el);
					}
					wrapper.appendChild(row);
				}
			}

			displayDate(today);
			createDayHeaders();
			createDayCells();
		})();
	</script>
	</body>
</html>
	<html>
	<head>
	<title>Calendar Test</title>
	<style>

	body { width: 320; height: 480; margin: 20, auto; }
	#calWrapper { width: 100%; margin: 0 5; border: 1px solid #ccc; }
	.dayCell { width: 40px; height: 40px; font-size: 11px; vertical-align: top; text-align: right; background-color: aliceblue;}
	.dayHeader {
	width: 40px;
	height: 20px;
	background-color: #ddd;
	}
	.today { border: 2px solid blue;}
	</style>

	</head>

	<body>
	<h3>Month view for <span id="dateHolder" /></h3>

	<table id="calWrapper">
	</table>

	<script type="text/javascript">
	(function(){
	var today = new Date();
	var month,day,year,firstDay;
	month = today.getMonth();
	day = today.getDate();
	year = today.getFullYear();

	firstDay = new Date(year,month,1);

	var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
	var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

	function displayDate() {
	var holder = document.getElementById("dateHolder");
	holder.innerText = months[month] + ' ' + year;
	}

	function createDayHeaders() {
	var wrapper = document.getElementById("calWrapper");
	var row = document.createElement("tr");
	for(var i = 0; i<days.length; i++) {
	var el = document.createElement("th");
	el.setAttribute("class","dayHeader");
	el.innerText = days[i];
	row.appendChild(el);
	}
	wrapper.appendChild(row);
	}

	function createDayCells() {
	var dayOne = firstDay.getDay();
	var iDay = 0;

	var wrapper = document.getElementById("calWrapper");
	var lastDay = new Date(year,month+1,0).getDate();

	while(iDay < lastDay) {
	var row = document.createElement("tr");
	for(var i = 0; i<days.length; i++) {
	var el = document.createElement("td");

	if(dayOne === i \|\| iDay > 0) {
	if(day === iDay)
	el.setAttribute("class", "dayCell today");
	else
	el.setAttribute("class", "dayCell");

	if(iDay < lastDay)
	iDay++;
	else
	break;
	el.innerText = iDay;
	}
	row.appendChild(el);
	}
	wrapper.appendChild(row);
	}
	}

	displayDate(today);
	createDayHeaders();
	createDayCells();
	})();
	</script>
	</body>
	</html>