@progressive-development/pd-calendar 0.1.15 → 0.1.17

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.15",
+  "version": "0.1.17",
   "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).
  * 
@@ -148,7 +158,7 @@ export class PdCalendar extends LitElement {
         align-items: center;
         justify-content: center;
         background-color: var(--pd-calendar-week-title-bg-col, var(--pd-default-dark-col));        
-        font-size: 1em;
+        font-size: var(--pd-calendar-title-font-size, 1em);
         font-weight: bold;
         color: var(--pd-calendar-week-title-font-col, var(--pd-default-bg-col));
         font-family: var(--pd-default-font-title-family);
@@ -197,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);
   }
 
@@ -256,6 +270,7 @@ export class PdCalendar extends LitElement {
               ?special="${special}"
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
+              ?today="${this.selectableDates && isToday(tmpDate)}"
             ></pd-calendar-cell>
           `);       
       }      

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).
        */
@@ -116,10 +121,11 @@ class PdCalendarCell extends LitElement {
       }
 
       .cell-number {        
-        font-size: 1em;
+        pointer-events: none;
+        font-size: var(--pd-calendar-number-font-size, 1em);
         font-weight: bold;
         color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
-        font-family: var(--pd-default-font-title-col);
+        font-family: var(--pd-default-font-content-family);
       }
 
       .cell-number.top-left {
@@ -139,6 +145,15 @@ class PdCalendarCell extends LitElement {
         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) {
@@ -173,10 +188,15 @@ class PdCalendarCell extends LitElement {
       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>`;
   }
@@ -191,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>`;
   }