Super easy VanillaJS calendar

CSS

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

div {
  display: inline-block;
  margin: 1rem;
  text-align: center;
  line-height: 2;
}

div p {
  font-weight: 300;
}

table {
  display: inline-block;
  vertical-align: top;
  border-collapse: collapse;
}

tbody tr:hover {
  background-color: #fff;
}

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/

var MONTH_NAMES = 'January February March April May June July August September October November December'.split(' ');

var YEAR = (new Date()).getFullYear();

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

	// get weeks for a given month
	var calendar = createCalendar(YEAR, 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 month name
  p.textContent = MONTH_NAMES[i];

	// 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 month name to container
  div.appendChild(p);

  // mount table to container
  div.appendChild(table);

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

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...