Merge pull request #79 from fbertone/eventClass

add css class in days with events, close #57

Author: gavinbarron

src/angular-material-calendar.html

@@ -17,7 +17,7 @@ <h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezon
     <!-- agenda view -->
     <md-content ng-if='weekLayout === columnWeekLayout' class='agenda'>
         <div ng-repeat='week in calendar.weeks track by $index'>
-            <div ng-if="sameMonth(day)" ng-class='{"disabled" : isDisabled(day), active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout>
+            <div ng-if="sameMonth(day)" ng-class='{"disabled" : isDisabled(day), active: active === day, "has-events": hasEvents(day) }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout>
                 <md-tooltip ng-if="::tooltips()">{{ day | date:dayTooltipFormat:timezone }}</md-tooltip>
                 <div>{{ day | date:dayFormat:timezone }}</div>
                 <div flex ng-bind-html='dataService.data[dayKey(day)]'></div>
@@ -33,7 +33,7 @@ <h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezon
             </div>
         </div>
         <div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'>
-            <div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{"disabled" : isDisabled(day), "active": isActive(day), "md-whiteframe-12dp": hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave="hover = false" ng-mouseenter="hover = true">
+            <div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{"disabled" : isDisabled(day), "active": isActive(day), "has-events": hasEvents(day), "md-whiteframe-12dp": hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave="hover = false" ng-mouseenter="hover = true">
                 <md-tooltip ng-if="::tooltips()">{{ day | date:dayTooltipFormat }}</md-tooltip>
                 <div>{{ day | date:dayFormat }}</div>
                 <div flex ng-bind-html='dataService.data[dayKey(day)]' id='{{ day | date:dayIdFormat }}'></div>

src/angular-material-calendar.js

@@ -250,7 +250,7 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
             };
 
             $scope.isDisabled = function (date,startDateOfMonth,noOfDays) {
-                if (noOfDays!=0 && angular.isDefined(noOfDays)) { 
+                if (noOfDays!=0 && angular.isDefined(noOfDays)) {
                     var dateStart = new Date($scope.calendar.year,$scope.calendar.month,startDateOfMonth);
                     var dateEnd = angular.copy(dateStart);
                     dateEnd.setDate(dateStart.getDate()+parseInt(noOfDays));
@@ -302,6 +302,11 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
                 return match;
             };
 
+            $scope.hasEvents = function (date) {
+                var data = CalendarData.data[$scope.dayKey(date)];
+                return (data && data.length > 0);
+            };
+
             $scope.prev = function () {
                 $scope.calendar.prev();
                 var data = {

src/angular-material-calendar.scss

@@ -2,6 +2,7 @@ $calendar-md-background-active: rgba(0, 0, 0, .02) !default;
 $calendar-md-shadow-active: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12) !default;
 $calendar-md-border: 1px solid rgba(0, 0, 0, .12) !default;
 $calendar-md-background-hover: rgba(0, 0, 0, .04) !default;
+$calendar-md-event-background: rgba(150, 202, 45, 1) !default;
 
 calendar-md {
 
@@ -35,6 +36,9 @@ calendar-md {
                             pointer-events: none;
                             cursor: auto;
                         }
+                        &.has-events {
+                            background-color: $calendar-md-event-background;
+                        }
                         border-bottom: $calendar-md-border;
                         // Date label.
                         :first-child {
@@ -97,6 +101,10 @@ calendar-md {
                             background: $calendar-md-background-active;
                         }
 
+                        &.has-events {
+                            background-color: $calendar-md-event-background;
+                        }
+
                         // Day number label.
                         :first-child {
                             padding: 0;