@luckydye/calendar 1.3.0 → 1.3.2

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@luckydye/calendar",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "author": "Tim Havlicek",
   "contributors": [],
   "description": "",
   "type": "module",
   "main": "dist/calendar.js",
-  "types": "src/calendar.ts",
+  "types": "src/lib.ts",
   "scripts": {
     "build:app": "APP=true bunx --bun vite build --outDir=dist/calendar --base=./",
     "build": "bunx --bun vite build",

package/src/CalDAVConfig.ts

@@ -44,7 +44,20 @@ interface InhouseSource extends CalendarSource {
   locked?: boolean;
 }
 
-type ConfigurableSource = CalDAVSourceConfig | ICalSource | GoogleSource | InhouseSource;
+interface TimeseriesJsonSource extends CalendarSource {
+  type: "timeseries-json";
+  credentials: {
+    url: string;
+  };
+  locked?: boolean;
+}
+
+type ConfigurableSource =
+  | CalDAVSourceConfig
+  | ICalSource
+  | GoogleSource
+  | InhouseSource
+  | TimeseriesJsonSource;
 
 interface SidebarCalendar {
   id: string;
@@ -621,6 +634,22 @@ export class CalDAVConfigElement extends LitElement {
         enabled: this.formData.enabled ?? true,
         locked: this.formData.locked ?? false,
       } as ICalSource;
+    } else if (this.formData.type === "timeseries-json") {
+      if (!this.formData.credentials?.url) {
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "timeseries-json",
+        credentials: {
+          url: this.formData.credentials.url,
+        },
+        color: this.formData.color || "#06B6D4",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as TimeseriesJsonSource;
     } else if (this.formData.type === "google") {
       if (!this.formData.credentials?.accessToken) {
         alert('Please authenticate with Google before adding the calendar');
@@ -899,12 +928,15 @@ export class CalDAVConfigElement extends LitElement {
                 this.updateForm("color", "#4285F4");
               } else if (type === "caldav" && !this.formData.color) {
                 this.updateForm("color", "#FF6E68");
+              } else if (type === "timeseries-json" && !this.formData.color) {
+                this.updateForm("color", "#06B6D4");
               }
             }}
             ?disabled=${isEditing}
           >
             <option value="caldav">CalDAV (with credentials)</option>
             <option value="ical">iCal URL</option>
+            <option value="timeseries-json">Timeseries JSON (URL)</option>
             <option value="google">Google Calendar</option>
             <option value="inhouse">Inhouse Booking System</option>
           </select>
@@ -972,6 +1004,23 @@ export class CalDAVConfigElement extends LitElement {
                   />
                 </div>
               `
+            : sourceType === "timeseries-json"
+              ? html`
+                  <div class="form-group">
+                    <label class="form-label">Timeseries JSON URL</label>
+                    <input
+                      class="form-input"
+                      type="text"
+                      placeholder="https://example.com/data.json"
+                      .value=${this.formData.credentials?.url || ""}
+                      @input=${(e: Event) =>
+                        this.updateForm("url", (e.target as HTMLInputElement).value)}
+                    />
+                    <small style="color: var(--text-muted, rgba(255, 255, 255, 0.5)); font-size: 11px;">
+                      Expected format: JSON array of objects with a <code>timestamp</code> field. Rendered as a heatmap backdrop.
+                    </small>
+                  </div>
+                `
             : sourceType === "google"
               ? html`
                 <div class="google-auth-section">

package/src/CalDAVSource.ts

@@ -74,13 +74,18 @@ export class CalDAVSource implements CalendarSource {
    * Make an authenticated request to the CalDAV server.
    */
   async request(url: string, method: string, body?: string, headers: Record<string, string> = {}): Promise<Response> {
+    const requestHeaders: Record<string, string> = {
+      'Authorization': this.getAuthHeader(),
+      ...headers,
+    };
+
+    if (body && !Object.keys(requestHeaders).some((key) => key.toLowerCase() === 'content-type')) {
+      requestHeaders['Content-Type'] = 'application/xml; charset=utf-8';
+    }
+
     const response = await fetch(url, {
       method,
-      headers: {
-        'Authorization': this.getAuthHeader(),
-        'Content-Type': 'application/xml; charset=utf-8',
-        ...headers,
-      },
+      headers: requestHeaders,
       body,
     });
 
@@ -242,7 +247,7 @@ export class CalDAVSource implements CalendarSource {
   /**
    * Fetch calendar objects (events) from a specific calendar.
    */
-  private async fetchCalendarObjects(calendarUrl: string): Promise<string[]> {
+  private async fetchCalendarObjects(calendarUrl: string): Promise<Array<{ href: string; icalData: string }>> {
     const response = await this.request(
       calendarUrl,
       'REPORT',
@@ -263,11 +268,17 @@ export class CalDAVSource implements CalendarSource {
 
     const text = await response.text();
 
-    const calendarData: string[] = [];
-    const calendarDataRegex = /<[^:]+:calendar-data[^>]*>(.*?)<\/[^:]+:calendar-data>/gs;
+    const calendarObjects: Array<{ href: string; icalData: string }> = [];
+    const responseRegex = /<[^:]+:response[^>]*>([\s\S]*?)<\/[^:]+:response>/g;
+
+    for (const match of text.matchAll(responseRegex)) {
+      const responseBlock = match[1];
+      const hrefMatch = responseBlock.match(/<[^:]+:href[^>]*>(.*?)<\/[^:]+:href>/);
+      const calendarDataMatch = responseBlock.match(/<[^:]+:calendar-data[^>]*>([\s\S]*?)<\/[^:]+:calendar-data>/);
+      if (!hrefMatch || !calendarDataMatch) continue;
 
-    for (const match of text.matchAll(calendarDataRegex)) {
-      let icalData = match[1].trim();
+      const href = new URL(hrefMatch[1], this.credentials.serverUrl).toString();
+      let icalData = calendarDataMatch[1].trim();
       // Unescape XML entities
       icalData = icalData
         .replace(/&lt;/g, '<')
@@ -277,11 +288,11 @@ export class CalDAVSource implements CalendarSource {
         .replace(/&apos;/g, "'");
 
       if (icalData) {
-        calendarData.push(icalData);
+        calendarObjects.push({ href, icalData });
       }
     }
 
-    return calendarData;
+    return calendarObjects;
   }
 
 
@@ -366,7 +377,13 @@ export class CalDAVSource implements CalendarSource {
   /**
    * Map a parsed VCALENDAR event to CalendarEvent.
    */
-  private mapToCalendarEvent(parsed: Partial<CalendarEvent>, calendarDisplayName: string, calendarUrl: string, calendarColor?: string): CalendarEvent | null {
+  private mapToCalendarEvent(
+    parsed: Partial<CalendarEvent>,
+    calendarDisplayName: string,
+    calendarUrl: string,
+    calendarColor?: string,
+    resourceUrl?: string
+  ): CalendarEvent | null {
     if (!parsed.start || !parsed.id) return null;
 
     return {
@@ -387,6 +404,7 @@ export class CalDAVSource implements CalendarSource {
       readOnly: false,
       isAllDay: parsed.isAllDay,
       reminders: parsed.reminders,
+      resourceUrl,
     };
   }
 
@@ -395,9 +413,21 @@ export class CalDAVSource implements CalendarSource {
    */
   async fetchEventsForCalendar(calendarUrl: string, displayName: string, color?: string): Promise<CalendarEvent[]> {
     const calendarObjects = await this.fetchCalendarObjects(calendarUrl);
-    return calendarObjects
-      .map(ical => this.mapToCalendarEvent(parseSingleICalEvent(ical), displayName, calendarUrl, color))
-      .filter((e): e is CalendarEvent => e !== null);
+    const events: CalendarEvent[] = [];
+
+    for (const calendarObject of calendarObjects) {
+      const event = this.mapToCalendarEvent(
+        parseSingleICalEvent(calendarObject.icalData),
+        displayName,
+        calendarUrl,
+        color,
+        calendarObject.href
+      );
+      if (!event) continue;
+      events.push(event);
+    }
+
+    return events;
   }
 
   /**
@@ -440,6 +470,7 @@ export class CalDAVSource implements CalendarSource {
     await this.request(eventUrl, 'PUT', icalData, {
       'Content-Type': 'text/calendar; charset=utf-8',
     });
+    fullEvent.resourceUrl = eventUrl;
 
     return fullEvent;
   }
@@ -448,10 +479,11 @@ export class CalDAVSource implements CalendarSource {
    * Update an existing event on the CalDAV server.
    * Derives the calendar URL from updates.calendarId, falling back to the event cache.
    */
-  async updateEvent(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent> {
-    const calendarUrl = updates.calendarId ?? this.eventCalendarMap.get(id);
+  async updateEvent(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent> {
+    const id = event.id;
+    const calendarUrl = updates.calendarId ?? event.calendarId;
     if (!calendarUrl) throw new Error(`Cannot update event ${id}: calendar URL unknown`);
-    const eventUrl = `${calendarUrl.replace(/\/$/, '')}/${id}.ics`;
+    const eventUrl = updates.resourceUrl ?? event.resourceUrl ?? `${calendarUrl.replace(/\/$/, '')}/${id}.ics`;
 
     // For updates, we need to fetch the existing event first
     // This is a simplified implementation
@@ -480,6 +512,7 @@ export class CalDAVSource implements CalendarSource {
       readOnly: false,
       isAllDay: updates.isAllDay !== undefined ? updates.isAllDay : existing.isAllDay,
       reminders: updates.reminders !== undefined ? updates.reminders : existing.reminders,
+      resourceUrl: updates.resourceUrl ?? eventUrl,
     };
 
     const icalData = this.serializeEventToICal(updatedEvent);

package/src/CalendarIntegration.ts

@@ -11,7 +11,7 @@ export interface Calendar {
   calendarUrl?: string;
   fetchEvents(): Promise<CalendarEvent[]>;
   createEvent?(event: Omit<CalendarEvent, 'calendar' | 'color'>): Promise<CalendarEvent>;
-  updateEvent?(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
+  updateEvent?(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
   deleteEvent?(id: string): Promise<void>;
 }
 
@@ -28,7 +28,7 @@ export interface CalendarSource {
   enabled: boolean;
   fetchEvents(): Promise<CalendarEvent[]>;
   createEvent?(event: Omit<CalendarEvent, 'calendar' | 'color'>): Promise<CalendarEvent>;
-  updateEvent?(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
+  updateEvent?(event: CalendarEvent, updates: Partial<CalendarEvent>): Promise<CalendarEvent>;
   deleteEvent?(id: string): Promise<void>;
 }
 

package/src/CalendarInternal.ts

@@ -49,6 +49,8 @@ export interface CalendarEvent {
   status?: 'TENTATIVE' | 'CONFIRMED' | 'CANCELLED';
   reminders?: NotificationConfig[];
   isAllDay?: boolean;
+  visualStyle?: 'heatmap';
+  resourceUrl?: string;
 }
 
 export interface WeekInfo {
@@ -72,8 +74,9 @@ export interface EventSegment {
 }
 
 // Configuration for the sliding window buffer
-const BUFFER_WEEKS = 12; // Weeks to keep as buffer outside viewport
-const EXTEND_WEEKS = 12; // Weeks to add when extending
+const BUFFER_WEEKS = 4; // Trigger extension when within this many weeks of the edge
+const EXTEND_WEEKS = 26; // Weeks to add per extension (~6 months); must be >> BUFFER_WEEKS so
+// the scroll thumb lands well past the buffer entry after each extension, preventing cascade
 const MAX_WEEKS = 96; // Maximum weeks to keep in memory (trim beyond this)
 
 export class CalendarInternal {
@@ -258,18 +261,21 @@ export class CalendarInternal {
 
   getFilteredEvents(filter?: string) {
     const baseEvents = Array.from(this.calendarEvents.values());
+    return this.filterEvents(baseEvents, filter);
+  }
 
+  filterEvents(events: CalendarEvent[], filter?: string): CalendarEvent[] {
     // Filter by enabled calendars
     // Note: enabledCalendars contains calendar IDs, not sourceIds
     const enabledEvents = this.enabledCalendars.size > 0
-      ? baseEvents.filter(e => {
+      ? events.filter(e => {
           // For backwards compatibility: check both sourceId and calendarId
           // CalDAV events: match via calendarId
           // Other sources: match via sourceId
           return (e.calendarId && this.enabledCalendars.has(e.calendarId)) ||
                  (e.sourceId && this.enabledCalendars.has(e.sourceId));
         })
-      : baseEvents;
+      : events;
 
     // Mark events from locked calendars as read-only
     const lockedEvents = this.lockedCalendars.size > 0

package/src/CalendarLayer.ts

@@ -0,0 +1,28 @@
+import type { WeekInfo } from "./CalendarInternal.js";
+
+// Minimum dayHeight at which timed events are rendered at their actual time-of-day position.
+export const TIME_SCALE_DAY_HEIGHT = 300;
+
+export interface LayerContext {
+	ctx: CanvasRenderingContext2D;
+	width: number;
+	height: number;
+	scrollTop: number;
+	dayWidth: number;
+	dayHeight: number;
+	leftGutterWidth: number;
+	columnsPerRow: number;
+	rowsPerWeek: number;
+	visibleWeeks: WeekInfo[];
+	allWeeks: WeekInfo[];
+	fontFamily: string;
+	styles: Record<string, string>;
+	getDayVisualPosition: (dayIndex: number) => { row: number; col: number };
+	filter: string | null;
+}
+
+export interface CalendarLayer {
+	name: string;
+	enabled: boolean;
+	render(lc: LayerContext): void;
+}