Skip to content

Instantly share code, notes, and snippets.

@jamesona jamesona/calendar.js
Last active Aug 29, 2015

Embed
What would you like to do?
/*
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);
});
})();
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.