@forcecalendar/interface 1.0.16 → 1.0.18

package/src/renderers/MonthViewRenderer.js

@@ -0,0 +1,125 @@
+/**
+ * MonthViewRenderer - Renders month calendar grid
+ *
+ * Pure JavaScript renderer for month view, compatible with Salesforce Locker Service.
+ */
+
+import { BaseViewRenderer } from './BaseViewRenderer.js';
+
+export class MonthViewRenderer extends BaseViewRenderer {
+    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;
+        }
+
+        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 = `
+            <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('')}
+                </div>
+                <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
+        `;
+
+        viewData.weeks.forEach(week => {
+            html += this._renderWeek(week);
+        });
+
+        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;
+    }
+
+    _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);
+        });
+
+        html += '</div>';
+        return html;
+    }
+
+    _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 events = day.events || [];
+        const visibleEvents = events.slice(0, this.maxEventsToShow);
+        const moreCount = events.length - this.maxEventsToShow;
+
+        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}">
+                    ${day.dayOfMonth}
+                </div>
+                <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
+                    ${visibleEvents.map(evt => this._renderEvent(evt)).join('')}
+                    ${moreCount > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${moreCount} more</div>` : ''}
+                </div>
+            </div>
+        `;
+    }
+
+    _renderEvent(event) {
+        const color = event.backgroundColor || '#2563eb';
+        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() {
+        // Day click handlers
+        this.container.querySelectorAll('.fc-month-day').forEach(dayEl => {
+            this.addListener(dayEl, 'click', (e) => {
+                if (e.target.closest('.fc-event')) return;
+                const date = new Date(dayEl.dataset.date);
+                this.stateManager.selectDate(date);
+            });
+        });
+
+        // Common event handlers (event clicks)
+        this.attachCommonEventHandlers();
+    }
+}
+
+export default MonthViewRenderer;

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';