@progressive-development/pd-calendar 0.1.14 → 0.1.16

package/package.json

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

package/src/PdCalendar.js

@@ -20,6 +20,16 @@ const VIEW_LIST = 1;
 const VIEW_MONTH = 2;
 const VIEW_WEEK = 3;
 
+const isToday = (someDate) => {
+  if (!someDate) {
+    return false;
+  }
+  const today = new Date()
+  return someDate.getDate() === today.getDate() &&
+    someDate.getMonth() === today.getMonth() &&
+    someDate.getFullYear() === today.getFullYear()
+}
+
 /**
  * PdCalendar displays montly view with information (selectable day cell).
  * 
@@ -55,6 +65,7 @@ export class PdCalendar extends LitElement {
    static get properties() {
     return {
       refDate: { type: Object },
+      selectableDates: { type: Boolean},
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
       nextMonthConstraint: { type: Number },
@@ -115,13 +126,8 @@ export class PdCalendar extends LitElement {
       .header-main {
         display: flex;
         align-items: center;
-        justify-content: center;
-      }
-
-      .header-icons {
-        position: absolute;
-        right: 0px;
-        top: 0px;
+        justify-content: space-between;
+        width: 100%;
       }
 
       .content {
@@ -158,26 +164,15 @@ export class PdCalendar extends LitElement {
         font-family: var(--pd-default-font-title-family);
       }
 
-      span.content-title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-        font-size: 1.4em;
-        width: 120px;
-      }
-
-      span.content-sub-title {
-        position: absolute;
-        right: 1px;
-        bottom: 0px;
-        font-size: 1.2em;
+      .content-title {
+        font-size: var(--pd-calendar-title-font-size, 1.2em);
         font-weight: bold;
       }
 
       .arrow {
         cursor: pointer;
-        --pd-icon-size: 1.4rem;
+        --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
+        --pd-icon-bg-col-hover: lightgrey;
       }
     `];
   }
@@ -188,7 +183,8 @@ export class PdCalendar extends LitElement {
     this.data = {};
     this._viewType = VIEW_MONTH;
     this.numberClass = "top-left";  
-    this.hideWeekend = true;  
+    this.hideWeekend = false;
+    this.selectableDates = false;
 
     this._currentMonthNavNr = 0;
   }  
@@ -211,6 +207,10 @@ export class PdCalendar extends LitElement {
       this._currentMonthNavNr += 1;
       this._initFromDate(startDateNextMonth);
     }
+
+    if (changedProperties.has("refDate") && this.refDate) {
+      this._initFromDate(this.refDate);
+    }
     super.update(changedProperties);
   }
 
@@ -258,16 +258,19 @@ export class PdCalendar extends LitElement {
         const special = this.data[key]
           ? this.data[key][0].special || false
           : false;
+
+
           itemTemplates.push(html`
             <pd-calendar-cell            
               key="${key}"
               dayNumber="${i}"
               weekDayNumber="${tmpDate.getDay()}"
               infoTxt="${infoTxt}"
-              ?selectEnabled="${infoTxt !== undefined}"
+              ?selectEnabled="${this.selectableDates || infoTxt !== undefined}"
               ?special="${special}"
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
+              ?today="${this.selectableDates && isToday(tmpDate)}"
             ></pd-calendar-cell>
           `);       
       }      
@@ -276,25 +279,31 @@ export class PdCalendar extends LitElement {
     return html`
       <div class="layout-container">
         <div class="header">
-          <div class="header-main">
-            <pd-icon
-              @click="${this._previousMonth}"
-              class="arrow"
-              icon="previousArrow"
-            ></pd-icon>
-
-            <span class="content-title">${this._monthName}</span>
-
-            <pd-icon
-              @click="${this._nextMonth}"
-              class="arrow"
-              icon="nextArrow"
-            ></pd-icon>
-          </div>
-
-          <div class="header-icons"></div>
-
-          <span class="content-sub-title">${this._year}</span>
+          
+          <div class="header-main">            
+
+            <div>
+              <pd-icon
+                @click="${this._previousMonth}"
+                class="arrow"
+                activeIcon
+                icon="previousArrow"
+              ></pd-icon>            
+
+              <pd-icon
+                @click="${this._nextMonth}"
+                class="arrow"
+                activeIcon
+                icon="nextArrow"
+              ></pd-icon>
+            </div>
+
+            <div class="content-title">
+              ${this._monthName} ${this._year}
+            </div>
+  
+          </div>          
+                    
         </div>
 
         <div class="content grid-container ${sizeVar}">

package/src/PdCalendarCell.js

@@ -16,6 +16,11 @@ class PdCalendarCell extends LitElement {
        */
       selectEnabled: { type: Boolean },
 
+      /**
+       * If enabled, highlight the current day
+       */
+      today: { type: Boolean },
+
       /**
        * If enabled the cell gets an special class (e.g. green day).
        */
@@ -83,7 +88,7 @@ class PdCalendarCell extends LitElement {
                background-color: var(--my-info-cell-bg1-color);*/
         background-color: var(--pd-calendar-cell-day-free-bg-col, var(--pd-default-col));
         /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
-        box-shadow: 1px 2px 2px;
+        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);
       }
 
       .special {
@@ -91,7 +96,7 @@ class PdCalendarCell extends LitElement {
                background-color: var(--my-info-cell-bg1-color);*/
         background-color: var(--pd-calendar-cell-day-special-bg-col, var(--pd-default-success-col));
         /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
-        box-shadow: 1px 2px 2px;
+        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);;
       }
 
       .special:hover,
