@progressive-development/pd-calendar 0.1.11 → 0.1.12

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

package/src/PdCalendar.js

@@ -13,6 +13,7 @@ import './PdCalendarCell.js';
 
 // todo: use existing shortnames for locale here
 const weekDays = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'];
+const weekDaysWithoutWE = ['Ma', 'Di', 'Wo', 'Do', 'Vr'];
 
 // list views (list, month, week)
 const VIEW_LIST = 1;
@@ -20,10 +21,22 @@ const VIEW_MONTH = 2;
 const VIEW_WEEK = 3;
 
 /**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
+ * PdCalendar displays montly view with information (selectable day cell).
+ * 
+ * refDate: Date                => if set use the day for initial month view
+ * prevMonthConstraint: number  => if set, allows only back steps until the constraint is reached  
+ * nextMonthConstraint: number  => if set, allows only forward steps until the constraint is reached  
+ * data: Object                 => input calendar Data.
+ * numberClass: string          => display day in cell (top-left and center available)
+ * 
+ * Data:
+ * monthSelection: number       => number wich indicates, the month with data, if the origin month contains no valid data.
+ *                                 starts the calendar view initial with the month from monthSelection
+ * Input Data as followed 
+ * "2023-11-04": {
+ *  info: "some txt",           => Text for day cell
+ *  special?: true|false        => Highlight cell
+ * }   
  */
 export class PdCalendar extends LitElement {
 
@@ -40,6 +53,7 @@ export class PdCalendar extends LitElement {
    static get properties() {
     return {
       refDate: { type: Object },
+      hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
       nextMonthConstraint: { type: Number },
       data: { type: Object },
@@ -68,6 +82,10 @@ export class PdCalendar extends LitElement {
         height: 100vh;*/
       }
 
+      :host([hideWeekend]) .grid-container {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+
       /* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
       .layout-container {
         width: var(--pd-calendar-width, 100%);
@@ -167,7 +185,8 @@ export class PdCalendar extends LitElement {
     
     this.data = {};
     this._viewType = VIEW_MONTH;
-    this.numberClass = "top-left";
+    this.numberClass = "top-left";  
+    this.hideWeekend = true;  
 
     this._currentMonthNavNr = 0;
   }  
@@ -229,24 +248,27 @@ export class PdCalendar extends LitElement {
         : 'normal';
     for (let i = 1; i <= this._numberOfDays; i += 1) {
       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 : undefined;
-      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}"
-            ?special="${special}"
-            numberClass="${this.numberClass}"
-            @select-date="${this._forwardEvent}"
-          ></pd-calendar-cell>
-        `);
+      const day = tmpDate.getDay();
+      if (!this.hideWeekend || ((day !== 6) && (day  !== 0))) {
+        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 : undefined;
+        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}"
+              ?special="${special}"
+              numberClass="${this.numberClass}"
+              @select-date="${this._forwardEvent}"
+            ></pd-calendar-cell>
+          `);       
+      }      
     }
 
     return html`
@@ -274,7 +296,7 @@ export class PdCalendar extends LitElement {
         </div>
 
         <div class="content grid-container ${sizeVar}">
-          ${weekDays.map(
+          ${(this.hideWeekend ? weekDaysWithoutWE : weekDays).map(
             shortName => html` <div class="title-week-day">${shortName}</div>`
           )}
           ${this._daysFromPreviousMonth.map(