Open Source Tips: 365 Day Calendar in Javascript

The makeCalendar() function accepts a year and returns a HTML table of 365 days of the year, formatted with days of week horizontally across the top and months vertically down the left.

	<html>
	<head>
	<style>
	#content {
	height:1500;
	}
	.calendar {
	background-color: #CCDDFF;
	float: left;
	height:1500;
	width:400;
	}
	td, th {
	padding:1;
	font-family:arial;
	text-align: right;
	left:10px;
	}
	#calendar2012 {align:left;}
	#calendar2013 {align:center;}
	#calendar2014 {align:right;}
	</style>
	</head>
	<body>
	<div id="content">
	<div id="calendar2012" class="calendar"></div>
	<div id="calendar2013" class="calendar"></div>
	<div id="calendar2014" class="calendar"></div>
	</div>
	<script>
	var makeCalendar = function(year) {
	var cursorDate = new Date(year, 0, 1);

	var create7DayRow = function(cellType, daySet, column1) {
	var nextRow = document.createElement("tr");
	cell = document.createElement(cellType);
	cell.appendChild(document.createTextNode(column1));
	nextRow.appendChild(cell);
	for (i = 0; i < 7; i++) {
	var cell = document.createElement(cellType);
	var dy = document.createTextNode(daySet[i]);
	cell.appendChild(dy);
	nextRow.appendChild(cell);
	}
	return nextRow;
	};

	var getNext7Days = function(jan1DayOfWeekOffset) {
	var sevenDays = ['','','','','','','',''];
	for (i = 0; i + jan1DayOfWeekOffset < 7; i++) {
	sevenDays[i + jan1DayOfWeekOffset] = cursorDate.getDate();
	cursorDate = new Date( cursorDate.getFullYear(), cursorDate.getMonth(), cursorDate.getDate() + 1 );
	}
	return sevenDays;
	};

	var get365Calendar = function(year) {
	var monthSet = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
	var weekSet = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
	var tbl, row, cell;

	tbl = document.createElement("table");
	row = create7DayRow("th", weekSet, year);
	tbl.appendChild(row);

	var jan1NextYear = new Date(year + 1, 0, 1);
	var jan1DayOfWeekOffset = cursorDate.getDay();
	while (cursorDate < jan1NextYear) {
	var sevenDays = getNext7Days( jan1DayOfWeekOffset );
	jan1DayOfWeekOffset = 0;
	row = create7DayRow("td", sevenDays, monthSet[cursorDate.getMonth()]);
	tbl.appendChild(row);
	}
	return tbl;
	};

	if (cursorDate.getFullYear() === year) {
	return get365Calendar(year);
	}
	};

	document.getElementById("calendar2012").appendChild(makeCalendar(2012));
	document.getElementById("calendar2013").appendChild(makeCalendar(2013));
	document.getElementById("calendar2014").appendChild(makeCalendar(2014));
	</script>
	</body>
	</html>

view raw makeCalendar.html hosted with ❤ by GitHub

Saturday, May 12, 2012

365 Day Calendar in Javascript