@@ -116,6 +121,7 @@ class PdCalendarCell extends LitElement {
       }
 
       .cell-number {        
+        pointer-events: none;
         font-size: 1em;
         font-weight: bold;
         color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
@@ -129,16 +135,25 @@ class PdCalendarCell extends LitElement {
       }
 
       /* Noch umstellen, passt nicht für alle größen (die anderen auf flex/center umgestellt) */
-      .cell-number.center {        
-        top: 50%;
-        left: 30%;
-        transform: translate(0, -50%);
+      .center {        
+        display: flex;
+        align-items: center;
+        justify-content: center;        
       }
 
       .free .cell-number, .special .cell-number {
         color: var(--pd-calendar-cell-day-info-free-col, var(--pd-default-bg-col));
       }
 
+      .today { 
+        position: absolute;        
+        height: 23px;
+        width: 23px;
+        border: 1px solid blue;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
       /* 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) {
@@ -168,18 +183,27 @@ class PdCalendarCell extends LitElement {
       @keypress="${this._selectableCellClicked}"
       @click="${this._selectableCellClicked}"
       data-date="${this.key}"
-      class="cell cell-day ${this.special ? 'special' : 'free'}"
-    >
+      class="cell cell-day ${this.numberClass} ${this.special ? 'special' : 'free'}
+      ${this.weekDayNumber === 6 ||
+      this.weekDayNumber === 0
+        ? 'we'
+        : ''}"
+    >    
       ${this.infoTxt
         ? html` <div class="cell-info">${this.infoTxt}</div>`
         : ''}
+
+      ${this.today
+        ? html`<div class="today"></div>`
+        : ''}
+
       <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
     </div>`;
   }
 
   _renderEmptyCell() {
     return html`<div
-      class="cell cell-day top-left ${this.weekDayNumber === 6 ||
+      class="cell cell-day ${this.numberClass} ${this.weekDayNumber === 6 ||
       this.weekDayNumber === 0
         ? 'we'
         : ''}"
@@ -187,7 +211,8 @@ class PdCalendarCell extends LitElement {
       ${this.infoTxt
         ? html`<div class="cell-info">${this.infoTxt}</div>`
         : ''}
-      <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
+
+        <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
     </div>`;
   }
 

package/stories/index.stories.js

@@ -9,22 +9,29 @@ export default {
   },
 };
 
-function CalendarTemplate({ refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot}) {    
-  return html` <pd-calendar .refDate="${refDate}"  .data="${data || {}}" 
+function CalendarTemplate({ hideWeekend, refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot}) {    
+  return html` <pd-calendar 
+    ?hideWeekend="${hideWeekend}"
+    .refDate="${refDate}"  .data="${data || {}}" 
       prevMonthConstraint="${prevMonthConstraint}" nextMonthConstraint="${nextMonthConstraint}">
       ${addSlot ? html`<p slot="calFooter">* excl. BTW</p>` : ''}
     </pd-calendar> `;  
 }
 
-function CalendarSmallTemplate({ width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
+function CalendarSmallTemplate({ hideWeekend, width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
   return html`
     <style>
       .calendar-small {
         --pd-calendar-width: ${width};
         --pd-calendar-cell-height: ${cellHeight};
+        --pd-calendar-week-title-bg-col: white;
+        --pd-calendar-week-title-font-col: #0A3A48;
+        --pd-calendar-cell-selectable-shadow: 0;
+        --pd-calendar-cell-day-free-bg-col: white;
+        --pd-calendar-cell-day-info-free-col: #0A3A48;
       }
     </style>
-    <pd-calendar class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+    <pd-calendar selectableDates ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
     >      
     </pd-calendar>`;  
@@ -62,6 +69,11 @@ const newDate6 = new Date(
   now.getMonth(),
   10
 );
+const newDate7 = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  11
+);
 
 export const Basic = CalendarTemplate.bind({});
 Basic.args = {  
@@ -71,6 +83,16 @@ Basic.args = {
 
 export const BasicSmall = CalendarSmallTemplate.bind({});
 BasicSmall.args = {  
+  hideWeekend: false,
+  width: '220px',
+  cellHeight: '30px',
+  prevMonthConstraint: -1,
+  nextMonthConstraint: -1,
+};
+
+export const BasicSmallWithoutWeekend = CalendarSmallTemplate.bind({});
+BasicSmallWithoutWeekend.args = {  
+  hideWeekend: true,
   width: '220px',
   cellHeight: '30px',
   prevMonthConstraint: -1,
@@ -102,6 +124,7 @@ 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}];
+specialData[format(newDate7, 'YYYY-MM-DD')] = [{ info: '150 €', special: true}];
 WithSpecialDays.args = {
   data: specialData,
   prevMonthConstraint: 0,
@@ -109,6 +132,15 @@ WithSpecialDays.args = {
   addSlot: true
 };
 
+export const WithSpecialDaysHideWeekend = CalendarTemplate.bind({});
+WithSpecialDaysHideWeekend.args = {
+  hideWeekend: true,
+  data: specialData,
+  prevMonthConstraint: 0,
+  nextMonthConstraint: 3,
+  addSlot: true
+};
+
 const now2 = new Date();
 now2.setMonth(now.getMonth() + 15);
 export const WithSpecificDateAndConstraints = CalendarTemplate.bind({});