JSFiddle - React, Tailwind, and code Playground

by nocturnesound

HTML

<div ng-app="app">
    <div ng-init="year=2013;month=11;">
        <button ng-click="month = month - 1">-1</button>
        <button ng-click="month = month + 1">+1</button>
        <calendar year="year" month="month"></calendar>
    </div>
</div>

JavaScript

angular.module('app', [])
    .directive('calendar', function () {
    return {
        scope: {
            year: '=',
            month: '='
        },
        restrict: 'E',
        replace: true,
        template: '<div><div>{{date}}</div><table>'
        + '<tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr>'
        + '<tr ng-repeat="week in weeks">'
        + '<td ng-repeat="day in days">{{getDay(week*7+day)}}</td>'
        + '</tr></talbe></div>',
        controller: function ($scope) {
            var min = 0,
                max = 0;

            $scope.days = [1, 2, 3, 4, 5, 6, 7];

            $scope.$watch("year+month", function () {
                var date = new Date($scope.year, $scope.month-1, 1);
                var weeks = $scope.weeks = [0, 1, 2, 3];
                var day = date.getDay();
                if (day == 0) {
                    day = 7;
                }
                
                min = day-1;
                max = new Date($scope.year, $scope.month, 0).getDate();

                if ($scope.month != 2 || day > 1) {
                    weeks.push(4);
                    if( max == 31 && day > 6 ){
                        weeks.push(5);
                    }
                }
                $scope.date = date.toString();
            });

            $scope.getDay = function (day) {
                day -= min;
                return day > 0 && day <= max ? day : '';
            };
        }
    }
});