.calendar
  .header-year
  .header-month
  -['M', 'T', 'W', 'T', 'F', 'S', 'S'].each do |day|
    .day-of-week
      #{day}
  -(1..42).each do
    .day
   
View Compiled
html {
  font-size: 14.3vmin; // 1/7
}

.inverse {
  background-color: black;
  color: white;
}

.calendar {
  display: grid;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  grid-template-columns: repeat(7, auto);
  letter-spacing: -0.09em;
  line-height: 0.8;
  margin: 0 auto;
  width: 95vw;
}

.header-year,
.header-month {
  font-size: 0.3em;
  letter-spacing: -0.05em;
  margin-top: 0.3em;
  margin-bottom: 1rem;
}

.day-of-week,
.day {
  border-left: 1px solid black;
  .inverse & {
    border-left: 1px solid white;
  }
}

.header-year {
  grid-column: 5;
}

.header-month {
  grid-column: 6 / 8;
}
View Compiled
// Moment-ception to get a Moment object for the current month
// (we can use this in the future to wire up a month switcher)
var currentMonth = moment().month(moment().month());

/**
 * Inverts colours if it’s an even-numbered month
 */
function setColor () {
  if (currentMonth.format('M') % 2 === 0) {
    document.querySelector('body').classList += 'inverse';
  }
}

/**
 * Renders year and month to header
 */
function renderHeader () {

  // Get year and month strings
  var yearString = currentMonth.format('YYYY');
  var monthString = currentMonth.format('MMMM');
  
  // Get DOM nodes to populate
  var headerYear = document.querySelector('.header-year');
  var headerMonth = document.querySelector('.header-month');

  // Populate said DOM nodes with year and month strings
  headerYear.innerHTML = yearString;
  headerMonth.innerHTML = monthString;
}

/**
 * Finds the first of the month and renders the days accordingly
 */
function renderCalendar () {

  // Get the day of the week of the first so we know where to start
  // numbering our days (handily, `isoWeekday` starts from Monday)
  var firstOfMonthWeekday = currentMonth.date(1).isoWeekday();
  
  // We also need to know when to stop numbering our days
  var lastOfMonth = currentMonth.endOf('month').date();

  // NodeList of slots in our calendar
  var dateList = document.querySelectorAll('.day');

  // Lop any calendar slots before the first off our list (a NodeList
  // isn’t really an array, so we can’t use `slice` directly).
  // `firstOfMonthWeekday` is one-indexed, so we have to subtract one
  // to get the index of the first in the returned array.
  var dates = Array.prototype.slice.call(dateList, (firstOfMonthWeekday - 1));

  // Loop through date array
  for (var i = 1; i <= lastOfMonth; i++) {
    
    // Again with the subtraction to get the correct index
    dates[i - 1].innerHTML = i;
  }
}

setColor();
renderHeader();
renderCalendar();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js