JSFiddle - React, Tailwind, and code Playground

by Tomasz

HTML

<div id="table1" class="calendar"></div>
<div id="table2" class="calendar"></div>
<div id="table3" class="calendar"></div>

CSS

div.calendar table td {
    border: 1px solid black;
    text-align: center;
}

JavaScript

var weekday = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function renderHead(div, start, end) {
    var c_year = start.getFullYear();
    var r_year = "<tr>";
    var daysInYear = 0;

    var c_month = start.getMonth();
    var r_month = "<tr>";
    var daysInMonth = 0;

    var r_days = "<tr>";
    var r_days2 = "<tr>";
    for (start; start <= end; start.setDate(start.getDate() + 1)) {

        if (start.getFullYear() !== c_year) {
            r_year += '<td colspan="' + daysInYear + '">' + c_year + '</td>';
            c_year = start.getFullYear();
            daysInYear = 0;
        }
        daysInYear++;

        if (start.getMonth() !== c_month) {
            r_month += '<td colspan="' + daysInMonth + '">' + months[c_month] + '</td>';
            c_month = start.getMonth();
            daysInMonth = 0;
        }
        daysInMonth++;

        r_days += '<td>' + start.getDate() + '</td>';
        r_days2 += '<td>' + weekday[start.getDay()] + '</td>';
    }
    r_days += "</tr>";
    r_days2 += "</tr>";
    r_year += '<td colspan="' + (daysInYear) + '">' + c_year + '</td>';
    r_year += "</tr>";
    r_month += '<td colspan="' + (daysInMonth) + '">' + months[c_month] + '</td>';
    r_month += "</tr>";
    table = "<table>" + r_year + r_month + r_days + r_days2 + "</table>";

    div.html(table);
}
renderHead($('div#table1'), new Date(2013, 0, 20), new Date(2013, 1, 5));
renderHead($('div#table2'), new Date(2013, 11, 1), new Date(2013, 11, 31));
renderHead($('div#table3'), new Date(2013, 11, 31), new Date(2014, 0, 1));