@progressive-development/pd-calendar 0.0.10 → 0.0.11

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

package/src/PdCalendar.js

@@ -4,9 +4,11 @@
  */
 
 import { LitElement, html, css } from 'lit';
-import { format, parse } from 'fecha';
+import { format } from 'fecha';
 import '@progressive-development/pd-icon/pd-icon.js';
 
+import './PdCalendarCell.js';
+
 // todo: use existing shortnames for locale here
 const weekDays = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'];
 
@@ -39,22 +41,13 @@ export class PdCalendar extends LitElement {
 
         /* 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);
-        --my-cell-we-bg-color: var(--squi-title-color, darkgrey);
-        --my-cell-day-color: var(--squi-title-color, #fefefe);
-
-        --my-info-cell-bg1-color: var(--squi-title-color, #177e89);
-        --my-info-cell-bg2-color: var(--squi-title-color, #084c61);
-        --my-info-cell-day-color: var(--squi-title-color, #fefefe);
-
-        --my-info-cell-bg1-hover: var(--squi-highlight-color, #ffc857);
-        --my-info-cell-bg2-hover: var(--squi-highlight-color, #177e89);
-
-        --my-info-txt-color: var(--squi-info-txt, #fefefe);
-
+        --my-day-title-bg-color: var(--squi-title-color, #084c61);                                                              
+        
         --my-primary-font: var(--squi-primary-font, Oswald);
 
+        --my-width: var(--pd-calendar-width, 100%);
+        --my-cell-height: var(--pd-calendar-cell-height, 70px);
+
         display: block;
         /*padding: 8px;
         width: 100vw;
@@ -63,6 +56,8 @@ export class PdCalendar extends LitElement {
 
       /* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
       .layout-container {
+        width: var(--my-width);
+        min-width: 220px;
         height: 100%;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -80,12 +75,18 @@ export class PdCalendar extends LitElement {
 
         font-family: var(--my-primary-font);
         color: var(--my-title-color);
+
+        display: flex;
+        justify-content: left;
       }
 
       .header-main {
+        display: flex;
+        /* Nun über display flex in header und justify-content gelöst
         position: absolute;
+        top: 50%;
         left: 30%;
-        display: flex;
+        transform: translate(0, -50%);*/
       }
 
       .header-icons {
@@ -110,11 +111,11 @@ export class PdCalendar extends LitElement {
       }
 
       .grid-container.max {
-        grid-template-rows: minmax(10px, 30px) repeat(6, minmax(70px, 1fr));
+        grid-template-rows: minmax(10px, 30px) repeat(6, minmax(var(--my-cell-height), 1fr));
       }
 
       .grid-container.normal {
-        grid-template-rows: minmax(10px, 30px) repeat(5, minmax(70px, 1fr));
+        grid-template-rows: minmax(10px, 30px) repeat(5, minmax(var(--my-cell-height), 1fr));
       }
 
       .title-week-day {
@@ -127,49 +128,6 @@ export class PdCalendar extends LitElement {
         font-family: var(--my-primary-font);
       }
 
-      .cell {
-        text-align: center;
-      }
-
-      .cell-empty {
-        background-color: #fdfbfb;
-      }
-
-      .cell-day {
-        position: relative;
-        /*background-image: linear-gradient(to right, rgb(51, 101, 138) , rgb(38, 76, 104));      */
-        /*box-shadow: 2px 2px 3px;*/
-        background-color: var(--my-cell-bg-color);
-        /*border-radius: 2px 2px 2px 2px;*/
-      }
-
-      .cell-day.we {
-        background-color: var(--my-cell-we-bg-color);
-      }
-
-      .free {
-        /*background-image: linear-gradient(to right, green, darkgreen);      
-           background-color: var(--my-info-cell-bg1-color);*/
-        background-color: var(--my-info-cell-bg1-color);
-        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
-        box-shadow: 1px 2px 2px;
-      }
-
-      .special {
-        /*background-image: linear-gradient(to right, green, darkgreen);      
-           background-color: var(--my-info-cell-bg1-color);*/
-        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;
-      }
-
-      .special:hover,
-      .free:hover {
-        background-color: rgb(247, 211, 8);
-        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-hover), var(--my-info-cell-bg2-hover));*/
-        cursor: pointer;
-      }
-
       span.content-title {
         font-weight: bold;
         font-size: 1.5em;
@@ -179,54 +137,12 @@ export class PdCalendar extends LitElement {
 
       span.content-sub-title {
         position: absolute;
-        left: 0px;
+        right: 1px;
         bottom: 0px;
         font-size: 1.2em;
         font-weight: bold;
       }
 
-      span.cell-info {
-        position: absolute;
-        left: 35%;
-        top: 30%;
-        color: var(--my-info-txt-color);
-        font-family: var(--my-primary-font);
-        font-weight: bold;
-        font-size: 1.5em;
-        text-shadow: 1px 1px black;
-        pointer-events: none;
-      }
-
-      span.cell-number {
-        position: absolute;
-        left: 3px;
-        top: 1px;
-        font-size: 0.9em;
-        color: var(--my-cell-day-color);
-        font-family: var(--my-primary-font);
-      }
-
-      .free .cell-number {
-        color: var(--my-info-cell-day-color);
-      }
-
-      @media (max-width: 800px) {
-        span.cell-info {
-          left: 30%;
-          font-size: 1.3em;
-        }
-        span.cell-number {
-          font-size: 0.7em;
-        }
-      }
-      @media (max-width: 500px) {
-        span.cell-info {
-          left: 15%;
-          font-weight: normal;
-          font-size: 1em;
-        }
-      }
-
       .arrow {
         /* Hack */
         padding-top: 8px;
@@ -243,6 +159,12 @@ export class PdCalendar extends LitElement {
       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 },
@@ -254,6 +176,7 @@ export class PdCalendar extends LitElement {
     
     this.data = {};
     this._viewType = VIEW_MONTH;
+    this.numberClass = "top-left";
 
     // initialize date values with current date
     const now = new Date();
@@ -324,34 +247,21 @@ export class PdCalendar extends LitElement {
       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 : '';
+      const infoTxt = this.data[key] ? this.data[key][0].info : undefined;
       const special = this.data[key]
         ? this.data[key][0].special || false
         : false;
-      if (infoTxt) {
         itemTemplates.push(html`
-          <div
-            @keypress="${this._freeDateClicked}"
-            @click="${this._freeDateClicked}"
-            data-date="${key}"
-            class="cell cell-day ${special ? 'special' : 'free'}"
-          >
-            <span class="cell-info">${infoTxt}*</span>
-            <span class="cell-number">${i}</span>
-          </div>
+          <pd-calendar-cell            
+            key="${key}"
+            dayNumber="${i}"
+            weekDayNumber="${tmpDate.getDay()}"
+            infoTxt="${infoTxt}"
+            ?selectEnabled="${infoTxt !== undefined}"
+            ?special="${special}"
+            numberClass="${this.numberClass}"
+          ></pd-calendar-cell>
         `);
-      } else {
-        itemTemplates.push(html`
-          <div
-            class="cell cell-day ${tmpDate.getDay() === 6 ||
-            tmpDate.getDay() === 0
-              ? 'we'
-              : ''}"
-          >
-            <span class="cell-number">${i}</span>
-          </div>
-        `);
-      }
     }
 
     return html`
@@ -391,22 +301,6 @@ export class PdCalendar extends LitElement {
     `;
   }
 
-  _freeDateClicked(e) {
-    const dateKey = e.target.dataset.date;
-    if (dateKey) {
-      // convert back to date
-      const userSelectedDate = parse(dateKey, 'YYYY-MM-DD');
-      this.dispatchEvent(
-        new CustomEvent('select-date', {
-          detail: {
-            dateKey,
-            date: userSelectedDate,
-          },
-        })
-      );
-    }
-  }
-
   _nextMonth() {
     if (this._checkNextMonthConstraint()) {
       const newDate = new Date(

package/src/PdCalendarCell.js

@@ -0,0 +1,225 @@
+import { LitElement, html, css } from 'lit';
+import { parse } from 'fecha';
+
+class PdCalendarCell extends LitElement {
+  /**
+   * @event select-date - fires when user clicks on a selectable cell.
+   */
+
+  static get properties() {
+    return {
+      /**
+       * If enabled, cell could be selected (with visible hover element and pointer)
+       * vy the user => results in fire cell-selected.
+       */
+      selectEnabled: { type: Boolean },
+
+      /**
+       * If enabled the cell gets an special class (e.g. green day).
+       */
+      special: { type: Boolean },
+
+      /**
+       * If set shows info text in the middle (hack) of the cell (e.g. price info).
+       */
+      infoTxt: { type: String },
+
+      /**
+       * CSS class for day number inside the cell, top-left and center available
+       */
+      numberClass: { type: String },
+
+      /* key, weekDayNumber, dayNumber could merged to date 
+           on the other hand then there is the need to calculate them for each cell... */
+      key: { type: String },
+      weekDayNumber: { type: Number },
+      dayNumber: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        
+
+        /* Define custom properties for calendar cell element */
+        --my-cell-bg-color: var(--squi-title-color, lightgrey);
+        --my-cell-we-bg-color: var(--squi-title-color, darkgrey);
+        --my-cell-day-color: var(--squi-title-color, #fefefe);
+
+        --my-info-cell-bg1-color: var(--squi-title-color, #177e89);
+        --my-info-cell-day-color: var(--squi-title-color, #fefefe);
+        --my-info-txt-color: var(--squi-info-txt, #fefefe);
+        /* Defined by PdCalendar and also setted here
+        --my-primary-font: var(--squi-primary-font, Oswald);*/ 
+
+        /* not used in the moment, was created for gradient cells 
+        --my-info-cell-bg2-color: var(--squi-title-color, #084c61);
+        --my-info-cell-bg1-hover: var(--squi-highlight-color, #ffc857);
+        --my-info-cell-bg2-hover: var(--squi-highlight-color, #177e89);
+        */
+      }
+
+      .cell {        
+        width: 100%;
+        height: 100%;        
+        min-height: 30px;
+      }
+
+      .cell-empty {
+        background-color: #fdfbfb;
+      }
+
+      .cell-day {
+        position: relative;
+        /*background-image: linear-gradient(to right, rgb(51, 101, 138) , rgb(38, 76, 104));      */
+        /*box-shadow: 2px 2px 3px;*/
+        background-color: var(--my-cell-bg-color);
+        /*border-radius: 2px 2px 2px 2px;*/        
+      }
+
+      .cell-day.we {
+        background-color: var(--my-cell-we-bg-color);
+      }
+
+      .free {
+        /*background-image: linear-gradient(to right, green, darkgreen);      
+               background-color: var(--my-info-cell-bg1-color);*/
+        background-color: var(--my-info-cell-bg1-color);
+        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
+        box-shadow: 1px 2px 2px;
+      }
+
+      .special {
+        /*background-image: linear-gradient(to right, green, darkgreen);      
+               background-color: var(--my-info-cell-bg1-color);*/
+        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;
+      }
+
+      .special:hover,
+      .free:hover {
+        background-color: rgb(247, 211, 8);
+        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-hover), var(--my-info-cell-bg2-hover));*/
+        cursor: pointer;
+      }
+
+      
+      .cell-info {
+
+        /* center position https://www.w3.org/Style/Examples/007/center.en.html*/
+        position: absolute;
+        top: 50%;
+        left: 35%;
+        transform: translate(0, -50%);        
+
+        color: var(--my-info-txt-color);
+        font-family: var(--my-primary-font);
+        font-weight: bold;
+        font-size: 1.5em;
+        text-shadow: 1px 1px black;
+        pointer-events: none;
+      }
+
+      .cell-number {
+        position: absolute;
+        font-size: 0.9em;
+        color: var(--my-cell-day-color);
+        font-family: var(--my-primary-font);
+      }
+
+      .cell-number.top-left {
+        left: 3px;
+        top: 1px;
+      }
+
+      .cell-number.center {        
+        top: 50%;
+        left: 30%;
+        transform: translate(0, -50%);
+      }
+
+      .free .cell-number {
+        color: var(--my-info-cell-day-color);
+      }
+
+      /* ToDo: Dont work for calendars sized by custom properties. Needed to calculate from calendar size
+        not from window size, this is a topic for container queries, which are not available right now... */
+      @media (max-width: 800px) {
+        .cell-info {
+          left: 30%;
+          font-size: 1.3em;
+        }
+        .cell-number {
+          font-size: 0.7em;
+        }
+      }
+      @media (max-width: 500px) {
+        .cell-info {
+          left: 15%;
+          font-weight: normal;
+          font-size: 1em;
+        }
+      }
+    `;
+  }
+
+  constructor() {
+      super();
+      this.numberClass = "top-left";
+  }
+
+  _renderSelectableCell() {
+    return html` <div
+      @keypress="${this._selectableCellClicked}"
+      @click="${this._selectableCellClicked}"
+      data-date="${this.key}"
+      class="cell cell-day ${this.special ? 'special' : 'free'}"
+    >
+      ${this.infoTxt
+        ? html` <div class="cell-info">${this.infoTxt}</div>`
+        : ''}
+      <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
+    </div>`;
+  }
+
+  _renderEmptyCell() {
+    return html`<div
+      class="cell cell-day top-left ${this.weekDayNumber === 6 ||
+      this.weekDayNumber === 0
+        ? 'we'
+        : ''}"
+    >
+      ${this.infoTxt
+        ? html`<div class="cell-info">${this.infoTxt}</div>`
+        : ''}
+      <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
+    </div>`;
+  }
+
+  render() {
+    return this.selectEnabled
+      ? this._renderSelectableCell()
+      : this._renderEmptyCell();
+  }
+
+  _selectableCellClicked(e) {
+    const dateKey = e.target.dataset.date;
+    if (dateKey) {
+      // convert back to date
+      const userSelectedDate = parse(dateKey, 'YYYY-MM-DD');
+      this.dispatchEvent(
+        new CustomEvent('select-date', {
+          detail: {
+            dateKey,
+            date: userSelectedDate,
+          },
+        })
+      );
+    }
+  }
+}
+
+window.customElements.define('pd-calendar-cell', PdCalendarCell);

package/stories/cell.stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import '../src/PdCalendarCell.js';
+
+export default {
+  title: 'PdCalendar/CalendarCell',
+  component: 'pd-calendar-cell',
+  argTypes: {
+  },
+};
+
+function CalendarCellTemplate({infoTxt}) {  
+  return html`
+  
+  <div style="max-width: 400px;">
+
+    <pd-calendar-cell
+      key="2021-11-13"
+      dayNumber="13"
+      weekDayNumber="5"
+      infoTxt="Selectable"
+      selectEnabled      
+    ></pd-calendar-cell>
+
+    <pd-calendar-cell
+      key="2021-11-14"
+      dayNumber="14"
+      weekDayNumber="6"
+      infoTxt="${infoTxt}"
+      selectEnabled
+      special
+    ></pd-calendar-cell>    
+
+    <pd-calendar-cell
+      key="2021-11-15"
+      dayNumber="15"
+      weekDayNumber="1"
+      infoTxt="Empty"
+    ></pd-calendar-cell>    
+    
+    <pd-calendar-cell
+      key="2021-11-20"
+      dayNumber="20"
+      weekDayNumber="6"
+      infoTxt="Weekend"
+    ></pd-calendar-cell>    
+
+  </div>`;  
+}
+
+export const Basic = CalendarCellTemplate.bind({});
+Basic.args = {  
+  key: '2021-11-18', 
+  dayNumber: 18, 
+  weekDayNumber: 3, 
+  infoTxt: "Special", 
+  special: true
+};

package/stories/index.stories.js

@@ -16,6 +16,20 @@ function CalendarTemplate({ data, prevMonthConstraint, nextMonthConstraint, addS
     </pd-calendar> `;  
 }
 
+function CalendarSmallTemplate({ width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
+  return html`
+    <style>
+      .calendar-small {
+        --pd-calendar-width: ${width};
+        --pd-calendar-cell-height: ${cellHeight};
+      }
+    </style>
+    <pd-calendar class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+      nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
+    >      
+    </pd-calendar>`;  
+}
+
 // generate some test data (needed to show data for current month)
 const now = new Date();
 const newDate1 = new Date(
@@ -55,6 +69,14 @@ Basic.args = {
   nextMonthConstraint: -1,
 };
 
+export const BasicSmall = CalendarSmallTemplate.bind({});
+BasicSmall.args = {  
+  width: '220px',
+  cellHeight: '30px',
+  prevMonthConstraint: -1,
+  nextMonthConstraint: -1,
+};
+
 export const WithInfoAndConstraints = CalendarTemplate.bind({});
 const data = {};
 data[format(newDate1, 'YYYY-MM-DD')] = [{ info: '180 €' }];