@progressive-development/pd-calendar 0.2.0 → 0.2.2

package/package.json

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

package/src/PdCalendar.js

@@ -30,6 +30,15 @@ const isToday = (someDate) => {
     someDate.getFullYear() === today.getFullYear()
 }
 
+const isSelected = (someDate1, someDate2) => {
+  if (!someDate1 || !someDate2) {
+    return false;
+  }  
+  return someDate1.getDate() === someDate2.getDate() &&
+    someDate1.getMonth() === someDate2.getMonth() &&
+    someDate1.getFullYear() === someDate2.getFullYear()
+}
+
 /**
  * PdCalendar displays montly view with information (selectable day cell).
  * 
@@ -66,6 +75,7 @@ export class PdCalendar extends LitElement {
     return {
       refDate: { type: Object },
       selectableDates: { type: Boolean},
+      showSelection: { type: Boolean},
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
       nextMonthConstraint: { type: Number },
@@ -179,7 +189,7 @@ export class PdCalendar extends LitElement {
       .arrow {
         cursor: pointer;
         --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
-        --pd-icon-bg-col-hover: lightgrey;        
+        --pd-icon-bg-col-hover: lightgrey;
       }
     `];
   }
@@ -192,6 +202,7 @@ export class PdCalendar extends LitElement {
     this.numberClass = "top-left";  
     this.hideWeekend = false;
     this.selectableDates = false;
+    this.showSelection = false;
 
     this._currentMonthNavNr = 0;
   }  
@@ -278,6 +289,7 @@ export class PdCalendar extends LitElement {
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
               ?today="${this.selectableDates && isToday(tmpDate)}"
+              ?selected="${this.showSelection && isSelected(this.refDate, tmpDate)}"
             ></pd-calendar-cell>
           `);       
       }      

package/src/PdCalendarCell.js

@@ -21,6 +21,11 @@ class PdCalendarCell extends LitElement {
        */
       today: { type: Boolean },
 
+      /**
+       * If enabled, highlight the selected day
+       */
+      selected: { type: Boolean },
+
       /**
        * If enabled the cell gets an special class (e.g. green day).
        */
@@ -145,15 +150,23 @@ class PdCalendarCell extends LitElement {
         color: var(--pd-calendar-cell-day-info-free-col, var(--pd-default-bg-col));
       }
 
-      .today { 
+      .number-ring { 
         position: absolute;        
-        height: 30px;
-        width: 30px;
-        border: 1px solid blue;
+        height: 28px;
+        width: 28px;        
         border-radius: 50%;
         display: inline-block;
       }
 
+      .today {         
+        border: 2px solid blue;
+        pointer-events: none;
+      }
+
+      .selected {         
+        border: 2px solid red;
+      }
+
       /* 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) {
@@ -194,7 +207,11 @@ class PdCalendarCell extends LitElement {
         : ''}
 
       ${this.today
-        ? html`<div class="today"></div>`
+        ? html`<div class="number-ring today"></div>`
+        : ''}
+
+      ${this.selected
+        ? html`<div class="number-ring selected"></div>`
         : ''}
 
       <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>

package/src/stories/index.stories.js

@@ -20,7 +20,7 @@ function CalendarTemplate({ hideWeekend, refDate, data, prevMonthConstraint, nex
     </pd-calendar> `;  
 }
 
-function CalendarSmallTemplate({ hideWeekend, width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
+function CalendarSmallTemplate({ refDate, hideWeekend, width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
   return html`
     <style>
       .calendar-small {
@@ -39,7 +39,7 @@ function CalendarSmallTemplate({ hideWeekend, width, cellHeight, prevMonthConstr
         
       }
     </style>
-    <pd-calendar selectableDates ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+    <pd-calendar .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
     >      
     </pd-calendar>`;  
@@ -98,6 +98,17 @@ BasicSmall.args = {
   nextMonthConstraint: -1,
 };
 
+const currentDate = new Date();
+export const BasicSmallWithRefDate = CalendarSmallTemplate.bind({});
+BasicSmallWithRefDate.args = {  
+  refDate: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 10),
+  hideWeekend: false,
+  width: '220px',
+  cellHeight: '30px',
+  prevMonthConstraint: -1,
+  nextMonthConstraint: -1,
+};
+
 export const BasicSmallWithoutWeekend = CalendarSmallTemplate.bind({});
 BasicSmallWithoutWeekend.args = {  
   hideWeekend: true,