Simple calendar

calendar.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;
}

calendar.js

'use strict';
// Sunday-first version: https://jsfiddle.net/pakastin/1kzbnt2v/

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>' + 'Mo Tu We Th Fr Sa Su'.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 monday and last sunday
  var firstMonday = getFirstMonday(firstDate);
  var lastSunday = getLastSunday(lastDate);

	// iterate days starting from first monday
	var iterator = new Date(firstMonday);
  var i = 0;
  
  // ..until last sunday
  while (iterator <= lastSunday) {
		if (i++ % 7 === 0) {
    	// start new week when monday
    	var week = [];
			results.push(week);
		}
    
    // push day to week
		week.push({
    	date: new Date(iterator),
      before: iterator < firstDate, // add indicator if before current month
      after: iterator > lastDate // add indicator if after current month
    });

		// iterate to next day
		iterator.setDate(iterator.getDate() + 1);
	}

  return results;
}

function fixMonday (day) {
	day || (day = 7);
  return --day;
}

function getFirstMonday (firstDate) {
	var offset = fixMonday(firstDate.getDay());

	var result = new Date(firstDate);
  result.setDate(firstDate.getDate() - offset);
	
  return result;
}

function getLastSunday (lastDate) {
	var offset = 6 - fixMonday(lastDate.getDay());
	
  var result = new Date(lastDate);
  result.setDate(lastDate.getDate() + offset);

	return result;
}