@progressive-development/pd-calendar 0.0.4 → 0.0.6

package/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">

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.4",
+  "version": "0.0.6",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-icon": "0.0.6",
+    "@progressive-development/pd-icon": "0.0.7",
     "fecha": "^4.2.0"
   },
   "devDependencies": {

package/src/PdCalendar.js

@@ -22,19 +22,22 @@ const VIEW_WEEK = 3;
  * @csspart button - The button
  */
 export class PdCalendar extends LitElement {
+
   /**
-   * Fired when next month clicked
+   * Fired when next or prev month clicked
    * @event change-month
    */
 
   /**
-   * Fired when free date clicked => At the moment only for freeDates
+   * Fired when date with info element clicked => At the moment only for those ones
    * @event select-date
    */
 
   static get styles() {
     return css`
       :host {
+
+        /* Define custom properties for calendar element */ 
         --my-title-color: var(--squi-title-color, #084c61);
         --my-day-title-bg-color: var(--squi-title-color, #084c61);
         --my-cell-bg-color: var(--squi-title-color, lightgrey);
@@ -52,14 +55,10 @@ export class PdCalendar extends LitElement {
 
         --my-primary-font: var(--squi-primary-font, Oswald);
 
-        /*
-         display: block;        
-         padding: 8px;
-         */
-        /*max-width: 800px;*/
         display: block;
-        /*width: 100vw;
-         height: 100vh;*/
+        /*padding: 8px;
+        width: 100vw;
+        height: 100vh;*/
       }
 
       /* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
@@ -159,7 +158,7 @@ export class PdCalendar extends LitElement {
       .special {
         /*background-image: linear-gradient(to right, green, darkgreen);      
            background-color: var(--my-info-cell-bg1-color);*/
-        background-color: var(--green, #1da692);
+        background-color: var(--green, green); /*#1da692*/
         /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
         box-shadow: 1px 2px 2px;
       }
@@ -241,25 +240,56 @@ export class PdCalendar extends LitElement {
   static get properties() {
     return {
       currentDate: { type: Object },
+      prevMonthConstraint: { type: Number },
+      nextMonthConstraint: { type: Number },
       data: { type: Object },
       _viewType: { type: Number },
+      _latestDate: { type: Object },
+      _earliestDate: { type: Object },
     };
   }
 
   constructor() {
     super();
+    
+    this.data = {};
+    this._viewType = VIEW_MONTH;
 
     // initialize date values with current date
-    this._initFromDate(new Date());
-    this.data = {};
+    const now = new Date();
+    this._initFromDate(now);
+  }  
+
+  firstUpdated() {
+    // get latest possible date
+    if (this.nextMonthConstraint >= 0) {
+      const now = new Date();
+      const tmpDate = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      );
+      tmpDate.setMonth(tmpDate.getMonth() + (this.nextMonthConstraint - 1));
+      this._latestDate = tmpDate;
+    }
 
-    this._viewType = VIEW_MONTH;
+    // get earliest possible date
+    if (this.prevMonthConstraint >= 0) {
+      const now = new Date();
+      const tmpDate = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      );
+      tmpDate.setMonth(tmpDate.getMonth() - (this.prevMonthConstraint));
+      this._earliestDate = tmpDate;
+    }
   }
 
   render() {
-    return html`
-      <slot></slot>
+    return html`      
       ${this.renderCalendarByViewType()}
+      <slot name="calFooter"></slot>
     `;
   }
 
@@ -358,7 +388,6 @@ export class PdCalendar extends LitElement {
           ${itemTemplates}
         </div>
       </div>
-      <p>* excl. BTW</p>
     `;
   }
 
@@ -379,8 +408,7 @@ export class PdCalendar extends LitElement {
   }
 
   _nextMonth() {
-    const now = new Date();
-    if (this.currentDate.getMonth() < now.getMonth() + 2) {
+    if (this._checkNextMonthConstraint()) {
       const newDate = new Date(
         this.currentDate.getFullYear(),
         this.currentDate.getMonth(),
@@ -398,10 +426,8 @@ export class PdCalendar extends LitElement {
     }
   }
 
-  _previousMonth() {
-    const now = new Date();
-    // TMP 23.08 ist start
-    if (this.currentDate.getMonth() > now.getMonth()) {
+  _previousMonth() {        
+    if (this._checkPrevMonthConstraint()) {
       const newDate = new Date(
         this.currentDate.getFullYear(),
         this.currentDate.getMonth(),
@@ -444,4 +470,20 @@ export class PdCalendar extends LitElement {
     }
     return missDayArray;
   }
+
+  _checkNextMonthConstraint() {
+    console.log("check _latestDate: ", this._latestDate);    
+    if (this._latestDate) {
+      return this.currentDate < this._latestDate;
+    }
+    return true;
+  }
+
+  _checkPrevMonthConstraint() {
+    console.log("check _earliestDate: ", this._latestDate);
+    if (this._earliestDate) {
+      return this.currentDate > this._earliestDate;
+    }
+    return true;
+  }
 }

package/stories/index.stories.js

@@ -1,25 +1,88 @@
 import { html } from 'lit';
 import '../pd-calendar.js';
+import { format } from 'fecha';
 
 export default {
-  title: 'Calendar',
+  title: 'PdCalendar/Calendar',
   component: 'pd-calendar',
   argTypes: {
   },
 };
 
-function CalendarTemplate({ data }) {  
-  return html` <pd-calendar .data="${data || {}}"></pd-calendar> `;  
+function CalendarTemplate({ data, prevMonthConstraint, nextMonthConstraint, addSlot}) {  
+  return html` <pd-calendar .data="${data || {}}" 
+      prevMonthConstraint="${prevMonthConstraint}" nextMonthConstraint="${nextMonthConstraint}">
+      ${addSlot ? html`<p slot="calFooter">* excl. BTW</p>` : ''}
+    </pd-calendar> `;  
 }
 
+// generate some test data (needed to show data for current month)
+const now = new Date();
+const newDate1 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  1
+);
+const newDate2 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  2
+);
+const newDate3 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  3
+);
+const newDate4 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  4
+);
+const newDate5 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  9
+);
+const newDate6 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  10
+);
+
 export const Basic = CalendarTemplate.bind({});
-Basic.args = {};
-
-export const WithInfo = CalendarTemplate.bind({});
-WithInfo.args = {
-  data: {
-    '2021-05-13': [{ info: '180€' }],
-    '2021-05-14': [{ info: '160€' }],
-    '2021-05-31': [{ info: '120€' }],
-  },
+Basic.args = {  
+  prevMonthConstraint: -1,
+  nextMonthConstraint: -1,
 };
+
+export const WithInfoAndConstraints = CalendarTemplate.bind({});
+const data = {};
+data[format(newDate1, 'YYYY-MM-DD')] = [{ info: '180 €' }];
+data[format(newDate2, 'YYYY-MM-DD')] = [{ info: '170 €' }];
+data[format(newDate3, 'YYYY-MM-DD')] = [{ info: '150 €' }];
+data[format(newDate4, 'YYYY-MM-DD')] = [{ info: '180 €' }];
+data[format(newDate5, 'YYYY-MM-DD')] = [{ info: '170 €' }];
+data[format(newDate6, 'YYYY-MM-DD')] = [{ info: '150 €' }];
+
+WithInfoAndConstraints.args = {
+  data,
+  prevMonthConstraint: 0,
+  nextMonthConstraint: 3,
+  addSlot: true
+};
+
+
+export const WithSpecialDays = CalendarTemplate.bind({});
+const specialData = {};
+specialData[format(newDate1, 'YYYY-MM-DD')] = [{ info: '180 €' }];
+specialData[format(newDate2, 'YYYY-MM-DD')] = [{ info: '170 €' }];
+specialData[format(newDate3, 'YYYY-MM-DD')] = [{ info: '150 €', special: true}];
+specialData[format(newDate4, 'YYYY-MM-DD')] = [{ info: '180 €' }];
+specialData[format(newDate5, 'YYYY-MM-DD')] = [{ info: '170 €' }];
+specialData[format(newDate6, 'YYYY-MM-DD')] = [{ info: '150 €', special: true}];
+WithSpecialDays.args = {
+  data: specialData,
+  prevMonthConstraint: 0,
+  nextMonthConstraint: 3,
+  addSlot: true
+};