@forcecalendar/interface 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "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 }.

package/src/renderers/DayViewRenderer.js

@@ -5,6 +5,7 @@
  */
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
+import { DateUtils } from '../utils/DateUtils.js';
 
 export class DayViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -30,6 +31,7 @@ export class DayViewRenderer extends BaseViewRenderer {
     this.container.innerHTML = html;
     this._attachEventHandlers();
     this._scrollToCurrentTime();
+    this.startNowIndicatorTimer();
   }
 
   _renderDayView(viewData, _config) {
@@ -54,12 +56,12 @@ export class DayViewRenderer extends BaseViewRenderer {
 
   _extractDayData(viewData, currentDate) {
     let dayDate, dayName, isToday, allDayEvents, timedEvents;
-    const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const locale = this.stateManager.getState().config.locale || 'en-US';
 
     if (viewData.type === 'day' && viewData.date) {
       // Core day view structure
       dayDate = new Date(viewData.date);
-      dayName = viewData.dayName || dayNames[dayDate.getDay()];
+      dayName = viewData.dayName || DateUtils.getDayName(dayDate.getDay(), locale);
       isToday = viewData.isToday !== undefined ? viewData.isToday : this.isToday(dayDate);
       allDayEvents = viewData.allDayEvents || [];
 
@@ -82,7 +84,7 @@ export class DayViewRenderer extends BaseViewRenderer {
       const dayDataItem =
         viewData.days.find(d => this.isSameDay(new Date(d.date), currentDate)) || viewData.days[0];
       dayDate = new Date(dayDataItem.date);
-      dayName = dayNames[dayDate.getDay()];
+      dayName = DateUtils.getDayName(dayDate.getDay(), locale);
       isToday = this.isToday(dayDate);
       const events = dayDataItem.events || [];
       allDayEvents = events.filter(e => e.allDay);

package/src/renderers/MonthViewRenderer.js

@@ -5,6 +5,7 @@
  */
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
+import { DateUtils } from '../utils/DateUtils.js';
 
 export class MonthViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -50,11 +51,11 @@ export class MonthViewRenderer extends BaseViewRenderer {
   }
 
   _getDayNames(weekStartsOn) {
-    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const locale = this.stateManager.getState().config.locale || 'en-US';
     const dayNames = [];
     for (let i = 0; i < 7; i++) {
       const dayIndex = (weekStartsOn + i) % 7;
-      dayNames.push(days[dayIndex]);
+      dayNames.push(DateUtils.getDayAbbreviation(dayIndex, locale));
     }
     return dayNames;
   }

package/src/renderers/WeekViewRenderer.js

@@ -5,6 +5,7 @@
  */
 
 import { BaseViewRenderer } from './BaseViewRenderer.js';
+import { DateUtils } from '../utils/DateUtils.js';
 
 export class WeekViewRenderer extends BaseViewRenderer {
   constructor(container, stateManager) {
@@ -30,11 +31,12 @@ export class WeekViewRenderer extends BaseViewRenderer {
     this.container.innerHTML = html;
     this._attachEventHandlers();
     this._scrollToCurrentTime();
+    this.startNowIndicatorTimer();
   }
 
   _renderWeekView(viewData, _config) {
     const days = viewData.days;
-    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const locale = this.stateManager.getState().config.locale || 'en-US';
     const hours = Array.from({ length: 24 }, (_, i) => i);
 
     // Process days to categorize events
@@ -44,7 +46,7 @@ export class WeekViewRenderer extends BaseViewRenderer {
       return {
         ...day,
         date: dayDate,
-        dayName: dayNames[dayDate.getDay()],
+        dayName: DateUtils.getDayAbbreviation(dayDate.getDay(), locale),
         dayOfMonth: dayDate.getDate(),
         isToday: this.isToday(dayDate),
         timedEvents: events.filter(e => !e.allDay),

package/src/utils/DateUtils.js

@@ -147,6 +147,14 @@ export class DateUtils extends CoreDateUtils {
     return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
   }
 
+  /**
+   * Get full day name
+   */
+  static getDayName(dayIndex, locale = 'en-US') {
+    const date = new Date(2024, 0, 7 + dayIndex); // Jan 7, 2024 is a Sunday
+    return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(date);
+  }
+
   /**
    * Get month name
    */