@forcecalendar/interface 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/renderers/BaseViewRenderer.js

@@ -161,14 +161,86 @@ export class BaseViewRenderer {
     return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${minutes}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
   }
 
+  /**
+   * Compute overlap layout columns for a list of timed events.
+   * Returns a Map of event.id -> { column, totalColumns }.
+   * Uses a greedy left-to-right column packing algorithm.
+   * @param {Array} events - Array of event objects with start/end dates
+   * @returns {Map<string, {column: number, totalColumns: number}>}
+   */
+  computeOverlapLayout(events) {
+    if (!events || events.length === 0) return new Map();
+
+    // Convert to sortable entries with minute ranges
+    const entries = events.map(evt => {
+      const start = new Date(evt.start);
+      const end = new Date(evt.end);
+      const startMin = start.getHours() * 60 + start.getMinutes();
+      const endMin = Math.max(startMin + 1, end.getHours() * 60 + end.getMinutes());
+      return { id: evt.id, startMin, endMin };
+    });
+
+    // Sort by start time, then by longer duration first
+    entries.sort((a, b) => a.startMin - b.startMin || (b.endMin - b.startMin) - (a.endMin - a.startMin));
+
+    // Assign columns greedily
+    const columns = []; // each column tracks the end time of its last event
+    const layout = new Map();
+
+    for (const entry of entries) {
+      let placed = false;
+      for (let col = 0; col < columns.length; col++) {
+        if (columns[col] <= entry.startMin) {
+          columns[col] = entry.endMin;
+          layout.set(entry.id, { column: col, totalColumns: 0 });
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) {
+        layout.set(entry.id, { column: columns.length, totalColumns: 0 });
+        columns.push(entry.endMin);
+      }
+    }
+
+    // Determine the max overlapping columns for each cluster of overlapping events
+    // Walk through entries and find connected groups
+    const groups = [];
+    let currentGroup = [];
+    let groupEnd = 0;
+
+    for (const entry of entries) {
+      if (currentGroup.length === 0 || entry.startMin < groupEnd) {
+        currentGroup.push(entry);
+        groupEnd = Math.max(groupEnd, entry.endMin);
+      } else {
+        groups.push(currentGroup);
+        currentGroup = [entry];
+        groupEnd = entry.endMin;
+      }
+    }
+    if (currentGroup.length > 0) groups.push(currentGroup);
+
+    for (const group of groups) {
+      const maxCol = Math.max(...group.map(e => layout.get(e.id).column)) + 1;
+      for (const entry of group) {
+        layout.get(entry.id).totalColumns = maxCol;
+      }
+    }
+
+    return layout;
+  }
+
   /**
    * Render a timed event block
    * @param {Object} event - Event object
    * @param {Object} options - Rendering options
+   * @param {Object} options.compact - Use compact layout
+   * @param {Object} options.overlapLayout - Map from computeOverlapLayout()
    * @returns {string} HTML string
    */
   renderTimedEvent(event, options = {}) {
-    const { compact = true } = options;
+    const { compact = true, overlapLayout = null } = options;
     const start = new Date(event.start);
     const end = new Date(event.end);
     const startMinutes = start.getHours() * 60 + start.getMinutes();
@@ -177,14 +249,26 @@ export class BaseViewRenderer {
 
     const padding = compact ? '4px 8px' : '8px 12px';
     const fontSize = compact ? '11px' : '13px';
-    const margin = compact ? '2px' : '12px';
-    const rightMargin = compact ? '2px' : '24px';
+    const baseMargin = compact ? 2 : 12;
+    const rightPad = compact ? 2 : 24;
     const borderRadius = compact ? '4px' : '6px';
 
+    // Compute left/width based on overlap columns
+    let leftPx, widthCalc;
+    if (overlapLayout && overlapLayout.has(event.id)) {
+      const { column, totalColumns } = overlapLayout.get(event.id);
+      const colWidth = `(100% - ${baseMargin + rightPad}px)`;
+      leftPx = `calc(${baseMargin}px + ${column} * ${colWidth} / ${totalColumns})`;
+      widthCalc = `calc(${colWidth} / ${totalColumns})`;
+    } else {
+      leftPx = `${baseMargin}px`;
+      widthCalc = `calc(100% - ${baseMargin + rightPad}px)`;
+    }
+
     return `
             <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(event.id)}"
                  style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px;
-                        left: ${margin}; right: ${rightMargin};
+                        left: ${leftPx}; width: ${widthCalc};
                         background-color: ${color}; border-radius: ${borderRadius};
                         padding: ${padding}; font-size: ${fontSize};
                         font-weight: 500; color: white; overflow: hidden;

package/src/renderers/DayViewRenderer.js

@@ -168,7 +168,10 @@ export class DayViewRenderer extends BaseViewRenderer {
                 ${isToday ? this.renderNowIndicator() : ''}
 
                 <!-- Timed events -->
-                ${timedEvents.map(evt => this.renderTimedEvent(evt, { compact: false })).join('')}
+                ${(() => {
+                  const layout = this.computeOverlapLayout(timedEvents);
+                  return timedEvents.map(evt => this.renderTimedEvent(evt, { compact: false, overlapLayout: layout })).join('');
+                })()}
             </div>
         `;
   }
@@ -180,14 +183,15 @@ export class DayViewRenderer extends BaseViewRenderer {
       if (e.target.closest('.fc-event')) return;
 
       const date = new Date(dayEl.dataset.date);
-      const rect = dayEl.getBoundingClientRect();
       const scrollContainer = this.container.querySelector('#day-scroll-container');
-      const y = e.clientY - rect.top;
+      const gridTop = dayEl.offsetTop;
+      const y = e.clientY - dayEl.getBoundingClientRect().top + (scrollContainer ? scrollContainer.scrollTop : 0) - gridTop;
 
-      // Calculate time from click position
+      // Calculate time from click position within the 1440px time grid
+      const clampedY = Math.max(0, Math.min(y + gridTop, this.totalHeight));
       date.setHours(
-        Math.floor(y / this.hourHeight),
-        Math.floor((y % this.hourHeight) / (this.hourHeight / 60)),
+        Math.floor(clampedY / this.hourHeight),
+        Math.floor((clampedY % this.hourHeight) / (this.hourHeight / 60)),
         0,
         0
       );

package/src/renderers/WeekViewRenderer.js

@@ -147,7 +147,10 @@ export class WeekViewRenderer extends BaseViewRenderer {
                 ${day.isToday ? this.renderNowIndicator() : ''}
 
                 <!-- Timed events -->
-                ${day.timedEvents.map(evt => this.renderTimedEvent(evt, { compact: true })).join('')}
+                ${(() => {
+                  const layout = this.computeOverlapLayout(day.timedEvents);
+                  return day.timedEvents.map(evt => this.renderTimedEvent(evt, { compact: true, overlapLayout: layout })).join('');
+                })()}
             </div>
         `;
   }
@@ -159,14 +162,15 @@ export class WeekViewRenderer extends BaseViewRenderer {
       if (e.target.closest('.fc-event')) return;
 
       const date = new Date(dayEl.dataset.date);
-      const rect = dayEl.getBoundingClientRect();
       const scrollContainer = this.container.querySelector('#week-scroll-container');
-      const y = e.clientY - rect.top;
+      const gridTop = dayEl.offsetTop;
+      const y = e.clientY - dayEl.getBoundingClientRect().top + (scrollContainer ? scrollContainer.scrollTop : 0) - gridTop;
 
-      // Calculate time from click position
+      // Calculate time from click position within the 1440px time grid
+      const clampedY = Math.max(0, Math.min(y + gridTop, this.totalHeight));
       date.setHours(
-        Math.floor(y / this.hourHeight),
-        Math.floor((y % this.hourHeight) / (this.hourHeight / 60)),
+        Math.floor(clampedY / this.hourHeight),
+        Math.floor((clampedY % this.hourHeight) / (this.hourHeight / 60)),
         0,
         0
       );