Super easy VanillaJS calendar

by Shang WenLong

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
  color: #333;
}

table {
  display: inline-block;
  vertical-align: top;
  margin: 1rem;
}

td {
  text-align: center;
  line-height: 1.75rem;
  width: 1.75rem;
}

thead td {
  color: #999;
  font-size: .75rem;
  text-transform: uppercase;
}

tbody td {
  font-size: .875rem;
}

tbody td:hover {
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

td.before, td.after {
  color: #999;
}

JavaScript

'use strict';
// Monday-first version: https://jsfiddle.net/pakastin/3guory3u/

for (var i = 0; i < 12; i++) {
	// create a table for month with thead & tbody
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

	// get weeks for a given month
	var calendar = createCalendar(2016, i);

	// iterate weeks
	for (var j = 0; j < calendar.length; j++) {  
  	// create table row for every week
		var tr = document.createElement('tr');
		var week = calendar[j];

		// iterate days
    for (var k = 0; k < week.length; k++) {
			// create table cell for every day
			var td = document.createElement('td');
			var day = week[k];

			// set day of month as table cell text content
			td.textContent = day.date.getDate();

			// add before/after class
			day.before && td.classList.add('before');
			day.after && td.classList.add('after');

      // mount table cell
      tr.appendChild(td);
		}
    // mount table row
		tbody.appendChild(tr);
	}

	// create thead
	thead.innerHTML = '<tr><td>' + 'Su Mo Tu We Th Fr Sa'.split(' ').join('</td><td>') + '</td></tr>';

	// mount thead & tbody
	table.appendChild(thead);
	table.appendChild(tbody);

	// mount table to body
	document.body.appendChild(table);
}

function createCalendar (year, month) {
	var results = [];
  
	// find out first and last days of the month
	var firstDate = new Date(year, month, 1);
	var lastDate = new Date(year, month + 1, 0)

  // calculate first sunday and last saturday
  var firstSunday = getFirstSunday(firstDate);
  var lastSaturday = getLastSaturday(lastDate);

	// iterate days starting from first sunday
	var iterator = new Date(firstSunday);
  var i = 0;
  
  // ..until last saturday
  while (iterator <= lastSaturday) {
		if (i++ % 7 === 0) {
    	// start new week when sunday
    	var week = [];
			results.push(week);
		}
    
    // push day to week
		week.push({
    	date: new Date(iterator),
      before: iterator <...