JSFiddle - React, Tailwind, and code Playground

by fredrik

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div data-ng-app>
    <table data-ng-controller="CalendarController" class="table">
        <tbody>
            <tr data-ng-repeat="week in calendarArray">
                <td data-ng-repeat="date in week">
                    {{ date }}
                </td>
            </tr>
        </tbody>
        <tfoooter>
            <tr>
                <td>
                        <button type="button" data-ng-click="back()">Previous</button>
                </td>
            </tr>
        </tfooter>
    </table>
</div>

JavaScript

function CalendarController ($scope) {
    function daysInMonth(date) {
        return new Date(date.getFullYear(), date.getMonth()  + 1, 0).getDate();
    }

    function getCalendarArray () {
        var i, 
            j,
            preDates = $scope.firstOfMonthDate.getDay() - 1,
            postDates = 1,
            date = 1,
            calendarArray = [],
            week;
        
        for (i = 0; i < $scope.numberOfWeeksToDisplay; i += 1) {
            week = [];
            for (j = 0; j < $scope.numberOfDays; j += 1) {
                if (preDates) {
                    week.push('p' + preDates);
                    preDates -= 1;
                } else if (date > $scope.daysInMonth) {
                    week.push(postDates);
                    postDates += 1;
                } else {
                    week.push(date);
                    date += 1;                   
                }
            }
            
            calendarArray.push(week);
        }
        
        return calendarArray;
    }

    function update () {
        $scope.daysInMonth = daysInMonth($scope.firstOfMonthDate);
        $scope.numberOfWeeksToDisplay = Math.ceil((($scope.firstOfMonthDate.getDay()) + $scope.daysInMonth) / $scope.numberOfDays);    
        $scope.calendarArray = getCalendarArray();
    }
    
    $scope.firstOfMonthDate = new Date();
    $scope.firstOfMonthDate.setDate(1);            
    
    $scope.numberOfDays = 7;

    $scope.daysInMonth = daysInMonth($scope.firstOfMonthDate);
    $scope.numberOfWeeksToDisplay = Math.ceil((($scope.firstOfMonthDate.getDay()) + $scope.daysInMonth) / $scope.numberOfDays);
    //$scope.numberOfDaysToDisplay = $scope.numberOfWeeksToDisplay * 7;
    $scope.calendarArray = getCalendarArray();
    
    $scope.back = function () {
        $scope.firstOfMonthDate.setMonth($scope.firstOfMonthDate.getMonth() - 1);
        update();        
    }
}