JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<p class="control-label">Available payment holidays:</p>
<em><span data-bind="text: availableMonths"></span>&nbsp;month(s), <span data-bind="visible: !isFlexible()">reoccuring annualy for the length of the agreement</span><span data-bind="visible: isFlexible()">flexible (can be changed each year for the length of the agreement)</span></em>
<div data-bind="foreach: {data: Months, as: 'month'}">
    <div data-bind="visible: $root.isFlexible() && $root.isNewYear($index())">
        <span>Year&nbsp;<span data-bind="text: month.yearNo"></span>
        </span>
    </div>
    <button type="button" data-bind="html: month.monthNo, css: $root.getCssClass($index()), attr: { disabled: !isEnabled }"></button>
</div>
<em>Numbers refer to the agreement duration, not specific months themselves</em>
<div style="padding-top: 50px">
    <label><input type="checkbox" data-bind="checked: isFlexible" />Flexible</label>
</div>

CSS

body {
    padding: 10px
}

JavaScript

function FinancePaymentHolidaysViewModel() {
    var self = this;

    self.availableMonths = 2;
    self.isFlexible = ko.observable(true);
    
    var months = [{
        monthNo: 1,
        yearNo: 1,
        isEnabled: false,
        isSelected: false
    }, {
        monthNo: 2,
        yearNo: 1,
        isEnabled: false,
        isSelected: true
    }, {
        monthNo: 3,
        yearNo: 1,
        isEnabled: true,
        isSelected: false
    }, {
        monthNo: 4,
        yearNo: 1,
        isEnabled: true,
        isSelected: true
    }, {
        monthNo: 5,
        yearNo: 2,
        isEnabled: true,
        isSelected: false
    }, {
        monthNo: 6,
        yearNo: 2,
        isEnabled: true,
        isSelected: false
    }, {
        monthNo: 7,
        yearNo: 2,
        isEnabled: true,
        isSelected: false
    }, {
        monthNo: 8,
        yearNo: 2,
        isEnabled: true,
        isSelected: true
    }];
    self.Months = ko.observableArray(months);

    self.getCssClass = function (i) {
        var cssClass = "btn";
        if (months[i].isSelected) {
            cssClass += " btn-primary active";
        }
        return cssClass;
    };

    self.toggleMonth = function (i) {
        months[i].isSelected = !months[i].isSelected;
    };

    self.isNewYear = function (i) {
        return i == 0 || months[i - 1].yearNo != months[i].yearNo;
    };
};

ko.applyBindings(new FinancePaymentHolidaysViewModel());