Calendar (pure JS, unfinished)

by James Foxlee

HTML

<div id="calendarHeader">
  <input id="backButton" type="button" name="backButton" value="<" />
  <div id="monthDisplayed"></div>
  <input id="forwardButton" type="button" name="forwardButton" value=">" />
</div>
<div id="calendarDiv"></div>

CSS

h1 {
	text-align: center;
}

/* table.formatHTML5 thead tr */ 

#calendarDiv {
	width: 80%;
	margin: auto;
}

table {
	width: 100%;
	table-layout: fixed;
	border-spacing: 1px 1px;
}

thead { }

th {
	background-color: #8C8C8C;
	
	color: white;
	font-family: "Titillium Web", sans-serif;
	font-size: 18px;
	font-style: normal;
}

tr { }

td {	
	width: 12%;
	height: 0.5em;
	
	vertical-align: middle;
	padding: 0.6em;
	font-size: 0.8em;

	color: white;
	font-family: "Titillium Web", sans-serif;
	font-size: 18px;
	font-style: normal;
	text-align: center;
	overflow: hidden;
	
	border-radius: 0em;
	-moz-border-radius: 0em;
	-webkit-border-radius: 0em;
}

td.weekDay { background-color: #8795FF; }
td.weekDay:hover { background-color: #79F281; }
td.weekDay.padding { background-color: #FF9D57; }
td.weekDay.padding:hover { background-color: #79F281; }
td.weekendDay { background-color: #576AFF; }
td.weekendDay:hover { background-color: #79F281; }
td.weekendDay.padding {	background-color: #FC7514; }
td.weekendDay.padding:hover { background-color: #79F281; }

#calendarHeader {
	width: 50%;
	margin: auto;
}

#monthDisplayed {
	display: inline;
	
	font-family: "Titillium Web", sans-serif;
	font-size: 30px;
}

JavaScript

/*******************************************
******************* MAIN *******************
********************************************/ 

// this needs tidying up

var focusMonth = null;
var focusMonthString = localStorage.getItem("focusMonthString");

if(!focusMonthString) {
	console.log("No focusMonth found in localStorage. Setting focusMonth to today");
	localStorage.clear();
	focusMonth = new Date();
}
else {
	console.log("focusMonthString from localStorage: " + focusMonthString);
	focusMonth = new Date(Date.parse(focusMonthString));
}

console.log("focusMonthString: " + focusMonthString + " focusMonth: " + focusMonth);
buildCalendar(focusMonth);

// add event handlers for back / forward buttons
	
var backButton = document.getElementById("backButton");
var forwardButton = document.getElementById("forwardButton");

backButton.addEventListener("click", function() {
	console.log("Button clicked: " + this.id);
	console.log("Focus month prior to jump: " + focusMonth);
	focusMonth = monthJump(focusMonth, -1);
	console.log("Focus month after jump: " + focusMonth);
	buildCalendar(focusMonth);
	}, 
	false);
	
forwardButton.addEventListener("click", function() {
	console.log("Button clicked: " + this.id);
	console.log("Focus month prior to jump: " + focusMonth);
	focusMonth = monthJump(focusMonth, 1);
	console.log("Focus month after jump: " + focusMonth);
	buildCalendar(focusMonth);
	}, 
	false);




/*******************************************
*********** FUNCTION DEFINITIONS ***********
********************************************/ 

function buildCalendar(date) {
	// TEMP HACK - save the date in local storage
	saveFocusMonth(date);
	
	// update the month & year title
	updateCalendarHeader(date);
	
	// *** GET MONTH-BASED DATA E.G. PADDING ***
	
	var daysInMonth = getDaysInMonth(date);
	
	// if 1st day of month isn't a Monday, we need to pad the first row; also need to pad the end
	// convert the inbuilt Sunday = 0 based index to one where Sunday = 7. We want...