calendar.js

/*
This class defines a calendar factory.
Pass a dom node as an argument for the draw() method, to insert a
calendar as a child of the passed node (this replaces the node's contents).
Constructor parameters are month, year, and optional day data.
Valid JSON data is constructed as key-pairs of "mm/dd/yyyy: value"
EXAMPLE:
{  ...
mm/dd/yyyy: value,
mm/dd/yyyy: value,
... }
*/
var Calendar = function(month, year, data) {
	this.current_date = new Date();
	this.day_labels = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
	this.month_labels = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	this.month = (isNaN(month) || month === null) ? this.current_date.getMonth() : month;
	this.year  = (isNaN(year) || year === null) ? this.current_date.getFullYear() : year;
  this.draw = function(ele){
		if (this.month > 11) {
			this.month -= 12;
			this.year += 1;
	  } else if (month < 0) {
			this.month += 12;
			this.year -= 1;
		}
		// get dates
		var startingDay = new Date(this.year, this.month, 1).getDay(),
		    endingDate = new Date(this.year, this.month + 1, 0),
		    monthLength = endingDate.getDate(),
		    inLastRow = 6 - endingDate.getDay();

		// generate header
	  this.table = document.createElement('table');
		this.head = document.createElement('thead');
		this.prev = document.createElement('th');
		this.next = document.createElement('th');
		this.title = document.createElement('th');
		this.days = document.createElement('tr');
		this.body = document.createElement('tbody');
		this.cells = '';
		this.table.setAttribute('class', 'calendar');
		this.table.appendChild(this.head);
		this.head.appendChild(this.prev);
		this.prev.innerHTML = "&laquo;";
		this.prev.id = 'prev';
		this.head.appendChild(this.title);
		this.head.appendChild(this.next);
		this.next.innerHTML = "&raquo";
		this.next.id = 'next';

		this.table.appendChild(this.days);
		this.title.innerHTML = this.month_labels[this.month] + "&nbsp;" + this.year;
		this.title.setAttribute('colspan', '5');
		this.days.setAttribute('class', 'header');
		for (var i = 0; i <= 6; i++ ) this.cells += '<td>' + this.day_labels[i] + '</td>';
		this.days.innerHTML = this.cells;

		//generate calendar
		var html = '<tr>';
		if ( startingDay ) html += '<td colspan="' + startingDay + '"></td>'; 
		for (var day = 1; day <= monthLength; day++) {
		html += '<td><div>' + day + '</div>';
		//if data argument present, append key value for current day
		if (data) {
			var today = (this.month+1)+'/'+day+'/'+this.year;
			if (data[today]) html += data[today];
		}
		html += '</td>';
		if ( (day + startingDay) % 7 === 0 && day != monthLength ) html += '</tr><tr>';
		}
		if ( inLastRow ) html += '<td colspan="' + inLastRow + '"></td>';
		html += '</tr>';
		this.table.innerHTML += html;
    ele.innerHTML = this.table.outerHTML;
		// save reference to dom node in object
		this.node = ele;
	  // save reference to calendar object for enclosure scope
		var cal = this;
    (function(){
			// save calendar object reference for listeners
			var self = this;
      self.prev.addEventListener('click', function(){
				cal.month--;
        cal.draw(cal.node);
      });
			self.next.addEventListener('click', function(){
        cal.month++;
				cal.draw(cal.node);
      });
    })();
	};
};