JSFiddle - React, Tailwind, and code Playground

by drosen

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/mbest/knockout-repeat/master/knockout-repeat.js"></script>
<table>
    <tbody>
        <tr data-bind="repeat: { count: calWeeks, item: '$row' }">
            <td data-bind="repeat: { count: 7, item: '$col', bind: function () { if (calIsDay($row, $col)) return { css: { cal: 1 } }; } }">
                <div class="day" data-bind="text: function () { return calDay($row, $col); }"></div>
            </td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: 1px solid #ddd;
    padding: 8px;
}
.cal {
    background-color: #eee;
}
.day {
    float: right;
}

JavaScript

function ViewModel() {
    var startDate = new Date();
    startDate.setDate(1);
    startDate.setHours(0);
    startDate.setMinutes(0);
    startDate.setSeconds(0);
    startDate.setMilliseconds(0);
    var calStart = ko.observable(startDate);

    var calLastDay = ko.computed(function() {
        var date;
        date = calStart();
        date.setMonth(date.getMonth() + 1);
        date.setDate(-1);
        return date.getDate();
    });

    var getDay = function (row, col) {
        return row * 7 + col - calStart().getDay() + 1;
    };

    this.calDay = function (row, col) {
        var day = getDay(row, col);
        if (day < 1) {
            var date = calStart();
            date.setDate(-1);
            return date.getDate();
        }
        else {
            var lastDay = calLastDay();
            return day > lastDay ? day - lastDay : day;
        }
    };

    var calIsDay = this.calIsDay = function (row, col) {
        var day = getDay(row, col);
        return 1 <= day && day <= calLastDay();
    };

    this.calWeeks = ko.computed(function() {
        var weeks;
        weeks = 5;
        while (!calIsDay(weeks, 0))
            weeks--;
        return weeks + 1;
    });
}

ko.applyBindings(new ViewModel());