JSFiddle - React, Tailwind, and code Playground

CSS

body > div {
    float: left;
    padding: 5px;
    background: #ccf;
    width: 260px;
    height: 245px;
    margin: 5px;
}

body > div > div {
    float: left;
    text-align: center;
    width: 30px;
    height: 23px;
    border: 1px solid #000;
    padding-top: 5px;
    border-radius: 2px;
}

.month {
    width: 254px;
    height: 25px;
}

.nextMonth,
.prevMonth {
    color: #999;
    background-color: #ccf;
}

.weekLabel {
    background-color: #aad;
}

.dayLabel {
    background-color: #88a;
}

JavaScript

window.module = {}; // so commonJS logic won't throw
var labelsISO = ['w.', 'm', 't', 'w', 't', 'f', 's', 's'];
var labelsUS = ['w.', 's', 'm', 't', 'w', 't', 'f', 's'];
var monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
];

function loadJS(file, cb) {
    var jsFile = document.createElement('script');
    jsFile.type = 'text/javascript';
    jsFile.onload = cb;
    jsFile.src = file;
    document.querySelector('head').appendChild(jsFile);
}


loadJS('https://rawgit.com/SergioCrisostomo/js-calendar/master/src/jsCalendar.js', function() {
    var jsCal = getMonthCalender.bind({
        weekStart: 0
    });
    var year = 2016;
    for (var i = 0; i < 12; i++) {
        var div = document.createElement('div');
        var month = monthNames[i];
        var monthDiv = document.createElement('div');
        monthDiv.className = 'month';
        monthDiv.innerHTML = month + ' - ' + year;
        div.appendChild(monthDiv);
        jsCal(year, i).cells.forEach(function(cell, c) {
            var label = cell.format == 'ISO 8601' ? labelsISO[c % 8] : labelsUS[c % 8];
            var cellDiv = document.createElement('div');
            cellDiv.innerHTML = c > 7 ? cell.desc : label;
            cellDiv.className = cell.type;
            div.appendChild(cellDiv);
        });
        document.body.appendChild(div);
    }
});