@forcecalendar/interface 1.0.51 → 1.0.53

package/package.json

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

package/src/renderers/BaseViewRenderer.js

@@ -18,6 +18,7 @@ export class BaseViewRenderer {
     this.stateManager = stateManager;
     this._listeners = [];
     this._scrolled = false;
+    this._nowIndicatorTimer = null;
   }
 
   /**
@@ -36,6 +37,10 @@ export class BaseViewRenderer {
       element.removeEventListener(event, handler);
     });
     this._listeners = [];
+    if (this._nowIndicatorTimer) {
+      clearInterval(this._nowIndicatorTimer);
+      this._nowIndicatorTimer = null;
+    }
   }
 
   /**
@@ -137,6 +142,23 @@ export class BaseViewRenderer {
     return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${minutes}px; height: 2px; background: var(--fc-danger-color); z-index: 15; pointer-events: none;"></div>`;
   }
 
+  /**
+   * Start a timer that updates the now indicator position every 60 seconds.
+   * Call this after render() in day/week views that show a now indicator.
+   */
+  startNowIndicatorTimer() {
+    if (this._nowIndicatorTimer) {
+      clearInterval(this._nowIndicatorTimer);
+    }
+    this._nowIndicatorTimer = setInterval(() => {
+      const indicator = this.container.querySelector('.fc-now-indicator');
+      if (indicator) {
+        const now = new Date();
+        indicator.style.top = `${now.getHours() * 60 + now.getMinutes()}px`;
+      }
+    }, 60000);
+  }
+
   /**
    * Compute overlap layout columns for a list of timed events.
    * Returns a Map of event.id -> { column, totalColumns }.
@@ -157,7 +179,9 @@ export class BaseViewRenderer {
     });
 
     // 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));
+    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

package/src/renderers/DayViewRenderer.js

@@ -31,6 +31,7 @@ export class DayViewRenderer extends BaseViewRenderer {
     this.container.innerHTML = html;
     this._attachEventHandlers();
     this._scrollToCurrentTime();
+    this.startNowIndicatorTimer();
   }
 
   _renderDayView(viewData, _config) {
@@ -172,7 +173,11 @@ export class DayViewRenderer extends BaseViewRenderer {
                 <!-- Timed events -->
                 ${(() => {
                   const layout = this.computeOverlapLayout(timedEvents);
-                  return timedEvents.map(evt => this.renderTimedEvent(evt, { compact: false, overlapLayout: layout })).join('');
+                  return timedEvents
+                    .map(evt =>
+                      this.renderTimedEvent(evt, { compact: false, overlapLayout: layout })
+                    )
+                    .join('');
                 })()}
             </div>
         `;
@@ -187,7 +192,11 @@ export class DayViewRenderer extends BaseViewRenderer {
       const date = new Date(dayEl.dataset.date);
       const scrollContainer = this.container.querySelector('#day-scroll-container');
       const gridTop = dayEl.offsetTop;
-      const y = e.clientY - dayEl.getBoundingClientRect().top + (scrollContainer ? scrollContainer.scrollTop : 0) - gridTop;
+      const y =
+        e.clientY -
+        dayEl.getBoundingClientRect().top +
+        (scrollContainer ? scrollContainer.scrollTop : 0) -
+        gridTop;
 
       // Calculate time from click position within the 1440px time grid
       const clampedY = Math.max(0, Math.min(y + gridTop, this.totalHeight));

package/src/renderers/WeekViewRenderer.js

@@ -31,6 +31,7 @@ export class WeekViewRenderer extends BaseViewRenderer {
     this.container.innerHTML = html;
     this._attachEventHandlers();
     this._scrollToCurrentTime();
+    this.startNowIndicatorTimer();
   }
 
   _renderWeekView(viewData, _config) {
@@ -151,7 +152,11 @@ export class WeekViewRenderer extends BaseViewRenderer {
                 <!-- Timed events -->
                 ${(() => {
                   const layout = this.computeOverlapLayout(day.timedEvents);
-                  return day.timedEvents.map(evt => this.renderTimedEvent(evt, { compact: true, overlapLayout: layout })).join('');
+                  return day.timedEvents
+                    .map(evt =>
+                      this.renderTimedEvent(evt, { compact: true, overlapLayout: layout })
+                    )
+                    .join('');
                 })()}
             </div>
         `;
@@ -166,7 +171,11 @@ export class WeekViewRenderer extends BaseViewRenderer {
       const date = new Date(dayEl.dataset.date);
       const scrollContainer = this.container.querySelector('#week-scroll-container');
       const gridTop = dayEl.offsetTop;
-      const y = e.clientY - dayEl.getBoundingClientRect().top + (scrollContainer ? scrollContainer.scrollTop : 0) - gridTop;
+      const y =
+        e.clientY -
+        dayEl.getBoundingClientRect().top +
+        (scrollContainer ? scrollContainer.scrollTop : 0) -
+        gridTop;
 
       // Calculate time from click position within the 1440px time grid
       const clampedY = Math.max(0, Math.min(y + gridTop, this.totalHeight));