Fixes issue #18 bad dates

Author: Brad Berger

.eslintrc

@@ -1,17 +1,15 @@
-rules:
-  indent:
-    - 2
-  quotes:
-    - 2
-    - double
-  linebreak-style:
-    - 2
-    - unix
-  semi:
-    - 2
-    - always
-globals:
-  angular: false
-env:
-  browser: true
-extends: 'eslint:recommended'
+{
+    "rules": {
+        "indent": [2],
+        "quotes": [2, "double"],
+        "linebreak-style": [2, "unix"],
+        "semi": [2, "always"]
+    },
+    "globals": {
+        "angular": false
+    },
+    "env": {
+        "browser": true
+    },
+    "extends": "eslint:recommended"
+}

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.2.8
+
+- Fixes bug with incorrect use of one-time bindings, resulting in the
+  dates not updating.
+
 ## 0.2.7
 
 - Adds selection of multiple dates

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "material-calendar",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "homepage": "https://github.com/bradberger/material-calendar",
   "keywords": "angular material design calendar ngCalendar mdCalendar calendarMd calendar-md md-calendar ng-calendar",
   "authors": [

dist/angular-material-calendar.html

@@ -1 +1 @@
-<md-content layout='column' layout-fill flex md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button ng-click='prev()'>&laquo;</md-button><div flex></div><h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><div flex></div><md-button ng-click='next()'>&raquo;</md-button></div></md-toolbar><!-- 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='{ active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout><md-tooltip>{{ ::day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ ::day | date:dayFormat:timezone }}</div><div flex ng-bind-html='::getDayContent(day)'></div></div></div></md-content><!-- calendar view --><md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'><div ng-if='weekLayout != columnWeekLayout' layout='row' layout-fill class='subheader'><div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip>{{ ::day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>{{ ::day | date:dayLabelFormat:timezone }}</div></div><div ng-if='weekLayout != columnWeekLayout' ng-repeat='week in calendar.weeks track by $index' flex layout='row' layout-fill><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='{&quot;disabled&quot; : ! sameMonth(day), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'><md-tooltip>{{ ::day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ ::day | date:dayFormat:timezone }}</div><div flex ng-bind-html='getDayContent(day)'></div></div></div></md-content></md-content>
+<md-content layout='column' layout-fill flex md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button ng-click='prev()'>&laquo;</md-button><div flex></div><h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><div flex></div><md-button ng-click='next()'>&raquo;</md-button></div></md-toolbar><!-- 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='{ active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout><md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ day | date:dayFormat:timezone }}</div><div flex ng-bind-html='getDayContent(day)'></div></div></div></md-content><!-- calendar view --><md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'><div ng-if='weekLayout != columnWeekLayout' layout='row' layout-fill class='subheader'><div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip>{{ day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>{{ day | date:dayLabelFormat:timezone }}</div></div><div ng-if='weekLayout != columnWeekLayout' ng-repeat='week in calendar.weeks track by $index' flex layout='row' layout-fill><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='{&quot;disabled&quot; : ! sameMonth(day), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'><md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ day | date:dayFormat:timezone }}</div><div flex ng-bind-html='getDayContent(day)'></div></div></div></md-content></md-content>

dist/angular-material-calendar.js

@@ -12,6 +12,7 @@ var eslint = require("gulp-eslint");
 var size = require("gulp-size");
 var replace = require("gulp-replace");
 var protractor = require("gulp-protractor").protractor;
+var Karma = require("karma").Server;
 
 function p(path) {
     return __dirname + (path.charAt(0) === "/" ? "" : "/") + path;
@@ -65,6 +66,13 @@ gulp.task("scss", function() {
       .pipe(connect.reload());
 });
 
+gulp.task("karma:tdd", function(done) {
+    new Karma({
+        configFile: __dirname + "/karma.conf.js",
+        singleRun: false
+    }, done).start();
+});
+
 gulp.task("test", ["js:lint-ci"], function() {
     connect.server({ root: "website", port: 3000 });
     gulp
@@ -86,4 +94,4 @@ gulp.task("watch", function() {
     gulp.watch(p("src/**/*"), ["js:lint", "build"]);
 });
 
-gulp.task("default", ["build", "connect", "watch"]);
+gulp.task("default", ["build", "karma:tdd", "connect", "watch"]);

gulpfile.js

@@ -21,6 +21,8 @@ module.exports = function(config) {
             "test/unit/**/*.spec.js"
         ],
 
+        autoWatch: true,
+
         // list of files to exclude
         exclude: [
         ],

karma.conf.js

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-calendar",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A calendar directive for AngularJS and Angular Material Design",
   "main": "gulpfile.js",
   "scripts": {

package.json

@@ -12,24 +12,24 @@ <h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezon
     <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='{ active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout>
-                <md-tooltip>{{ ::day | date:dayTooltipFormat:timezone }}</md-tooltip>
-                <div>{{ ::day | date:dayFormat:timezone }}</div>
-                <div flex ng-bind-html='::getDayContent(day)'></div>
+                <md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip>
+                <div>{{ day | date:dayFormat:timezone }}</div>
+                <div flex ng-bind-html='getDayContent(day)'></div>
             </div>
         </div>
     </md-content>
     <!-- calendar view -->
     <md-content ng-if='weekLayout !== columnWeekLayout' flex layout="column" class='calendar'>
         <div ng-if='weekLayout != columnWeekLayout' layout='row' layout-fill class='subheader'>
             <div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'>
-              <md-tooltip>{{ ::day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>
-              {{ ::day | date:dayLabelFormat:timezone }}
+              <md-tooltip>{{ day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>
+              {{ day | date:dayLabelFormat:timezone }}
             </div>
         </div>
         <div ng-if='weekLayout != columnWeekLayout' ng-repeat='week in calendar.weeks track by $index' flex layout='row' layout-fill>
-            <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" : ! sameMonth(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">
-                <md-tooltip>{{ ::day | date:dayTooltipFormat:timezone }}</md-tooltip>
-                <div>{{ ::day | date:dayFormat:timezone }}</div>
+            <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" : ! sameMonth(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">
+                <md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip>
+                <div>{{ day | date:dayFormat:timezone }}</div>
                 <div flex ng-bind-html="getDayContent(day)"></div>
             </div>
         </div>

src/angular-material-calendar.html

@@ -78,6 +78,7 @@ angular.module("materialCalendar").service("Calendar", ["$filter", function($fil
             return !date.getDay();
         };
 
+        // Month should be the javascript indexed month, 0 is January, etc.
         this.init = function(year, month) {
 
             if (year) {

src/angular-material-calendar.js

@@ -2,12 +2,16 @@
 /* global inject, module */
 describe("calendar service", function() {
 
+    var $date;
     var Calendar;
 
     beforeEach(module("materialCalendar"));
 
-    beforeEach(inject(function(_Calendar_){
+    beforeEach(inject(function(_Calendar_, _$filter_){
         Calendar = new _Calendar_();
+        $date = function(year, month, day) {
+            return _$filter_("dateToGmt")(new Date(year, month, day, 0, 0));
+        };
     }));
 
     it("should have all public methods defined", function() {
@@ -28,4 +32,34 @@ describe("calendar service", function() {
         expect(angular.isArray(Calendar.dates)).toBe(true);
     });
 
+    it("should start with the correct dates in October 2015", function() {
+        Calendar.init(2015, 9);
+        expect(angular.equals(Calendar.start, $date(2015, 9, 1))).toBe(true);
+        expect(angular.equals(Calendar.weeks[0][0], $date(2015, 8, 27))).toBe(true);
+    });
+
+    it("should start with the correct dates in November 2015", function() {
+        Calendar.init(2015, 10);
+        expect(angular.equals(Calendar.start, $date(2015, 10, 1))).toBe(true);
+        expect(angular.equals(Calendar.weeks[0][0], $date(2015, 10, 1))).toBe(true);
+    });
+
+    it("should start with the correct dates in July 2016", function() {
+        Calendar.init(2016, 6);
+        expect(angular.equals(Calendar.start, $date(2016, 6, 1))).toBe(true);
+        expect(angular.equals(Calendar.weeks[0][0], $date(2016, 5, 26))).toBe(true);
+    });
+
+    it("should start with the correct dates in March 2017", function() {
+        Calendar.init(2017, 2);
+        expect(angular.equals(Calendar.start, $date(2017, 2, 1))).toBe(true);
+        expect(angular.equals(Calendar.weeks[0][0], $date(2017, 1, 26))).toBe(true);
+    });
+
+    it("should start with the correct dates in April 2018", function() {
+        Calendar.init(2018, 3);
+        expect(angular.equals(Calendar.start, $date(2018, 3, 1))).toBe(true);
+        expect(angular.equals(Calendar.weeks[0][0], $date(2018, 3, 1))).toBe(true);
+    });
+
 });