Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<div class="row" style="text-align:center;background-color: #930d14; color: white; height: 155px;">
<div class="col" style="border-right: solid 1px #820d13;">
<p style="transform: rotate(270deg);margin-top: 8px;font-size: 10px;font-weight: 600;text-transform: uppercase;">
{{currentMonth}}</p>
</div>
<div class="col" style="border-right: solid 1px #820d13;" ng-model="selectedDate" ng-repeat="days in totalDays">
<p style="font-size: 10px;font-weight: 500;">{{days}}</p>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
function GetDates(startDate, daysToAdd) {
var aryDates = [];
$scope.set = false;
for(var i = 0; i <= daysToAdd; i++) {
var currentDate = new Date();
$scope.currentMonth= MonthAsString(currentDate.getMonth());
currentDate.setDate(startDate.getDate() + i);
$scope.newMonth= MonthAsString(currentDate.getMonth());
if($scope.newMonth != $scope.currentMonth){
console.log( $scope.newMonth);
$scope.set = true;
}
aryDates.push(DayAsString(currentDate.getDay()) + " " + currentDate.getDate() + " " );
}
return aryDates;
}
function MonthAsString(monthIndex) {
var d=new Date();
var month=new Array();
month[0]="Jan";
month[1]="Feb";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
return month[monthIndex];
}
function DayAsString(dayIndex) {
var weekdays = new Array(7);
weekdays[0] = "SUN";
weekdays[1] = "MON";
weekdays[2] = "TUE";
weekdays[3] = "WED";
weekdays[4] = "THU";
weekdays[5] = "FRI ";
weekdays[6] = "SAT";
return weekdays[dayIndex];
}
var startDate = new Date();
var aryDates = GetDates(startDate, 7);
console.log(aryDates);
$scope.totalDays = aryDates;
}