@progressive-development/pd-calendar 0.1.13 → 0.1.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.1.13",
+  "version": "0.1.15",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -30,7 +30,7 @@
     "week"
   ],
   "dependencies": {
-    "@progressive-development/pd-icon": "^0.1.17",
+    "@progressive-development/pd-icon": "^0.1.18",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "fecha": "^4.2.0",
     "lit": "^2.2.0"

package/src/PdCalendar.js

@@ -55,6 +55,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 +116,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 +154,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 +173,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;
   }  
@@ -258,13 +244,15 @@ 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}"
@@ -276,25 +264,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

@@ -83,7 +83,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 +91,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,
@@ -129,10 +129,10 @@ 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 {
@@ -168,7 +168,11 @@ 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>`
@@ -179,7 +183,7 @@ class PdCalendarCell extends LitElement {
 
   _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'
         : ''}"

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({});