https://i.sstatic.net/OHFFF.png
My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Currently, the holiday highlight (purple) is overriding the yellow highlight, but I need the yellow highlight to show up for 7/5 as 7/4 is a holiday.
The business rule behind these highlighting rules is that the first day and the last day of a 10-day period will be highlighted in yellow. If either the first or last day falls on a holiday, the highlight needs to shift to the next day.
I could use some guidance on how to achieve this adjustment. I don't require a complete answer, just a push in the right direction would be helpful.
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/domo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="rcr_sched" ng-controller="main">
<div id="mydiv">
<table>
<tr id="printc"><button id="print" class="fa fa-print fa-3x" onclick="print('#mydiv')"></button>
<button id="print2" onclick="print('#mydiv')">Print Page</button>
<button id="today">Today/SLDD</button>
<button id="PTO">PTO</button>
<button id="Hol">Hol</button>
</tr>
<tr height="40" id="header">
<th ng-repeat="prop in columns">{{prop.date}}</th>
</tr>
<tr ng-repeat="r in data">
<td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title]) || isHol(prop2.title, 'Hol' + prop2.title, r['Hol' + prop2.title])}}">
{{r[prop2.title]}}
</td>
</tr>
</table>
<hr id="end">
</div>
</body>
</html>
App.js
var app = angular.module('rcr_sched',['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/',{
templateUrl:'index.html',
controller:'main'
})
.when('drill',{
templateUrl:'drill.html'
})
// .otherwise({redirectTo: '/'});
}
]);
//Range Error: Maximum call stack size exceeded
app.controller('main', ['$scope', '$location', function ($scope, $location){
$scope.goNext = function(view){
$location.path('/');
}
$scope.data = [];
$scope.columns = [];
$... (Remaining content shortened due to space limitations)
});
App.css
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: xx-small;
-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
}
a{
color: black;
text-align: center;
padding-left: 15px
}
... (Remaining content shortened for brevity)
@media print{
#print{
display: none;
}
#print2{
display: none;
}
#link{
display: none;
}
}