Add part definition for navigation icons

Otherwise it can pick up the value of the date picker itself.

package-lock.json

@@ -0,0 +1,86 @@
+{
+  "name": "@tp/tp-date-picker",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@tp/tp-date-picker",
+      "version": "1.0.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@date-fns/utc": "^2.1.0",
+        "date-fns": "^4.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@date-fns/utc": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/utc/-/utc-2.1.0.tgz",
+      "integrity": "sha512-176grgAgU2U303rD2/vcOmNg0kGPbhzckuH1TEP2al7n0AQipZIy9P15usd2TKQCG1g+E1jX/ZVQSzs4sUDwgA==",
+      "license": "MIT"
+    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-picker",
-  "version": "1.0.0",
+  "version": "2.2.0",
   "description": "",
   "main": "tp-date-picker.js",
   "scripts": {
@@ -13,8 +13,8 @@
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
-    "date-fns": "^2.28.0",
-    "date-fns-tz": "^1.3.3",
+    "@date-fns/utc": "^2.1.0",
+    "date-fns": "^4.0.0",
     "lit": "^2.2.0"
   }
 }

tp-date-picker.js

@@ -7,7 +7,7 @@ This program is available under Apache License Version 2.0
 import '@tp/tp-icon/tp-icon.js';
 import { FormElement } from '@tp/helpers/form-element';
 import { LitElement, html, css, svg } from 'lit';
