Merge branch 'master' into master

Author: diegodalbosco

README.md

@@ -110,6 +110,41 @@ angular.module("materialExample").controller("calendarCtrl", function($scope, $f
 });
 ```
 
+### Localization
+
+The localization of the calendar is straightforward and follows the standard Angular
+localization process described in the [guide](https://docs.angularjs.org/guide/i18n).
+You can find the list of natively supported locales [here](https://github.com/angular/angular.js/tree/master/src/ngLocale).
+
+To translate the calendar, just include the correct localization file in your web page, 
+right after the inclusion of angular.js.
+You can install it by downloading the file manually or using either npm or bower to automate
+the download.
+
+```bash
+npm install angular-i18n
+```
+
+or
+
+```bash
+bower install angular-i18n
+```
+
+Then use the script tag to include the translations (for example, for spanish locale):
+
+```html
+<script src="bower_components/angular-i18n/angular-locale_es-es.js"></script>
+```
+
+Another option is to use directly a CDN like [cdnjs](https://cdnjs.com/libraries/angular-i18n):
+
+```html
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.7/angular-locale_es-es.js"></script>
+```
+
+That's all, now the calendar will be automatically translated in the language of you choice.
+
 ## Hacking On It
 
 Use gulp to spin up the server and re-compile resources on the fly. The

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 compile='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 compile='dataService.data[dayKey(day)]' id='{{ day | date:dayIdFormat }}'></div>

src/angular-material-calendar.js

@@ -264,7 +264,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));
@@ -316,6 +316,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 = {
@@ -390,7 +395,7 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
                     return $templateRequest($scope.templateUrl);
                 }
 
-                return $q.resolve($scope.template() || defaultTemplate);
+                return $q.when($scope.template() || defaultTemplate);
             };
 
 

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;