calendar display staff and hours; color current day

app/app.js

@@ -6,8 +6,6 @@ var app = angular.module('app', [
     'ui.bootstrap',
     'ui.router',
     'LocalStorageModule',
-    'ngAria',
-    'ngAnimate',
     'ngMaterial',
     'appSdk'
 ]);

app/controllers/home.controller.js

@@ -4,7 +4,7 @@ angular.module('app')
 
             $scope.DataShareBusiness = DataShareBusiness;
             $scope.dateFormat = "dd MMM yyyy";
-            $scope.hourFormat = "HH:mm";
+            $scope.hourFormat = "HH'h'mm";
             $scope.courses = null;
             $scope.weekId = {
                 id: null,
@@ -24,6 +24,13 @@ angular.module('app')
                 $scope.hours.push(d);
             }
 
+            $scope.isToday = function(date)
+            {
+                var today = new Date();
+                today.setHours(0, 0, 0, 0);
+                return today.getTime() == date.getTime();
+            };
+
             $scope.getSheetCount = function()
             {
                 var sheetCount = function(group)
@@ -78,8 +85,6 @@ angular.module('app')
 
             $scope.showCourse = function(course)
             {
-                console.log(course);
-
                 $mdDialog.show(
                     $mdDialog.alert()
                         .parent(angular.element(document.querySelector('#popupContainer')))
@@ -145,4 +150,6 @@ angular.module('app')
                     $scope.loadWeeks();
                 }
             });
+
+            $scope.setDates($scope.getMonday($scope.selectedDate));
     }]);

app/less/app.less

@@ -64,6 +64,7 @@ footer {
 
 @calendar-height: 24*30px;
 @grey-color: #505050;
+@course-font-size: 12px;
 
 .day-column {
   .text-center();
@@ -84,6 +85,10 @@ footer {
   color: red;
 }
 
+.day-column-header-today {
+  color: green;
+}
+
 .day-column-header-day {
   padding-top: 5px;
 }
@@ -110,11 +115,21 @@ footer {
 
 .day-column-course-name {
   font-weight: bold;
-  font-size: 12px;
+  font-size: @course-font-size;
 }
 
 .day-column-room-name {
-  font-size: 12px;
+  font-size: @course-font-size;
+  text-decoration: underline;
+}
+
+.day-column-staff-name {
+  font-size: @course-font-size;
+  font-style: italic;
+}
+
+.day-column-course-hour {
+  font-size: @course-font-size;
 }
 
 .days-container {

app/views/home.html

@@ -25,11 +25,13 @@
             <div ng-repeat="day in days" class="col-sm-1 day-column"
                 ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
                 <div class="day-column-header day-column-header-day"
-                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
+                     ng-class="{'day-column-header-current': !isToday(day.date) && selectedDate.getTime() == day.date.getTime(),
+                                'day-column-header-today': isToday(day.date)}">
                     {{ day.day }}
                 </div>
                 <div class="day-column-header day-column-header-date"
-                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
+                     ng-class="{'day-column-header-current': !isToday(day.date) && selectedDate.getTime() == day.date.getTime(),
+                                'day-column-header-today': isToday(day.date)}">
                     {{ day.date | date : dateFormat }}
                 </div>
                 <div class="day-column-courses">
@@ -42,6 +44,10 @@
                         <div ng-repeat="room in course.RoomList">
                             <span class="day-column-room-name">{{room.Name}}</span>
                         </div>
+                        <div ng-repeat="staff in course.StaffList">
+                            <span class="day-column-staff-name">{{staff.Name}}</span>
+                        </div>
+                        <span class="day-column-course-hour">{{course.BeginDate | date : hourFormat}} - {{course.EndDate | date : hourFormat}}</span>
                     </div>
                 </div>
             </div>