@progressive-development/pd-calendar 0.0.11 → 0.0.13

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.11",
+  "version": "0.0.13",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdCalendar.js

@@ -35,6 +35,25 @@ export class PdCalendar extends LitElement {
    * @event select-date
    */
 
+   static get properties() {
+    return {
+      refDate: { type: Object },
+      prevMonthConstraint: { type: Number },
+      nextMonthConstraint: { type: Number },
+      data: { type: Object },
+
+      /**
+       * CSS class for day number inside the cell, top-left and center available
+       */
+       numberClass: { type: String },
+
+      _currentDate: { type: Object },
+      _viewType: { type: Number },
+      _latestDate: { type: Object },
+      _earliestDate: { type: Object },
+    };
+  }
+
   static get styles() {
     return css`
       :host {
@@ -153,43 +172,23 @@ export class PdCalendar extends LitElement {
     `;
   }
 
-  static get properties() {
-    return {
-      currentDate: { type: Object },
-      prevMonthConstraint: { type: Number },
-      nextMonthConstraint: { type: Number },
-      data: { type: Object },
-
-      /**
-       * CSS class for day number inside the cell, top-left and center available
-       */
-       numberClass: { type: String },
-
-      _viewType: { type: Number },
-      _latestDate: { type: Object },
-      _earliestDate: { type: Object },
-    };
-  }
-
   constructor() {
     super();
     
     this.data = {};
     this._viewType = VIEW_MONTH;
     this.numberClass = "top-left";
-
-    // initialize date values with current date
-    const now = new Date();
-    this._initFromDate(now);
   }  
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // get latest possible date
-    if (this.nextMonthConstraint >= 0) {
-      const now = new Date();
+    const ref = this.refDate || new Date();
+    if (this.nextMonthConstraint >= 0) {      
       const tmpDate = new Date(
-        now.getFullYear(),
-        now.getMonth() + 1,
+        ref.getFullYear(),
+        ref.getMonth() + 1,
         0
       );
       tmpDate.setMonth(tmpDate.getMonth() + (this.nextMonthConstraint - 1));
@@ -198,15 +197,17 @@ export class PdCalendar extends LitElement {
 
     // get earliest possible date
     if (this.prevMonthConstraint >= 0) {
-      const now = new Date();
       const tmpDate = new Date(
-        now.getFullYear(),
-        now.getMonth() + 1,
+        ref.getFullYear(),
+        ref.getMonth() + 1,
         0
       );
       tmpDate.setMonth(tmpDate.getMonth() - (this.prevMonthConstraint));
       this._earliestDate = tmpDate;
     }
+
+    // initialize date values with current date    
+    this._initFromDate(ref);
   }
 
   render() {
@@ -244,7 +245,7 @@ export class PdCalendar extends LitElement {
         ? 'max'
         : 'normal';
     for (let i = 1; i <= this._numberOfDays; i += 1) {
-      const tmpDate = new Date(this._year, this.currentDate.getMonth(), i);
+      const tmpDate = new Date(this._year, this._currentDate.getMonth(), i);
       const key = format(tmpDate, 'YYYY-MM-DD');
       // TODO => Array / Unit Thema... hier fest auf 0 zugegriffen zunächst
       const infoTxt = this.data[key] ? this.data[key][0].info : undefined;
@@ -260,6 +261,7 @@ export class PdCalendar extends LitElement {
             ?selectEnabled="${infoTxt !== undefined}"
             ?special="${special}"
             numberClass="${this.numberClass}"
+            @select-date="${this._forwardEvent}"
           ></pd-calendar-cell>
         `);
     }
@@ -304,8 +306,8 @@ export class PdCalendar extends LitElement {
   _nextMonth() {
     if (this._checkNextMonthConstraint()) {
       const newDate = new Date(
-        this.currentDate.getFullYear(),
-        this.currentDate.getMonth(),
+        this._currentDate.getFullYear(),
+        this._currentDate.getMonth(),
         1
       );
       newDate.setMonth(newDate.getMonth() + 1);
@@ -323,8 +325,8 @@ export class PdCalendar extends LitElement {
   _previousMonth() {        
     if (this._checkPrevMonthConstraint()) {
       const newDate = new Date(
-        this.currentDate.getFullYear(),
-        this.currentDate.getMonth(),
+        this._currentDate.getFullYear(),
+        this._currentDate.getMonth(),
         1
       );
       newDate.setMonth(newDate.getMonth() - 1);
@@ -346,7 +348,7 @@ export class PdCalendar extends LitElement {
     // last month day
     const newDate2 = new Date(date.getFullYear(), date.getMonth() + 1, 0);
     this._numberOfDays = newDate2.getDate();
-    this.currentDate = date;
+    this._currentDate = date;
   }
 
   static _getPreviousMonthDays(date) {
@@ -367,15 +369,24 @@ export class PdCalendar extends LitElement {
 
   _checkNextMonthConstraint() {    
     if (this._latestDate) {
-      return this.currentDate < this._latestDate;
+      return this._currentDate < this._latestDate;
     }
     return true;
   }
 
   _checkPrevMonthConstraint() {    
     if (this._earliestDate) {
-      return this.currentDate > this._earliestDate;
+      return this._currentDate > this._earliestDate;
     }
     return true;
   }
+
+  // Forward Event from Calendar Cell, could be refactored
+  _forwardEvent(e) {
+    this.dispatchEvent(
+      new CustomEvent('select-date', {
+        detail: e.detail
+      })
+    );
+  }
 }

package/stories/index.stories.js

@@ -4,13 +4,11 @@ import { format } from 'fecha';
 
 export default {
   title: 'PdCalendar/Calendar',
-  component: 'pd-calendar',
-  argTypes: {
-  },
+  component: 'pd-calendar',  
 };
 
-function CalendarTemplate({ data, prevMonthConstraint, nextMonthConstraint, addSlot}) {  
-  return html` <pd-calendar .data="${data || {}}" 
+function CalendarTemplate({ refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot}) {    
+  return html` <pd-calendar .refDate="${refDate}"  .data="${data || {}}" 
       prevMonthConstraint="${prevMonthConstraint}" nextMonthConstraint="${nextMonthConstraint}">
       ${addSlot ? html`<p slot="calFooter">* excl. BTW</p>` : ''}
     </pd-calendar> `;  
@@ -107,4 +105,13 @@ WithSpecialDays.args = {
   prevMonthConstraint: 0,
   nextMonthConstraint: 3,
   addSlot: true
+};
+
+const now2 = new Date();
+now2.setMonth(now.getMonth() + 15);
+export const WithSpecificDateAndConstraints = CalendarTemplate.bind({});
+WithSpecificDateAndConstraints.args = {  
+  refDate: now2,
+  prevMonthConstraint: 1,
+  nextMonthConstraint: 1,  
 };