From fd011d239f92e480587c8bc1da8d995d37e1cee5 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Mon, 13 Jan 2025 00:37:09 +0100
Subject: [PATCH] Add support for marking calendar events as dots on the day
 circles.

---
 package.json      |  2 +-
 tp-date-picker.js | 42 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d097ddf..5bf962a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-picker",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "",
   "main": "tp-date-picker.js",
   "scripts": {
diff --git a/tp-date-picker.js b/tp-date-picker.js
index a5f6493..fc5bc69 100644
--- a/tp-date-picker.js
+++ b/tp-date-picker.js
@@ -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;
+        }
       `
     ];
   }
@@ -159,8 +180,20 @@ 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>
@@ -183,6 +216,7 @@ class TpDatePicker extends FormElement(LitElement) {
       yearsForward: { type: Number },
       yearsBackwards: { type: Number },
       showYearSelector: { type: Boolean },
+      events: { type: Array },
     };
   }
 
@@ -206,6 +240,7 @@ class TpDatePicker extends FormElement(LitElement) {
     this.year = this.today.getFullYear();
     this.yearsForward = 10;
     this.yearsBackwards = 100;
+    this.events = [];
 
     this.dayNames = [
       'Mo',
@@ -355,6 +390,11 @@ class TpDatePicker extends FormElement(LitElement) {
       }
     }
   }
+
+  countEventsForDate(date) {
+    if (!Array.isArray(this.events)) return 0;
+    return this.events.filter(event => this.equalDate(event, date)).length;
+  }
 }
 
 window.customElements.define('tp-date-picker', TpDatePicker);