-import { zonedTimeToUtc } from 'date-fns-tz';
+import { UTCDate } from '@date-fns/utc';
 
 class TpDatePicker extends FormElement(LitElement) {
   static get styles() {
@@ -114,6 +114,27 @@ class TpDatePicker extends FormElement(LitElement) {
         .pointer {
           cursor: pointer;
         }
+
+        .event-dots {
+          display: flex;
+          gap: 4px;
+          justify-content: center;
+          position: absolute;
+          bottom: 8px;
+          left: 0;
+          right: 0;
+        }
+
+        .event-dot {
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: var(--tp-datepicker-event-dot-color, #666);
+        }
+
+        div[part~="date"] {
+          position: relative;
+        }
       `
     ];
   }
@@ -121,7 +142,7 @@ class TpDatePicker extends FormElement(LitElement) {
   render() {
     let { month, year, dayNames, value, yearsForward, yearsBackwards } = this;
 
-    const today = new Date();
+    const today = new UTCDate();
 
     if ((!month && month !== 0) || (!year && year !== 0)) {
       month = today.getMonth();
@@ -135,20 +156,20 @@ class TpDatePicker extends FormElement(LitElement) {
       <div class="header">
         <div>
           <div>
-            <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousMonth()}></tp-icon>
           </div>
           <div>${this.monthNames[month]}</div>
           <div class="right">
-            <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextMonth()}></tp-icon>
           </div>
         </div>
         <div>
           <div>
-            <tp-icon .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconPrev} @click=${() => this.previousYear()}></tp-icon>
           </div>
           <div class="pointer" @click=${this.showYearOverlay}>${year}</div>
           <div class="right">
-            <tp-icon .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon>
+            <tp-icon part="nav-icon" .icon=${TpDatePicker.iconNext} @click=${() => this.nextYear()}></tp-icon>
           </div>
         </div>
       </div>
@@ -159,12 +180,24 @@ class TpDatePicker extends FormElement(LitElement) {
         ${curMonth.map(d => {
           const matchesValue = this.equalDate(d, value);
           const isToday = this.equalDate(d, today);
+          const eventCount = this.countEventsForDate(d);
+          
           return html`
-            <div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}"><div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">${d.getDate()}</div></div>
+            <div .date=${d} part="date ${d.getMonth() !== month ? 'filler' : 'of-month'}">
+              <div class="number" part="number ${matchesValue ? 'selected' : ''} ${isToday ? 'today' : ''} ${d.getMonth() === month ? 'of-month' : ''}">
+                ${d.getDate()}
+                ${eventCount > 0 ? html`
+                  <div class="event-dots">
+                    <div class="event-dot" part="event-dot"></div>
+                    ${eventCount > 1 ? html`<div class="event-dot" part="event-dot"></div>` : ''}
+                  </div>
+                ` : ''}
+              </div>
+            </div>
           `
         })}
       </div>
-      <div class="year-overlay" ?visible=${this.showYearSelector} @click=${this.selectYear}>
+      <div class="year-overlay" part="year-overlay" ?visible=${this.showYearSelector} @click=${this.selectYear}>
         ${years.map(y => html`
           <div .value=${y}>${y}</div>
         `)}
@@ -180,10 +213,10 @@ class TpDatePicker extends FormElement(LitElement) {
       year: { type: Number },
       monthNames: { type: Array },
       dayNames: { type: Array },
-      timeZone: { type: String },
       yearsForward: { type: Number },
       yearsBackwards: { type: Number },
       showYearSelector: { type: Boolean },
+      events: { type: Array },
     };
   }
 
@@ -202,11 +235,12 @@ class TpDatePicker extends FormElement(LitElement) {
   constructor() {
     super();
 
-    this.today = new Date();
+    this.today = new UTCDate();
     this.month = this.today.getMonth();
     this.year = this.today.getFullYear();
     this.yearsForward = 10;
     this.yearsBackwards = 100;
+    this.events = [];
 
     this.dayNames = [
       'Mo',
@@ -251,7 +285,7 @@ class TpDatePicker extends FormElement(LitElement) {
   selectDate(e) {
     for (const el of e.composedPath()) {
       if (el.date !== undefined) {
-        this.value = this.timeZone ? zonedTimeToUtc(el.date, this.timeZone) : el.date;
+        this.value = el.date;
         this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
         return;
       }
@@ -293,10 +327,10 @@ class TpDatePicker extends FormElement(LitElement) {
   }
 
   getMonthDates(month = null, year = null) {
-    month = month !== null ? month : new Date().getMonth();
-    year = year || new Date().getFullYear();
+    month = month !== null ? month : new UTCDate().getMonth();
+    year = year || new UTCDate().getFullYear();
 
-    const firstOfMonth = new Date();
+    const firstOfMonth = new UTCDate();
     firstOfMonth.setFullYear(year);
     firstOfMonth.setMonth(month);
     firstOfMonth.setDate(1);
@@ -304,7 +338,7 @@ class TpDatePicker extends FormElement(LitElement) {
     firstOfMonth.setMinutes(0);
     firstOfMonth.setSeconds(0);
 
-    const lastOfMonth = new Date();
+    const lastOfMonth = new UTCDate();
     lastOfMonth.setDate(1);
     lastOfMonth.setFullYear(year);
     lastOfMonth.setMonth(month + 1);
@@ -317,13 +351,13 @@ class TpDatePicker extends FormElement(LitElement) {
 
     while (firstOfMonth.getDay() > 1) {
       firstOfMonth.setDate(firstOfMonth.getDate() - 1);
-      dates.push(new Date(firstOfMonth));
+      dates.push(new UTCDate(firstOfMonth));
     }
 
     dates.reverse();
 
     for (let i = 1; i <= lastOfMonth.getDate(); ++i) {
-      const d = new Date();
+      const d = new UTCDate();
       d.setFullYear(year);
       d.setMonth(month);
       d.setDate(i);
@@ -336,7 +370,7 @@ class TpDatePicker extends FormElement(LitElement) {
     // Make sure we always fill 42 date get guarantee equal size of the date picker.
     while (dates.length < 42) {
       lastOfMonth.setDate(lastOfMonth.getDate() + 1);
-      dates.push(new Date(lastOfMonth));
+      dates.push(new UTCDate(lastOfMonth));
     }
 
     return dates;
@@ -348,12 +382,18 @@ class TpDatePicker extends FormElement(LitElement) {
 
   selectYear(e) {
     const elList = e.composedPath();
-    elList.forEach(el => {
+    for (const el of elList) {
       if (el.value) {
         this.year = el.value;
         this.showYearSelector = false;
+        break;
       }
-    });
+    }
+  }
+
+  countEventsForDate(date) {
+    if (!Array.isArray(this.events)) return 0;
+    return this.events.filter(event => this.equalDate(event, date)).length;
   }
 }