torsak/index.html

## index.html
<!DOCTYPE html>
<html ng-app="TorApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.calendar .row:after {
  display: table;
  content: " ";
  clear: both;
}
.calendar .row .col {
  width: 14.285%;
  float: left;
  text-align: center;
  line-height: 30px;
}
.calendar .controls {
  text-align: center;
}
</style>
</head>
<body ng-controller="CalCtrl">

  <div class="calendar">
    <div ng-repeat="week in datesGroupedByWeek" class="row">
      <div ng-repeat="date in week" class="col">{{date}}</div>
    </div>
    <div class="controls">
      <button ng-click="prev()">Prev</button>
      <button ng-click="today()">Today</button>
      <button ng-click="next()">Next</button>
    </div>
  </div>
<script id="jsbin-javascript">
var KDApp = angular.module('TorApp', []);

KDApp.controller('CalCtrl', function($scope) {
  var current = new Date();
  current.setDate(1);

  $scope.today = function() {
    current = new Date();
    current.setDate(1);
    refresh();
  };

  $scope.prev = function() {
    current.setMonth(current.getMonth() - 1);
    refresh();
  };

  $scope.next = function() {
    current.setMonth(current.getMonth() + 1);
    refresh();
  };

  var refresh = function() {
    $scope.datesGroupedByWeek = getDates(current);
  };

  $scope.today();

});

var getDates = function(startDate) {
  var current = new Date(startDate);
  var prevMonthDateCount = current.getDay();
  current.setDate(current.getDate() - prevMonthDateCount);

  var dates = [];
  var i;
  for (i = 0; i < 42; i++) {
    dates[i] = new Date(current);
    current.setDate(current.getDate() + 1);
  }

  var datesGroupedByWeek = [];
  var week = [];
  for (i = 0; i < 42; i++) {
    week.push(dates[i].getDate());
    if (0 === ((i + 1) % 7)) {
      datesGroupedByWeek.push(week);
      week = [];
    }
  }
  return datesGroupedByWeek;
};

// Leap year has an additional day in Feb
var isLeapYear = function(year) {
  return ((year % 400 === 0) || ((year % 4 === 0) && (year % 100 !== 0)));
};
</script>


