Some ignored filles was missing

wwwroot/js/strategies/MonthViewStrategy.js

@@ -0,0 +1,124 @@
+/**
+ * MonthViewStrategy - Strategy for month view rendering
+ * Completely different from week view - no time axis, cell-based events
+ */
+import { DateCalculator } from '../utils/DateCalculator';
+import { calendarConfig } from '../core/CalendarConfig';
+export class MonthViewStrategy {
+    constructor() {
+        DateCalculator.initialize(calendarConfig);
+        this.dateCalculator = new DateCalculator();
+    }
+    getLayoutConfig() {
+        return {
+            needsTimeAxis: false, // No time axis in month view!
+            columnCount: 7, // Always 7 days (Mon-Sun)
+            scrollable: false, // Month fits in viewport
+            eventPositioning: 'cell-based' // Events go in day cells
+        };
+    }
+    renderGrid(context) {
+        // Clear existing content
+        context.container.innerHTML = '';
+        // Create month grid (completely different from week!)
+        this.createMonthGrid(context);
+    }
+    createMonthGrid(context) {
+        const monthGrid = document.createElement('div');
+        monthGrid.className = 'month-grid';
+        monthGrid.style.display = 'grid';
+        monthGrid.style.gridTemplateColumns = 'repeat(7, 1fr)';
+        monthGrid.style.gridTemplateRows = 'auto repeat(6, 1fr)';
+        monthGrid.style.height = '100%';
+        // Add day headers (Mon, Tue, Wed, etc.)
+        this.createDayHeaders(monthGrid);
+        // Add 6 weeks of day cells
+        this.createDayCells(monthGrid, context.currentDate);
+        // Render events in day cells (will be handled by EventRendererManager)
+        // this.renderMonthEvents(monthGrid, context.allDayEvents);
+        context.container.appendChild(monthGrid);
+    }
+    createDayHeaders(container) {
+        const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        dayNames.forEach(dayName => {
+            const header = document.createElement('div');
+            header.className = 'month-day-header';
+            header.textContent = dayName;
+            header.style.padding = '8px';
+            header.style.fontWeight = 'bold';
+            header.style.textAlign = 'center';
+            header.style.borderBottom = '1px solid #e0e0e0';
+            container.appendChild(header);
+        });
+    }
+    createDayCells(container, monthDate) {
+        const dates = this.getMonthDates(monthDate);
+        dates.forEach(date => {
+            const cell = document.createElement('div');
+            cell.className = 'month-day-cell';
+            cell.dataset.date = DateCalculator.formatISODate(date);
+            cell.style.border = '1px solid #e0e0e0';
+            cell.style.minHeight = '100px';
+            cell.style.padding = '4px';
+            cell.style.position = 'relative';
+            // Day number
+            const dayNumber = document.createElement('div');
+            dayNumber.className = 'month-day-number';
+            dayNumber.textContent = date.getDate().toString();
+            dayNumber.style.fontWeight = 'bold';
+            dayNumber.style.marginBottom = '4px';
+            // Check if today
+            if (DateCalculator.isToday(date)) {
+                dayNumber.style.color = '#1976d2';
+                cell.style.backgroundColor = '#f5f5f5';
+            }
+            cell.appendChild(dayNumber);
+            container.appendChild(cell);
+        });
+    }
+    getMonthDates(monthDate) {
+        // Get first day of month
+        const firstOfMonth = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+        // Get Monday of the week containing first day
+        const startDate = DateCalculator.getISOWeekStart(firstOfMonth);
+        // Generate 42 days (6 weeks)
+        const dates = [];
+        for (let i = 0; i < 42; i++) {
+            dates.push(DateCalculator.addDays(startDate, i));
+        }
+        return dates;
+    }
+    renderMonthEvents(container, events) {
+        // TODO: Implement month event rendering
+        // Events will be small blocks in day cells
+    }
+    getNextPeriod(currentDate) {
+        return new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+    }
+    getPreviousPeriod(currentDate) {
+        return new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
+    }
+    getPeriodLabel(date) {
+        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'];
+        return `${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    }
+    getDisplayDates(baseDate) {
+        return this.getMonthDates(baseDate);
+    }
+    getPeriodRange(baseDate) {
+        // Month view shows events for the entire month grid (including partial weeks)
+        const firstOfMonth = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
+        // Get Monday of the week containing first day
+        const startDate = DateCalculator.getISOWeekStart(firstOfMonth);
+        // End date is 41 days after start (42 total days)
+        const endDate = DateCalculator.addDays(startDate, 41);
+        return {
+            startDate,
+            endDate
+        };
+    }
+    destroy() {
+    }
+}
+//# sourceMappingURL=MonthViewStrategy.js.map