AngularJs - Build Calendar
by douglasloyo
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
<div ng-repeat="d in data" ng-if="$even">
{{d.DisplayOrder}}
</div>
<div ng-repeat="d in data" ng-if="$odd">
{{d.DisplayOrder}}
</div>
<table id="calendar" border="1">
<thead>
<tr><th colspan="5">{{calModel.monthName}}</th></tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody></tbody>
</table>
<span>{{calModel.monthName}}</span>
<span>{{calModel.endDate}}</span>
<span>FirstWeekDay: {{calModel.firstWeekDay}}</span>
</div>
</div>
JavaScript
/* Application */
var myApp = angular.module('myApp', []);
myApp.controller('homeController', function ($scope) {
var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
var weekNames = [
{id:0, short:"Sun", day:"Sunday"},
{id:1, short:"Mon", day:"Monday"},
{id:2, short:"Tue", day:"Tuesday"},
{id:3, short:"Wed", day:"Wednesday"},
{id:4, short:"Thu", day:"Thursday"},
{id:5, short:"Fri", day:"Friday"},
{id:6, short:"Sat", day:"Saturday"}
];
$scope.info = "Algo";
$scope.model = {
date:{ id:1, date: new Date(2018, 07, 01) },
events:[
{id:1, date: new Date(2018, 07, 07)}
]
};
// Gets the first day of the month that fall between M-F
var getFirstWeekDay = function(datee){
var date = new Date(datee.valueOf());
// If Sunday then add 1 day
if(date.getDay()==0)
date.setDate(date.getDate() + 1);
// If Saturday then add 2 days
if(date.getDay()==6)
date.setDate(date.getDate() + 2);
return date;
};
function _numDaysBetween(firstDate, secondDate) {
// The number of milliseconds in one day (hours*minutes*seconds*milliseconds)
var oneDay = 1000 * 60 * 60 * 24
return Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
}
var buildWeeks = function(calModel) {
var weeks = [];
var week = new Array(5);
var day = calModel.firstWeekDay.getDate();
for(var i=calModel.firstWeekDay.getDay();i<6;i++)
{
var date = new Date(calModel.startDate.getFullYear(), calModel.startDate.getMonth(), day);
week[i] = date.getDate();
day++;
}
weeks.push(week);
console.log(weeks);
};
// Build Calendar Model
var startDate =...