<script id="jsbin-source-css" type="text/css">.calendar {
  .row {
    &:after {
      display: table;
      content: " ";
      clear: both;
    }
    .col {
      width: 14.285%;
      float: left;
      text-align: center;
      line-height: 30px;
    }
  }
  .controls {
    text-align: center;
  }
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">var KDApp = angular.module('TorApp', []);

KDApp.controller('CalCtrl', function($scope) {
  var current = new Date();
  current.setDate(1);

  $scope.today = function() {
    current = new Date();
    current.setDate(1);
    refresh();
  };

  $scope.prev = function() {
    current.setMonth(current.getMonth() - 1);
    refresh();
  };

  $scope.next = function() {
    current.setMonth(current.getMonth() + 1);
    refresh();
  };

  var refresh = function() {
    $scope.datesGroupedByWeek = getDates(current);
  };

  $scope.today();

});

var getDates = function(startDate) {
  var current = new Date(startDate);
  var prevMonthDateCount = current.getDay();
  current.setDate(current.getDate() - prevMonthDateCount);

  var dates = [];
  var i;
  for (i = 0; i < 42; i++) {
    dates[i] = new Date(current);
    current.setDate(current.getDate() + 1);
  }

  var datesGroupedByWeek = [];
  var week = [];
  for (i = 0; i < 42; i++) {
    week.push(dates[i].getDate());
    if (0 === ((i + 1) % 7)) {
      datesGroupedByWeek.push(week);
      week = [];
    }
  }
  return datesGroupedByWeek;
};

// Leap year has an additional day in Feb
var isLeapYear = function(year) {
  return ((year % 400 === 0) || ((year % 4 === 0) && (year % 100 !== 0)));
};</script></body>
</html>

## jsbin.qihaza.css
.calendar .row:after {
  display: table;
  content: " ";
  clear: both;
}
.calendar .row .col {
  width: 14.285%;
  float: left;
  text-align: center;
  line-height: 30px;
}
.calendar .controls {
  text-align: center;
}

## jsbin.qihaza.js
var KDApp = angular.module('TorApp', []);

KDApp.controller('CalCtrl', function($scope) {
  var current = new Date();
  current.setDate(1);

  $scope.today = function() {
    current = new Date();
    current.setDate(1);
    refresh();
  };

  $scope.prev = function() {
    current.setMonth(current.getMonth() - 1);
    refresh();
  };

  $scope.next = function() {
    current.setMonth(current.getMonth() + 1);
    refresh();
  };

  var refresh = function() {
    $scope.datesGroupedByWeek = getDates(current);
  };

  $scope.today();

});

var getDates = function(startDate) {
  var current = new Date(startDate);
  var prevMonthDateCount = current.getDay();
  current.setDate(current.getDate() - prevMonthDateCount);

  var dates = [];
  var i;
  for (i = 0; i < 42; i++) {
    dates[i] = new Date(current);
    current.setDate(current.getDate() + 1);
  }

  var datesGroupedByWeek = [];
  var week = [];
  for (i = 0; i < 42; i++) {
    week.push(dates[i].getDate());
    if (0 === ((i + 1) % 7)) {
      datesGroupedByWeek.push(week);
      week = [];
    }
  }
  return datesGroupedByWeek;
};

// Leap year has an additional day in Feb
var isLeapYear = function(year) {
  return ((year % 400 === 0) || ((year % 4 === 0) && (year % 100 !== 0)));
};
	<!DOCTYPE html>
	<html ng-app="TorApp">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.calendar .row:after {
	display: table;
	content: " ";
	clear: both;
	}
	.calendar .row .col {
	width: 14.285%;
	float: left;
	text-align: center;
	line-height: 30px;
	}
	.calendar .controls {
	text-align: center;
	}
	</style>
	</head>
	<body ng-controller="CalCtrl">

	<div class="calendar">
	<div ng-repeat="week in datesGroupedByWeek" class="row">
	<div ng-repeat="date in week" class="col">{{date}}</div>
	</div>
	<div class="controls">
	<button ng-click="prev()">Prev</button>
	<button ng-click="today()">Today</button>
	<button ng-click="next()">Next</button>
	</div>
	</div>
	<script id="jsbin-javascript">
	var KDApp = angular.module('TorApp', []);

	KDApp.controller('CalCtrl', function($scope) {
	var current = new Date();
	current.setDate(1);

	$scope.today = function() {
	current = new Date();
	current.setDate(1);
	refresh();
	};

	$scope.prev = function() {
	current.setMonth(current.getMonth() - 1);
	refresh();
	};

	$scope.next = function() {
	current.setMonth(current.getMonth() + 1);
	refresh();
	};

	var refresh = function() {
	$scope.datesGroupedByWeek = getDates(current);
	};

	$scope.today();

	});

	var getDates = function(startDate) {
	var current = new Date(startDate);
	var prevMonthDateCount = current.getDay();
	current.setDate(current.getDate() - prevMonthDateCount);

	var dates = [];
	var i;
	for (i = 0; i < 42; i++) {
	dates[i] = new Date(current);
	current.setDate(current.getDate() + 1);
	}

	var datesGroupedByWeek = [];
	var week = [];
	for (i = 0; i < 42; i++) {
	week.push(dates[i].getDate());
	if (0 === ((i + 1) % 7)) {
	datesGroupedByWeek.push(week);
	week = [];
	}
	}
	return datesGroupedByWeek;
	};

	// Leap year has an additional day in Feb
	var isLeapYear = function(year) {
	return ((year % 400 === 0) \|\| ((year % 4 === 0) && (year % 100 !== 0)));
	};
	</script>


	<script id="jsbin-source-css" type="text/css">.calendar {
	.row {
	&:after {
	display: table;
	content: " ";
	clear: both;
	}
	.col {
	width: 14.285%;
	float: left;
	text-align: center;
	line-height: 30px;
	}
	}
	.controls {
	text-align: center;
	}
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">var KDApp = angular.module('TorApp', []);

	KDApp.controller('CalCtrl', function($scope) {
	var current = new Date();
	current.setDate(1);

	$scope.today = function() {
	current = new Date();
	current.setDate(1);
	refresh();
	};

	$scope.prev = function() {
	current.setMonth(current.getMonth() - 1);
	refresh();
	};

	$scope.next = function() {
	current.setMonth(current.getMonth() + 1);
	refresh();
	};

	var refresh = function() {
	$scope.datesGroupedByWeek = getDates(current);
	};

	$scope.today();

	});

	var getDates = function(startDate) {
	var current = new Date(startDate);
	var prevMonthDateCount = current.getDay();
	current.setDate(current.getDate() - prevMonthDateCount);

	var dates = [];
	var i;
	for (i = 0; i < 42; i++) {
	dates[i] = new Date(current);
	current.setDate(current.getDate() + 1);
	}

	var datesGroupedByWeek = [];
	var week = [];
	for (i = 0; i < 42; i++) {
	week.push(dates[i].getDate());
	if (0 === ((i + 1) % 7)) {
	datesGroupedByWeek.push(week);
	week = [];
	}
	}
	return datesGroupedByWeek;
	};

	// Leap year has an additional day in Feb
	var isLeapYear = function(year) {
	return ((year % 400 === 0) \|\| ((year % 4 === 0) && (year % 100 !== 0)));
	};</script></body>
	</html>