@forcecalendar/interface 1.0.27 → 1.0.29

package/src/renderers/DayViewRenderer.js

@@ -7,92 +7,94 @@
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 
 export class DayViewRenderer extends BaseViewRenderer {
-    constructor(container, stateManager) {
-        super(container, stateManager);
-        this.hourHeight = 60; // pixels per hour
-        this.totalHeight = 24 * this.hourHeight; // 1440px for 24 hours
+  constructor(container, stateManager) {
+    super(container, stateManager);
+    this.hourHeight = 60; // pixels per hour
+    this.totalHeight = 24 * this.hourHeight; // 1440px for 24 hours
+  }
+
+  render() {
+    if (!this.container || !this.stateManager) return;
+
+    const viewData = this.stateManager.getViewData();
+    if (!viewData) {
+      this.container.innerHTML =
+        '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+      return;
     }
 
-    render() {
-        if (!this.container || !this.stateManager) return;
-
-        const viewData = this.stateManager.getViewData();
-        if (!viewData) {
-            this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
-            return;
-        }
-
-        this.cleanup();
-        const config = this.stateManager.getState().config;
-        const html = this._renderDayView(viewData, config);
-        this.container.innerHTML = html;
-        this._attachEventHandlers();
-        this._scrollToCurrentTime();
-    }
+    this.cleanup();
+    const config = this.stateManager.getState().config;
+    const html = this._renderDayView(viewData, config);
+    this.container.innerHTML = html;
+    this._attachEventHandlers();
+    this._scrollToCurrentTime();
+  }
 
-    _renderDayView(viewData, config) {
-        const currentDate = this.stateManager?.getState()?.currentDate || new Date();
-        const dayData = this._extractDayData(viewData, currentDate);
+  _renderDayView(viewData, _config) {
+    const currentDate = this.stateManager?.getState()?.currentDate || new Date();
+    const dayData = this._extractDayData(viewData, currentDate);
 
-        if (!dayData) {
-            return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
-        }
+    if (!dayData) {
+      return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+    }
 
-        const { dayDate, dayName, isToday, allDayEvents, timedEvents } = dayData;
-        const hours = Array.from({ length: 24 }, (_, i) => i);
+    const { dayDate, dayName, isToday, allDayEvents, timedEvents } = dayData;
+    const hours = Array.from({ length: 24 }, (_, i) => i);
 
-        return `
+    return `
             <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
                 ${this._renderHeader(dayDate, dayName, isToday)}
                 ${this._renderAllDayRow(allDayEvents, dayDate)}
                 ${this._renderTimeGrid(timedEvents, isToday, dayDate, hours)}
             </div>
         `;
-    }
-
-    _extractDayData(viewData, currentDate) {
-        let dayDate, dayName, isToday, allDayEvents, timedEvents;
-        const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-
-        if (viewData.type === 'day' && viewData.date) {
-            // Core day view structure
-            dayDate = new Date(viewData.date);
-            dayName = viewData.dayName || dayNames[dayDate.getDay()];
-            isToday = viewData.isToday !== undefined ? viewData.isToday : this.isToday(dayDate);
-            allDayEvents = viewData.allDayEvents || [];
-
-            // Extract timed events from hours array
-            if (viewData.hours && Array.isArray(viewData.hours)) {
-                const eventMap = new Map();
-                viewData.hours.forEach(hour => {
-                    (hour.events || []).forEach(evt => {
-                        if (!eventMap.has(evt.id)) {
-                            eventMap.set(evt.id, evt);
-                        }
-                    });
-                });
-                timedEvents = Array.from(eventMap.values());
-            } else {
-                timedEvents = [];
+  }
+
+  _extractDayData(viewData, currentDate) {
+    let dayDate, dayName, isToday, allDayEvents, timedEvents;
+    const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    if (viewData.type === 'day' && viewData.date) {
+      // Core day view structure
+      dayDate = new Date(viewData.date);
+      dayName = viewData.dayName || dayNames[dayDate.getDay()];
+      isToday = viewData.isToday !== undefined ? viewData.isToday : this.isToday(dayDate);
+      allDayEvents = viewData.allDayEvents || [];
+
+      // Extract timed events from hours array
+      if (viewData.hours && Array.isArray(viewData.hours)) {
+        const eventMap = new Map();
+        viewData.hours.forEach(hour => {
+          (hour.events || []).forEach(evt => {
+            if (!eventMap.has(evt.id)) {
+              eventMap.set(evt.id, evt);
             }
-        } else if (viewData.days && viewData.days.length > 0) {
-            // Enriched structure with days array
-            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()];
-            isToday = this.isToday(dayDate);
-            const events = dayDataItem.events || [];
-            allDayEvents = events.filter(e => e.allDay);
-            timedEvents = events.filter(e => !e.allDay);
-        } else {
-            return null;
-        }
-
-        return { dayDate, dayName, isToday, allDayEvents, timedEvents };
+          });
+        });
+        timedEvents = Array.from(eventMap.values());
+      } else {
+        timedEvents = [];
+      }
+    } else if (viewData.days && viewData.days.length > 0) {
+      // Enriched structure with days array
+      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()];
+      isToday = this.isToday(dayDate);
+      const events = dayDataItem.events || [];
+      allDayEvents = events.filter(e => e.allDay);
+      timedEvents = events.filter(e => !e.allDay);
+    } else {
+      return null;
     }
 
-    _renderHeader(dayDate, dayName, isToday) {
-        return `
+    return { dayDate, dayName, isToday, allDayEvents, timedEvents };
+  }
+
+  _renderHeader(dayDate, dayName, isToday) {
+    return `
             <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
                 <div style="border-right: 1px solid #e5e7eb;"></div>
                 <div style="padding: 16px 24px;">
@@ -105,28 +107,32 @@ export class DayViewRenderer extends BaseViewRenderer {
                 </div>
             </div>
         `;
-    }
+  }
 
-    _renderAllDayRow(allDayEvents, dayDate) {
-        return `
+  _renderAllDayRow(allDayEvents, dayDate) {
+    return `
             <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
                 <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
                     All day
                 </div>
                 <div class="fc-all-day-cell" data-date="${dayDate.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
-                    ${allDayEvents.map(evt => `
+                    ${allDayEvents
+                      .map(
+                        evt => `
                         <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(evt.id)}"
                              style="background-color: ${this.getEventColor(evt)}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
                             ${this.escapeHTML(evt.title)}
                         </div>
-                    `).join('')}
+                    `
+                      )
+                      .join('')}
                 </div>
             </div>
         `;
-    }
+  }
 
-    _renderTimeGrid(timedEvents, isToday, dayDate, hours) {
-        return `
+  _renderTimeGrid(timedEvents, isToday, dayDate, hours) {
+    return `
             <div id="day-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
                 <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: ${this.totalHeight}px;">
                     ${this._renderTimeGutter(hours)}
@@ -134,22 +140,26 @@ export class DayViewRenderer extends BaseViewRenderer {
                 </div>
             </div>
         `;
-    }
+  }
 
-    _renderTimeGutter(hours) {
-        return `
+  _renderTimeGutter(hours) {
+    return `
             <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                ${hours.map(h => `
+                ${hours
+                  .map(
+                    h => `
                     <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
                         ${h === 0 ? '' : this.formatHour(h)}
                     </div>
-                `).join('')}
+                `
+                  )
+                  .join('')}
             </div>
         `;
-    }
+  }
 
-    _renderDayColumn(timedEvents, isToday, dayDate, hours) {
-        return `
+  _renderDayColumn(timedEvents, isToday, dayDate, hours) {
+    return `
             <div class="fc-day-column" data-date="${dayDate.toISOString()}" style="position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
                 ${hours.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join('')}
@@ -161,38 +171,43 @@ export class DayViewRenderer extends BaseViewRenderer {
                 ${timedEvents.map(evt => this.renderTimedEvent(evt, { compact: false })).join('')}
             </div>
         `;
+  }
+
+  _attachEventHandlers() {
+    this.addListener(this.container, 'click', e => {
+      const dayEl = e.target.closest('.fc-day-column');
+      if (!dayEl || !this.container.contains(dayEl)) return;
+      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 + (scrollContainer ? scrollContainer.scrollTop : 0);
+
+      // Calculate time from click position
+      date.setHours(
+        Math.floor(y / this.hourHeight),
+        Math.floor((y % this.hourHeight) / (this.hourHeight / 60)),
+        0,
+        0
+      );
+      this.stateManager.selectDate(date);
+    });
+
+    // Common event handlers (event clicks)
+    this.attachCommonEventHandlers();
+  }
+
+  _scrollToCurrentTime() {
+    if (this._scrolled) return;
+
+    const scrollContainer = this.container.querySelector('#day-scroll-container');
+    if (scrollContainer) {
+      // Scroll to 8 AM, minus some offset for visibility
+      scrollContainer.scrollTop = 8 * this.hourHeight - 50;
+      this._scrolled = true;
     }
-
-    _attachEventHandlers() {
-        this.addListener(this.container, 'click', (e) => {
-            const dayEl = e.target.closest('.fc-day-column');
-            if (!dayEl || !this.container.contains(dayEl)) return;
-            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 + (scrollContainer ? scrollContainer.scrollTop : 0);
-
-            // Calculate time from click position
-            date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
-            this.stateManager.selectDate(date);
-        });
-
-        // Common event handlers (event clicks)
-        this.attachCommonEventHandlers();
-    }
-
-    _scrollToCurrentTime() {
-        if (this._scrolled) return;
-
-        const scrollContainer = this.container.querySelector('#day-scroll-container');
-        if (scrollContainer) {
-            // Scroll to 8 AM, minus some offset for visibility
-            scrollContainer.scrollTop = 8 * this.hourHeight - 50;
-            this._scrolled = true;
-        }
-    }
+  }
 }
 
 export default DayViewRenderer;

package/src/renderers/MonthViewRenderer.js

@@ -7,32 +7,33 @@
 import { BaseViewRenderer } from './BaseViewRenderer.js';
 
 export class MonthViewRenderer extends BaseViewRenderer {
-    constructor(container, stateManager) {
-        super(container, stateManager);
-        this.maxEventsToShow = 3;
+  constructor(container, stateManager) {
+    super(container, stateManager);
+    this.maxEventsToShow = 3;
+  }
+
+  render() {
+    if (!this.container || !this.stateManager) return;
+
+    const viewData = this.stateManager.getViewData();
+    if (!viewData || !viewData.weeks) {
+      this.container.innerHTML =
+        '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
+      return;
     }
 
-    render() {
-        if (!this.container || !this.stateManager) return;
+    this.cleanup();
+    const config = this.stateManager.getState().config;
+    const html = this._renderMonthView(viewData, config);
+    this.container.innerHTML = html;
+    this._attachEventHandlers();
+  }
 
-        const viewData = this.stateManager.getViewData();
-        if (!viewData || !viewData.weeks) {
-            this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
-            return;
-        }
+  _renderMonthView(viewData, config) {
+    const weekStartsOn = config.weekStartsOn || 0;
+    const dayNames = this._getDayNames(weekStartsOn);
 
-        this.cleanup();
-        const config = this.stateManager.getState().config;
-        const html = this._renderMonthView(viewData, config);
-        this.container.innerHTML = html;
-        this._attachEventHandlers();
-    }
-
-    _renderMonthView(viewData, config) {
-        const weekStartsOn = config.weekStartsOn || 0;
-        const dayNames = this._getDayNames(weekStartsOn);
-
-        let html = `
+    let html = `
             <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
                 <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
                     ${dayNames.map(d => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${d}</div>`).join('')}
@@ -40,50 +41,51 @@ export class MonthViewRenderer extends BaseViewRenderer {
                 <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
         `;
 
-        viewData.weeks.forEach(week => {
-            html += this._renderWeek(week);
-        });
+    viewData.weeks.forEach(week => {
+      html += this._renderWeek(week);
+    });
 
-        html += '</div></div>';
-        return html;
-    }
+    html += '</div></div>';
+    return html;
+  }
 
-    _getDayNames(weekStartsOn) {
-        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        const dayNames = [];
-        for (let i = 0; i < 7; i++) {
-            const dayIndex = (weekStartsOn + i) % 7;
-            dayNames.push(days[dayIndex]);
-        }
-        return dayNames;
+  _getDayNames(weekStartsOn) {
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const dayNames = [];
+    for (let i = 0; i < 7; i++) {
+      const dayIndex = (weekStartsOn + i) % 7;
+      dayNames.push(days[dayIndex]);
     }
+    return dayNames;
+  }
 
-    _renderWeek(week) {
-        let html = '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
+  _renderWeek(week) {
+    let html =
+      '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
 
-        week.days.forEach(day => {
-            html += this._renderDay(day);
-        });
+    week.days.forEach(day => {
+      html += this._renderDay(day);
+    });
 
-        html += '</div>';
-        return html;
-    }
+    html += '</div>';
+    return html;
+  }
 
-    _renderDay(day) {
-        const isOtherMonth = !day.isCurrentMonth;
-        const isToday = day.isToday;
+  _renderDay(day) {
+    const isOtherMonth = !day.isCurrentMonth;
+    const isToday = day.isToday;
 
-        const dayBg = isOtherMonth ? '#f3f4f6' : '#fff';
-        const dayNumColor = isOtherMonth ? '#9ca3af' : '#111827';
-        const todayStyle = isToday
-            ? 'background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;'
-            : '';
+    const dayBg = isOtherMonth ? '#f3f4f6' : '#fff';
+    const dayNumColor = isOtherMonth ? '#9ca3af' : '#111827';
+    const todayStyle = isToday
+      ? 'background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;'
+      : '';
 
-        const events = day.events || [];
-        const visibleEvents = events.slice(0, this.maxEventsToShow);
-        const moreCount = events.length - this.maxEventsToShow;
+    const events = day.events || [];
+    const visibleEvents = events.slice(0, this.maxEventsToShow);
+    const moreCount = events.length - this.maxEventsToShow;
 
-        return `
+    return `
             <div class="fc-month-day" data-date="${day.date}"
                  style="background: ${dayBg}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${dayNumColor}; padding: 2px 4px; margin-bottom: 4px; ${todayStyle}">
@@ -95,31 +97,31 @@ export class MonthViewRenderer extends BaseViewRenderer {
                 </div>
             </div>
         `;
-    }
+  }
 
-    _renderEvent(event) {
-        const color = this.getEventColor(event);
-        return `
+  _renderEvent(event) {
+    const color = this.getEventColor(event);
+    return `
             <div class="fc-event" data-event-id="${this.escapeHTML(event.id)}"
                  style="background-color: ${color}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
                 ${this.escapeHTML(event.title)}
             </div>
         `;
-    }
+  }
 
-    _attachEventHandlers() {
-        this.addListener(this.container, 'click', (e) => {
-            const dayEl = e.target.closest('.fc-month-day');
-            if (!dayEl || !this.container.contains(dayEl)) return;
-            if (e.target.closest('.fc-event')) return;
+  _attachEventHandlers() {
+    this.addListener(this.container, 'click', e => {
+      const dayEl = e.target.closest('.fc-month-day');
+      if (!dayEl || !this.container.contains(dayEl)) return;
+      if (e.target.closest('.fc-event')) return;
 
-            const date = new Date(dayEl.dataset.date);
-            this.stateManager.selectDate(date);
-        });
+      const date = new Date(dayEl.dataset.date);
+      this.stateManager.selectDate(date);
+    });
 
-        // Common event handlers (event clicks)
-        this.attachCommonEventHandlers();
-    }
+    // Common event handlers (event clicks)
+    this.attachCommonEventHandlers();
+  }
 }
 
 export default MonthViewRenderer;