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>
<tr ng-repeat="week in calModel.weeks">
<td ng-repeat="day in week track by $index">{{day}}</td>
</tr>
</tbody>
</table>
</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
function _getFirstWeekDay(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)));
} */
function _getNextMondy(date) {
var resultDate = new Date(date.getTime());
var dayOfWeek = 1; // Monday
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
var buildWeeks = function(startDate) {
var weeks = [];
var firstWeekDay = _getFirstWeekDay(startDate);
// Cycle while still in this month.
//do{
var week = new Array(5);
var day =...