JSFiddle - React, Tailwind, and code Playground

by Adrian Mejias

HTML

<div id="debug"></div>
<ul id="absolute-list"></ul>
<ul id="relative-list"></ul>

JavaScript

var budget = {
    start: '2013-09-01',
    end: '2013-10-01',
    amount: 2956.00,
    category: [{
        id: 1,
        name: 'Auto and Gas'
    }, {
        id: 2,
        name: 'Flat'
    }],
    // day = day of the month
    absolute: [{
        category_id: 2,
        day: 30,
        amount: 780.00,
        note: ''
    }],
    // frequency = frequency in days
    relative: [{
        category_id: 1,
        frequency: 14,
        amount: 30.00,
        note: ''
    }]
};
var model = {
    months: [{
        id: 1,
        name: 'January',
        abbr: 'Jan'
    }, {
        id: 2,
        name: 'February',
        abbr: 'Feb'
    }, {
        id: 3,
        name: 'March',
        abbr: 'Mar'
    }, {
        id: 4,
        name: 'April',
        abbr: 'Apr'
    }, {
        id: 5,
        name: 'May',
        abbr: 'May'
    }, {
        id: 6,
        name: 'June',
        abbr: 'Jun'
    }, {
        id: 7,
        name: 'July',
        abbr: 'Jul'
    }, {
        id: 8,
        name: 'August',
        abbr: 'Aug'
    }, {
        id: 9,
        name: 'September',
        abbr: 'Sep'
    }, {
        id: 10,
        name: 'October',
        abbr: 'Oct'
    }, {
        id: 11,
        name: 'November',
        abbr: 'Nov'
    }, {
        id: 12,
        name: 'December',
        abbr: 'Dec'
    }]
};
var helpers = {
    getMonths: function (DisplayFrom, DisplayTo) {
        var df = {
            month: DisplayFrom.getMonth(),
            year: DisplayFrom.getFullYear()
        };
        var dt = {
            month: DisplayTo.getMonth(),
            year: DisplayTo.getFullYear()
        };
        if (df.month == dt.month && df.year == dt.year) {
            return 1;
        }
        return dt.month - df.month + (12 * (dt.year - df.year));
    },
    getMonthDays: function (Display) {
        var d = new Date(Display.getFullYear(), Display.getMonth() + 1, 0);
        return d.getDate();
    }
};
var months = helpers.getMonths(
new Date(2013, 9,...