gistfile1.html

<div id="calendar-placeholder"></div>

<script id="calendar-widget" type="text/x-handlebars-template">

	<div class="widget calendar">
		<div class="calendar-header">
			<div class="back-arrow"><<</div>
			<div class="current-date"></div>
			<div class="forward-arrow">>></div>
		</div>

		<table class="table calendar-view">
			<tbody>
			</tbody>
		</table>
	</div>
</script>

<script>
	var calendar = $(".calendar-view");

	var today = new Date();
	var date = new Date();

	var months = [];
	months[0] = "January";
	months[1] = "February";
	months[2] = "March";
	months[3] = "April";
	months[4] = "May";
	months[5] = "June";
	months[6] = "July";
	months[7] = "August";
	months[8] = "September";
	months[9] = "October";
	months[10] = "November";
	months[11] = "December";


	function loadCalendar() {
		var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);

		var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

		var builder = "";


		var dateCounter = 1;
		firstDay = firstDay.getDay();
		builder += "<tr>";
		var weekCount = 0;
		var weeklyCounter = 0;

		for (var i = 0; i <= days + (firstDay - 1); i++) {
			if ((weekCount === 0 && firstDay <= i) || (weekCount > 0)) {
				var isToday = (date.getMonth() === today.getMonth()) && (dateCounter === date.getDate());
				builder += "<td class='" + (isToday ? "calendar-today" : "") + "'>" + dateCounter + "</td>"
				dateCounter++;
			} else {
				builder += "<td></td>"
			}
			weeklyCounter++;
			if (weeklyCounter == 7) {
				weeklyCounter = 0;
				weekCount++;
				builder += "</tr>"
				builder += "<tr>"
			}
		}
		builder += "</tr>";

		$(".calendar-view tbody").empty();
		$(".calendar-view tbody").append(builder);

		var text = months[date.getMonth()];
		if (date.getMonth() === today.getMonth()) {
			text += (" " + date.getDate() + get_nth_suffix(date.getDate()));
		}
		$(".current-date").text(text);

		var height = $(".calendar-view").innerHeight();
		var totalHeight = $(".widget.calendar").innerHeight();
		var newHeight = (totalHeight - height);
		$(".calendar-header").css("height", newHeight + "px");
		$(".calendar-header").css("line-height", newHeight + "px");

	}

	$(document).on("click", ".forward-arrow", function() {
		var month = date.getMonth();

		if (month < 11) {
			date.setMonth(month + 1);
		}

		loadCalendar();
	});

	$(document).on("click", ".back-arrow", function() {
		var month = date.getMonth();

		if (month > 0) {
			date.setMonth(month - 1);
		}

		loadCalendar();
	});

	function get_nth_suffix(date) {
		switch (date) {
			case 1:
			case 21:
			case 31:
			return 'st';
			case 2:
			case 22:
			return 'nd';
			case 3:
			case 23:
			return 'rd';
			default:
			return 'th';
		}
	}

	var source = $("#calendar-widget").html();
	var template = Handlebars.compile(source);
	$("#calendar-placeholder").html(template);
	loadCalendar();
</script>