@progressive-development/pd-calendar 0.0.13 → 0.0.15

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdCalendar.js

@@ -48,9 +48,7 @@ export class PdCalendar extends LitElement {
        numberClass: { type: String },
 
       _currentDate: { type: Object },
-      _viewType: { type: Number },
-      _latestDate: { type: Object },
-      _earliestDate: { type: Object },
+      _viewType: { type: Number }
     };
   }
 
@@ -178,38 +176,30 @@ export class PdCalendar extends LitElement {
     this.data = {};
     this._viewType = VIEW_MONTH;
     this.numberClass = "top-left";
+
+    this._currentMonthNavNr = 0;
   }  
 
   connectedCallback() {
     super.connectedCallback();
 
     // get latest possible date
-    const ref = this.refDate || new Date();
-    if (this.nextMonthConstraint >= 0) {      
-      const tmpDate = new Date(
-        ref.getFullYear(),
-        ref.getMonth() + 1,
-        0
-      );
-      tmpDate.setMonth(tmpDate.getMonth() + (this.nextMonthConstraint - 1));
-      this._latestDate = tmpDate;
-    }
-
-    // get earliest possible date
-    if (this.prevMonthConstraint >= 0) {
-      const tmpDate = new Date(
-        ref.getFullYear(),
-        ref.getMonth() + 1,
-        0
-      );
-      tmpDate.setMonth(tmpDate.getMonth() - (this.prevMonthConstraint));
-      this._earliestDate = tmpDate;
-    }
+    const ref = this.refDate || new Date();    
 
     // initialize date values with current date    
     this._initFromDate(ref);
   }
 
+  update(changedProperties) {
+    // check for month selection (set by remote server if no result available for the first call)    
+    if (changedProperties.has("data") && this.data.monthSelection) {      
+      const now = new Date(Date.now());
+      const startDateNextMonth = new Date(now.getFullYear(), this.data.monthSelection, 1);
+      this._initFromDate(startDateNextMonth);
+    }
+    super.update(changedProperties);
+  }
+
   render() {
     return html`      
       ${this.renderCalendarByViewType()}
@@ -318,6 +308,7 @@ export class PdCalendar extends LitElement {
           },
         })
       );
+      this._currentMonthNavNr += 1;
       this._initFromDate(newDate);
     }
   }
@@ -337,6 +328,7 @@ export class PdCalendar extends LitElement {
           },
         })
       );
+      this._currentMonthNavNr -= 1;
       this._initFromDate(newDate);
     }
   }
@@ -368,17 +360,21 @@ export class PdCalendar extends LitElement {
   }
 
   _checkNextMonthConstraint() {    
-    if (this._latestDate) {
-      return this._currentDate < this._latestDate;
+    if (this.nextMonthConstraint > 0) {
+      return this.nextMonthConstraint > this._currentMonthNavNr;
+    } 
+    if (this.nextMonthConstraint === -1) {
+      return true;
     }
-    return true;
+    return false;
   }
 
   _checkPrevMonthConstraint() {    
-    if (this._earliestDate) {
-      return this._currentDate > this._earliestDate;
+    if (this._currentMonthNavNr > 0 || this.prevMonthConstraint === -1) {
+      return true;
     }
-    return true;
+    return this.prevMonthConstraint > (this._currentMonthNavNr * -1);
+
   }
 
   // Forward Event from Calendar Cell, could be refactored

package/stories/index.stories.js

@@ -4,7 +4,9 @@ import { format } from 'fecha';
 
 export default {
   title: 'PdCalendar/Calendar',
-  component: 'pd-calendar',  
+  component: 'pd-calendar',
+  argTypes: {
+  },
 };
 
 function CalendarTemplate({ refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot}) {