@forcecalendar/interface 1.0.17 → 1.0.19

package/src/renderers/WeekViewRenderer.js

@@ -0,0 +1,171 @@
+/**
+ * WeekViewRenderer - Renders week calendar view
+ *
+ * Pure JavaScript renderer for week view, compatible with Salesforce Locker Service.
+ */
+
+import { BaseViewRenderer } from './BaseViewRenderer.js';
+
+export class WeekViewRenderer extends BaseViewRenderer {
+    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 || !viewData.days || viewData.days.length === 0) {
+            this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
+            return;
+        }
+
+        this.cleanup();
+        const config = this.stateManager.getState().config;
+        const html = this._renderWeekView(viewData, config);
+        this.container.innerHTML = html;
+        this._attachEventHandlers();
+        this._scrollToCurrentTime();
+    }
+
+    _renderWeekView(viewData, config) {
+        const days = viewData.days;
+        const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        const hours = Array.from({ length: 24 }, (_, i) => i);
+
+        // Process days to categorize events
+        const processedDays = days.map(day => {
+            const dayDate = new Date(day.date);
+            const events = day.events || [];
+            return {
+                ...day,
+                date: dayDate,
+                dayName: dayNames[dayDate.getDay()],
+                dayOfMonth: dayDate.getDate(),
+                isToday: this.isToday(dayDate),
+                timedEvents: events.filter(e => !e.allDay),
+                allDayEvents: events.filter(e => e.allDay)
+            };
+        });
+
+        return `
+            <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(processedDays)}
+                ${this._renderAllDayRow(processedDays)}
+                ${this._renderTimeGrid(processedDays, hours)}
+            </div>
+        `;
+    }
+
+    _renderHeader(days) {
+        return `
+            <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                ${days.map(day => `
+                    <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
+                        <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                            ${day.dayName}
+                        </div>
+                        <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${day.isToday ? 'background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;' : 'color: #111827;'}">
+                            ${day.dayOfMonth}
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    _renderAllDayRow(days) {
+        return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; 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>
+                ${days.map(day => `
+                    <div class="fc-all-day-cell" data-date="${day.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
+                        ${day.allDayEvents.map(evt => `
+                            <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(evt.id)}"
+                                 style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                ${this.escapeHTML(evt.title)}
+                            </div>
+                        `).join('')}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    _renderTimeGrid(days, hours) {
+        return `
+            <div id="week-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 repeat(7, 1fr); position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(hours)}
+                    ${days.map(day => this._renderDayColumn(day, hours)).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    _renderTimeGutter(hours) {
+        return `
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${hours.map(h => `
+                    <div style="height: ${this.hourHeight}px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
+                        ${h === 0 ? '' : this.formatHour(h)}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    _renderDayColumn(day, hours) {
+        return `
+            <div class="fc-week-day-column" data-date="${day.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${hours.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join('')}
+
+                <!-- Now indicator for today -->
+                ${day.isToday ? this.renderNowIndicator() : ''}
+
+                <!-- Timed events -->
+                ${day.timedEvents.map(evt => this.renderTimedEvent(evt, { compact: true })).join('')}
+            </div>
+        `;
+    }
+
+    _attachEventHandlers() {
+        // Day column click handlers
+        this.container.querySelectorAll('.fc-week-day-column').forEach(dayEl => {
+            this.addListener(dayEl, 'click', (e) => {
+                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 + (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('#week-scroll-container');
+        if (scrollContainer) {
+            // Scroll to 8 AM, minus some offset for visibility
+            scrollContainer.scrollTop = 8 * this.hourHeight - 50;
+            this._scrolled = true;
+        }
+    }
+}
+
+export default WeekViewRenderer;

package/src/renderers/index.js

@@ -0,0 +1,11 @@
+/**
+ * View Renderers
+ *
+ * Pure JavaScript renderers for calendar views.
+ * Compatible with Salesforce Locker Service (no custom elements).
+ */
+
+export { BaseViewRenderer } from './BaseViewRenderer.js';
+export { MonthViewRenderer } from './MonthViewRenderer.js';
+export { WeekViewRenderer } from './WeekViewRenderer.js';
+export { DayViewRenderer } from './DayViewRenderer.js';

package/src/components/views/DayView.js

@@ -1,437 +0,0 @@
-/**
- * DayView - Professional Time-Grid Day View
- * 
- * Displays a single day schedule with a time axis and event positioning.
- */
-
-import { BaseComponent } from '../../core/BaseComponent.js';
-import { DateUtils } from '../../utils/DateUtils.js';
-import { StyleUtils } from '../../utils/StyleUtils.js';
-import { DOMUtils } from '../../utils/DOMUtils.js';
-
-export class DayView extends BaseComponent {
-    constructor() {
-        super();
-        this._stateManager = null;
-        this.viewData = null;
-        this.hours = Array.from({ length: 24 }, (_, i) => i);
-        this._registryCheckInterval = null;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._startRegistryPolling();
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this._registryCheckInterval) {
-            clearInterval(this._registryCheckInterval);
-        }
-    }
-
-    _startRegistryPolling() {
-        this._checkRegistry();
-        let attempts = 0;
-        this._registryCheckInterval = setInterval(() => {
-            attempts++;
-            if (this._stateManager || attempts > 50) {
-                clearInterval(this._registryCheckInterval);
-                return;
-            }
-            this._checkRegistry();
-        }, 100);
-    }
-
-    _checkRegistry() {
-        const registryId = this.getAttribute('data-state-registry');
-        if (registryId && window.__forceCalendarRegistry && window.__forceCalendarRegistry[registryId]) {
-            clearInterval(this._registryCheckInterval);
-            this.setStateManager(window.__forceCalendarRegistry[registryId]);
-        }
-    }
-
-    set stateManager(manager) {
-        this.setStateManager(manager);
-    }
-
-    setStateManager(manager) {
-        if (this._stateManager === manager) return;
-        this._stateManager = manager;
-        if (manager) {
-            this.unsubscribe = manager.subscribe(this.handleStateUpdate.bind(this));
-            this.loadViewData();
-        }
-    }
-
-    get stateManager() {
-        return this._stateManager;
-    }
-
-    handleStateUpdate(newState, oldState) {
-        // Granular updates
-        if (newState.currentDate !== oldState?.currentDate || newState.view !== oldState?.view) {
-            this.loadViewData();
-            return;
-        }
-
-        if (newState.events !== oldState?.events) {
-            this.loadViewData(); // Simple reload for now
-        }
-
-        if (newState.selectedDate !== oldState?.selectedDate) {
-            this.updateSelection(newState.selectedDate, oldState?.selectedDate);
-        }
-    }
-
-    updateSelection(newDate, oldDate) {
-        const dayCol = this.shadowRoot.querySelector('.day-column');
-        if (!dayCol) return;
-
-        const isMatch = (date) => date && DateUtils.isSameDay(date, new Date(dayCol.dataset.date));
-        
-        if (isMatch(newDate)) {
-            dayCol.classList.add('selected');
-        } else {
-            dayCol.classList.remove('selected');
-        }
-    }
-
-    loadViewData() {
-        if (!this.stateManager) return;
-        const viewData = this.stateManager.getViewData();
-        this.viewData = this.processViewData(viewData);
-        this.render();
-    }
-
-    processViewData(viewData) {
-        if (!viewData) return null;
-
-        let dayData = null;
-        const currentState = this.stateManager?.getState();
-        const currentDate = currentState?.currentDate || new Date();
-
-        if (viewData.days && Array.isArray(viewData.days) && viewData.days.length > 0) {
-            dayData = viewData.days.find(d => DateUtils.isSameDay(new Date(d.date), currentDate)) || viewData.days[0];
-        } 
-        else if (viewData.weeks && Array.isArray(viewData.weeks) && viewData.weeks.length > 0) {
-            const allDays = viewData.weeks.flatMap(w => w.days || []);
-            dayData = allDays.find(d => DateUtils.isSameDay(new Date(d.date), currentDate)) || allDays[0];
-        }
-        else if (viewData.date) {
-            dayData = viewData;
-        }
-
-        if (!dayData) return null;
-
-        const dayDate = new Date(dayData.date);
-        return {
-            ...viewData,
-            day: {
-                ...dayData,
-                date: dayDate,
-                isToday: DateUtils.isToday(dayDate),
-                timedEvents: (dayData.events || []).filter(e => !e.allDay),
-                allDayEvents: (dayData.events || []).filter(e => e.allDay)
-            }
-        };
-    }
-
-    getStyles() {
-        return `
-            :host {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                min-height: 0;
-            }
-
-            .day-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                background: var(--fc-background);
-                min-height: 0;
-                overflow: hidden;
-            }
-
-            /* Header */
-            .day-header {
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background);
-                z-index: 20;
-                flex-shrink: 0;
-            }
-
-            .day-column-header {
-                padding: 16px 24px;
-                text-align: left;
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-            }
-
-            .day-name {
-                font-size: 12px;
-                font-weight: 700;
-                color: var(--fc-text-light);
-                text-transform: uppercase;
-                letter-spacing: 0.1em;
-            }
-
-            .day-number {
-                font-size: 24px;
-                font-weight: 600;
-                color: var(--fc-text-color);
-            }
-
-            .is-today .day-number {
-                color: var(--fc-danger-color);
-            }
-
-            /* All Day Events */
-            .all-day-row {
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                min-height: 36px;
-                flex-shrink: 0;
-            }
-
-            .all-day-label {
-                font-size: 9px;
-                color: var(--fc-text-light);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-right: 1px solid var(--fc-border-color);
-                text-transform: uppercase;
-                font-weight: 700;
-            }
-
-            .all-day-cell {
-                padding: 6px 12px;
-                display: flex;
-                flex-wrap: wrap;
-                gap: 4px;
-            }
-
-            /* Body */
-            .day-body {
-                flex: 1;
-                overflow-y: auto;
-                overflow-x: hidden;
-                position: relative;
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                background: var(--fc-background);
-            }
-
-            .time-gutter {
-                border-right: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                height: 1440px;
-            }
-
-            .time-slot-label {
-                height: 60px;
-                font-size: 11px;
-                color: var(--fc-text-light);
-                text-align: right;
-                padding-right: 12px;
-                font-weight: 500;
-            }
-
-            .day-column {
-                position: relative;
-                height: 1440px;
-            }
-
-            .day-column.selected {
-                background: var(--fc-background-hover);
-            }
-
-            /* Grid Lines */
-            .grid-lines {
-                position: absolute;
-                top: 0;
-                left: 60px;
-                right: 0;
-                bottom: 0;
-                pointer-events: none;
-            }
-
-            .grid-line {
-                height: 60px;
-                border-bottom: 1px solid var(--fc-border-color);
-                width: 100%;
-            }
-
-            /* Event Style */
-            .event-container {
-                position: absolute;
-                left: 12px;
-                right: 24px;
-                border-radius: 6px;
-                padding: 8px 12px;
-                font-size: 13px;
-                font-weight: 500;
-                color: white;
-                background: var(--fc-primary-color);
-                border: 1px solid rgba(0,0,0,0.1);
-                overflow: hidden;
-                box-shadow: var(--fc-shadow);
-                cursor: pointer;
-                transition: all 0.15s ease;
-                z-index: 5;
-            }
-
-            .event-container:hover {
-                z-index: 10;
-                transform: translateX(4px);
-            }
-
-            .now-indicator {
-                position: absolute;
-                left: 0;
-                right: 0;
-                height: 2px;
-                background: var(--fc-danger-color);
-                z-index: 15;
-                pointer-events: none;
-            }
-        `;
-    }
-
-    template() {
-        if (!this.viewData || !this.viewData.day) {
-            return '<div class="day-view" style="padding: 20px; color: var(--fc-text-light);">No data available.</div>';
-        }
-
-        const { day } = this.viewData;
-        const locale = this.stateManager?.state?.config?.locale || 'en-US';
-        const dayName = DateUtils.formatDate(day.date, 'day', locale).split(' ')[0];
-
-        return `
-            <div class="day-view">
-                <div class="day-header">
-                    <div class="time-gutter-header"></div>
-                    <div class="day-column-header ${day.isToday ? 'is-today' : ''}">
-                        <span class="day-name">${dayName}</span>
-                        <span class="day-number">${day.date.getDate()}</span>
-                    </div>
-                </div>
-
-                <div class="all-day-row">
-                    <div class="all-day-label">All day</div>
-                    <div class="all-day-cell">
-                        ${day.allDayEvents.map(e => this.renderAllDayEvent(e)).join('')}
-                    </div>
-                </div>
-
-                <div class="day-body" id="scroll-container">
-                    <div class="grid-lines">
-                        ${this.hours.map(() => `<div class="grid-line"></div>`).join('')}
-                    </div>
-
-                    <div class="time-gutter">
-                        ${this.hours.map(h => `
-                            <div class="time-slot-label">
-                                ${h === 0 ? '' : DateUtils.formatTime(new Date().setHours(h, 0), false)}
-                            </div>
-                        `).join('')}
-                    </div>
-
-                    <div class="day-column" data-date="${day.date.toISOString()}">
-                        ${day.isToday ? this.renderNowIndicator() : ''}
-                        ${day.timedEvents.map(e => this.renderTimedEvent(e)).join('')}
-                    </div>
-                </div>
-            </div>
-        `;
-    }
-
-    renderTimedEvent(event) {
-        const start = new Date(event.start);
-        const end = new Date(event.end);
-
-        const startMinutes = start.getHours() * 60 + start.getMinutes();
-        const durationMinutes = (end - start) / (1000 * 60);
-
-        const top = startMinutes;
-        const height = Math.max(durationMinutes, 30);
-
-        const color = StyleUtils.sanitizeColor(event.backgroundColor);
-        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
-
-        return `
-            <div class="event-container"
-                 style="top: ${top}px; height: ${height}px; background-color: ${color}; color: ${textColor};"
-                 data-event-id="${event.id}">
-                <span class="event-title">${DOMUtils.escapeHTML(event.title)}</span>
-                <span class="event-time">${DateUtils.formatTime(start)} - ${DateUtils.formatTime(end)}</span>
-            </div>
-        `;
-    }
-
-    renderAllDayEvent(event) {
-        const color = StyleUtils.sanitizeColor(event.backgroundColor);
-        const textColor = StyleUtils.sanitizeColor(StyleUtils.getContrastColor(color), 'white');
-
-        return `
-            <div class="event-item"
-                 style="background-color: ${color}; color: ${textColor}; font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-weight: 500; margin-bottom: 2px;"
-                 data-event-id="${event.id}">
-                ${DOMUtils.escapeHTML(event.title)}
-            </div>
-        `;
-    }
-
-    renderNowIndicator() {
-        const now = new Date();
-        const minutes = now.getHours() * 60 + now.getMinutes();
-        return `<div class="now-indicator" style="top: ${minutes}px"></div>`;
-    }
-
-    afterRender() {
-        const container = this.$('#scroll-container');
-        if (container && !this._scrolled) {
-            container.scrollTop = 8 * 60 - 50;
-            this._scrolled = true;
-        }
-
-        this.$$('[data-event-id]').forEach(el => {
-            this.addListener(el, 'click', (e) => {
-                e.stopPropagation();
-                const eventId = e.currentTarget.dataset.eventId;
-                const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
-                if (event) this.emit('event-click', { event });
-            });
-        });
-
-        const dayCol = this.$('.day-column');
-        if (dayCol) {
-            this.addListener(dayCol, 'click', (e) => {
-                const col = e.currentTarget;
-                const container = this.$('#scroll-container');
-                const rect = col.getBoundingClientRect();
-                const y = e.clientY - rect.top + (container ? container.scrollTop : 0);
-                
-                const date = new Date(col.dataset.date);
-                date.setHours(Math.floor(y / 60), Math.floor(y % 60), 0, 0);
-                
-                this.stateManager.selectDate(date);
-                this.emit('day-click', { date });
-            });
-        }
-    }
-
-    unmount() {
-        if (this.unsubscribe) this.unsubscribe();
-    }
-}
-
-export default DayView;