Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Renaming part 1

Browse source
This commit is contained in:
Janus Knudsen 2025-08-07 00:15:44 +02:00
parent 36ac8d18ab
commit 29811fd4b5
20 changed files with 1424 additions and 582 deletions
Download patch file Download diff file Expand all files Collapse all files

242
src/managers/EventManager.ts
View file

@ -1,6 +1,7 @@
import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent } from '../types/CalendarTypes';
import { IEventBus, CalendarEvent, ResourceCalendarData } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { calendarConfig } from '../core/CalendarConfig';
/**
* EventManager - Administrerer event lifecycle og CRUD operationer
@ -11,9 +12,17 @@ export class EventManager {
private events: CalendarEvent[] = [];
constructor(eventBus: IEventBus) {
console.log('EventManager: Constructor called');
this.eventBus = eventBus;
this.setupEventListeners();
this.loadMockData();
console.log('EventManager: About to call loadMockData()');
this.loadMockData().then(() => {
console.log('EventManager: loadMockData() completed, syncing events');
// Data loaded, sync events after loading
this.syncEvents();
}).catch(error => {
console.error('EventManager: loadMockData() failed:', error);
});
}
private setupEventListeners(): void {
@ -30,189 +39,54 @@ export class EventManager {
});
}
private loadMockData(): void {
// Mock events for current week (July 27 - August 2, 2025)
this.events = [
// Sunday August 3, 2025
{
id: '1',
title: 'Weekend Planning',
start: '2025-08-03T10:00:00',
end: '2025-08-03T11:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#9c27b0' } // Purple
},
// Monday August 4, 2025
{
id: '2',
title: 'Team Standup',
start: '2025-08-04T09:00:00',
end: '2025-08-04T09:30:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 30, color: '#ff5722' } // Deep Orange
},
{
id: '3',
title: 'Project Kickoff',
start: '2025-08-04T14:00:00',
end: '2025-08-04T15:30:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 90, color: '#e91e63' } // Pink
},
// Tuesday August 5, 2025
{
id: '4',
title: 'Deep Work Session',
start: '2025-08-05T10:00:00',
end: '2025-08-05T12:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 120, color: '#3f51b5' } // Indigo
},
{
id: '5',
title: 'Lunch Meeting',
start: '2025-08-05T12:30:00',
end: '2025-08-05T13:30:00',
type: 'meal',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#ff9800' } // Orange
},
// Wednesday August 6, 2025
{
id: '6',
title: 'Client Review',
start: '2025-08-06T15:00:00',
end: '2025-08-06T16:00:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#795548' } // Brown
},
// Thursday August 7, 2025
{
id: '7',
title: 'Sprint Planning',
start: '2025-08-07T09:00:00',
end: '2025-08-07T10:30:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 90, color: '#607d8b' } // Blue Grey
},
{
id: '8',
title: 'Code Review',
start: '2025-08-07T14:00:00',
end: '2025-08-07T15:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#009688' } // Teal
},
// Friday August 8, 2025
{
id: '9',
title: 'Team Standup',
start: '2025-08-08T09:00:00',
end: '2025-08-08T09:30:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 30, color: '#8bc34a' } // Light Green
},
{
id: '10',
title: 'Client Meeting',
start: '2025-08-08T14:00:00',
end: '2025-08-08T15:30:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 90, color: '#cddc39' } // Lime
},
// Saturday August 9, 2025
{
id: '11',
title: 'Weekend Project',
start: '2025-08-09T10:00:00',
end: '2025-08-09T12:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 120, color: '#f44336' } // Red
},
// Test events for early/late hours
{
id: '12',
title: 'Early Morning Workout',
start: '2025-08-05T06:00:00',
end: '2025-08-05T07:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#00bcd4' } // Cyan
},
{
id: '13',
title: 'Late Evening Call',
start: '2025-08-06T21:00:00',
end: '2025-08-06T22:00:00',
type: 'meeting',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 60, color: '#673ab7' } // Deep Purple
},
{
id: '14',
title: 'Midnight Deployment',
start: '2025-08-07T23:00:00',
end: '2025-08-08T01:00:00',
type: 'work',
allDay: false,
syncStatus: 'synced',
metadata: { duration: 120, color: '#ffc107' } // Amber
},
// All-day events for demo
{
id: '15',
title: 'Company Holiday',
start: '2025-08-04T00:00:00',
end: '2025-08-05T23:59:59',
type: 'milestone',
allDay: true,
syncStatus: 'synced',
metadata: {
duration: 1440, // Full day in minutes
color: '#4caf50' // Green color
}
},
{
id: '16',
title: 'Team Building Event',
start: '2025-08-06T00:00:00',
end: '2025-08-06T23:59:59',
type: 'meeting',
allDay: true,
syncStatus: 'synced',
metadata: {
duration: 1440, // Full day in minutes
color: '#2196f3' // Blue color
}
private async loadMockData(): Promise<void> {
try {
const calendarType = calendarConfig.getCalendarType();
let jsonFile: string;
console.log(`EventManager: Calendar type detected: '${calendarType}'`);
if (calendarType === 'resource') {
jsonFile = '/src/data/mock-resource-events.json';
} else {
jsonFile = '/src/data/mock-events.json';
}
];
console.log(`EventManager: Loaded ${this.events.length} mock events`);
console.log('EventManager: First event:', this.events[0]);
console.log('EventManager: Last event:', this.events[this.events.length - 1]);
console.log(`EventManager: Loading ${calendarType} calendar data from ${jsonFile}`);
const response = await fetch(jsonFile);
if (!response.ok) {
throw new Error(`Failed to load mock events: ${response.status}`);
}
if (calendarType === 'resource') {
const resourceData: ResourceCalendarData = await response.json();
// Flatten events from all resources and add resource metadata
this.events = resourceData.resources.flatMap(resource =>
resource.events.map(event => ({
...event,
resourceName: resource.name,
resourceDisplayName: resource.displayName,
resourceEmployeeId: resource.employeeId
}))
);
console.log(`EventManager: Loaded ${this.events.length} events from ${resourceData.resources.length} resources`);
// Emit resource data for GridManager
this.eventBus.emit(EventTypes.RESOURCE_DATA_LOADED, {
resourceData: resourceData
});
} else {
this.events = await response.json();
console.log(`EventManager: Loaded ${this.events.length} date calendar events`);
}
console.log('EventManager: First event:', this.events[0]);
console.log('EventManager: Last event:', this.events[this.events.length - 1]);
} catch (error) {
console.error('EventManager: Failed to load mock events:', error);
this.events = []; // Fallback to empty array
}
}
private syncEvents(): void {

196
src/managers/EventRenderer.ts
View file

@ -2,18 +2,22 @@ import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { calendarConfig } from '../core/CalendarConfig';
import { DateUtils } from '../utils/DateUtils';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
/**
* EventRenderer - Render events i DOM med positionering
* EventRenderer - Render events i DOM med positionering using Strategy Pattern
* Håndterer event positioning og overlap detection
*/
export class EventRenderer {
private eventBus: IEventBus;
private pendingEvents: CalendarEvent[] = [];
constructor(eventBus: IEventBus) {
this.eventBus = eventBus;
this.setupEventListeners();
// Initialize the factory (if not already done)
CalendarTypeFactory.initialize();
}
private setupEventListeners(): void {
@ -35,17 +39,26 @@ export class EventRenderer {
// Clear existing events when view changes
this.clearEvents();
});
// Handle calendar type changes
this.eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
// Re-render events with new strategy
this.tryRenderEvents();
});
}
private pendingEvents: CalendarEvent[] = [];
private tryRenderEvents(): void {
// Only render if we have both events and grid is ready
// Only render if we have both events and appropriate columns are ready
console.log('EventRenderer: tryRenderEvents called, pending events:', this.pendingEvents.length);
if (this.pendingEvents.length > 0) {
const dayColumns = document.querySelectorAll('swp-day-column');
console.log('EventRenderer: Found', dayColumns.length, 'day columns');
if (dayColumns.length > 0) {
const calendarType = calendarConfig.getCalendarType();
let columnsSelector = calendarType === 'resource' ? 'swp-resource-column' : 'swp-day-column';
const columns = document.querySelectorAll(columnsSelector);
console.log(`EventRenderer: Found ${columns.length} ${columnsSelector} elements for ${calendarType} calendar`);
if (columns.length > 0) {
this.renderEvents(this.pendingEvents);
this.pendingEvents = []; // Clear pending events after rendering
}
@ -54,173 +67,34 @@ export class EventRenderer {
private renderEvents(events: CalendarEvent[]): void {
console.log('EventRenderer: renderEvents called with', events.length, 'events');
console.log('EventRenderer: All events:', events.map(e => ({ title: e.title, allDay: e.allDay, start: e.start })));
// Clear existing events first
this.clearEvents();
// Get current week dates for filtering
const currentWeekDates = this.getCurrentWeekDates();
// Filter events for current week and exclude all-day events (handled by GridManager)
const currentWeekEvents = events.filter(event => {
// Skip all-day events - they are handled by GridManager
if (event.allDay) {
return false;
}
const eventDate = new Date(event.start);
const eventDateStr = DateUtils.formatDate(eventDate);
const isInCurrentWeek = currentWeekDates.some(weekDate =>
DateUtils.formatDate(weekDate) === eventDateStr
);
return isInCurrentWeek;
});
// Render each event in the correct day column
currentWeekEvents.forEach(event => {
const eventDate = new Date(event.start);
const dayColumn = this.findDayColumn(eventDate);
if (dayColumn) {
const eventsLayer = dayColumn.querySelector('swp-events-layer');
if (eventsLayer) {
this.renderEvent(event, eventsLayer);
} else {
console.warn('EventRenderer: No events layer found in day column for', DateUtils.formatDate(eventDate));
}
} else {
console.warn('EventRenderer: No day column found for event date', DateUtils.formatDate(eventDate));
}
});
// Get the appropriate event renderer strategy
const calendarType = calendarConfig.getCalendarType();
const eventRenderer = CalendarTypeFactory.getEventRenderer(calendarType);
console.log(`EventRenderer: Using ${calendarType} event renderer strategy`);
// Use strategy to render events
eventRenderer.renderEvents(events, calendarConfig);
// Emit event rendered
this.eventBus.emit(EventTypes.EVENT_RENDERED, {
count: currentWeekEvents.length
count: events.filter(e => !e.allDay).length
});
}
/**
* Get current week dates (Sunday to Saturday)
*/
private getCurrentWeekDates(): Date[] {
const today = new Date();
const weekStart = DateUtils.getWeekStart(today, 0); // Sunday start
const dates: Date[] = [];
for (let i = 0; i < 7; i++) {
const date = DateUtils.addDays(weekStart, i);
dates.push(date);
}
return dates;
}
/**
* Find day column for specific date
*/
private findDayColumn(date: Date): HTMLElement | null {
const dateStr = DateUtils.formatDate(date);
const dayColumn = document.querySelector(`swp-day-column[data-date="${dateStr}"]`) as HTMLElement;
console.log('EventRenderer: Looking for day column with date', dateStr, 'found:', !!dayColumn);
return dayColumn;
}
private renderEvent(event: CalendarEvent, container: Element): void {
const eventElement = document.createElement('swp-event');
eventElement.dataset.eventId = event.id;
eventElement.dataset.type = event.type;
// Calculate position based on time
const position = this.calculateEventPosition(event);
eventElement.style.position = 'absolute';
eventElement.style.top = `${position.top + 1}px`;
eventElement.style.height = `${position.height - 1}px`;
// Only set positioning and color - rest is in CSS
eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
// Format time for display
const startTime = this.formatTime(event.start);
const endTime = this.formatTime(event.end);
// Create event content
eventElement.innerHTML = `
<swp-event-time>${startTime} - ${endTime}</swp-event-time>
<swp-event-title>${event.title}</swp-event-title>
`;
// Add event listeners
this.addEventListeners(eventElement, event);
container.appendChild(eventElement);
// Event successfully rendered
}
private calculateEventPosition(event: CalendarEvent): { top: number; height: number } {
const startDate = new Date(event.start);
const endDate = new Date(event.end);
// Use dayStartHour to match time-axis positioning - this is the visible start hour (6 AM)
const dayStartHour = calendarConfig.get('dayStartHour'); // 6 (6 AM)
const hourHeight = calendarConfig.get('hourHeight');
// Calculate minutes from visible day start (6 AM, not midnight)
const eventHour = startDate.getHours();
const eventMinutes = startDate.getMinutes();
const startMinutes = (eventHour - dayStartHour) * 60 + eventMinutes;
// Calculate duration in minutes
const duration = (endDate.getTime() - startDate.getTime()) / (1000 * 60);
// Convert to pixels - position relative to visible time-grid (starts at dayStartHour)
const top = startMinutes * (hourHeight / 60);
const height = duration * (hourHeight / 60);
return { top, height };
}
private formatTime(isoString: string): string {
const date = new Date(isoString);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? 'PM' : 'AM';
const displayHours = hours % 12 || 12;
const displayMinutes = minutes.toString().padStart(2, '0');
return `${displayHours}:${displayMinutes} ${period}`;
}
private addEventListeners(eventElement: HTMLElement, event: CalendarEvent): void {
// Click handler
eventElement.addEventListener('click', (e) => {
e.stopPropagation();
this.eventBus.emit(EventTypes.EVENT_SELECTED, {
event,
element: eventElement
});
});
// Hover effects are handled by CSS
// Hover effects are now handled by CSS
}
private clearEvents(): void {
const eventsLayers = document.querySelectorAll('swp-events-layer');
eventsLayers.forEach(layer => {
layer.innerHTML = '';
});
const calendarType = calendarConfig.getCalendarType();
const eventRenderer = CalendarTypeFactory.getEventRenderer(calendarType);
eventRenderer.clearEvents();
}
public refresh(): void {
// Request fresh events from EventManager
this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
this.tryRenderEvents();
}
public destroy(): void {
this.pendingEvents = [];
this.clearEvents();
}
}

287
src/managers/GridManager.ts
View file

@ -1,9 +1,13 @@
// Grid structure management - Simple CSS Grid Implementation
// Grid structure management - Simple CSS Grid Implementation with Strategy Pattern
import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes';
import { DateUtils } from '../utils/DateUtils';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ColumnRenderContext } from '../renderers/ColumnRenderer';
/**
* Grid position interface
@ -15,19 +19,23 @@ interface GridPosition {
}
/**
* Manages the calendar grid structure using simple CSS Grid
* Manages the calendar grid structure using simple CSS Grid with Strategy Pattern
*/
export class GridManager {
private container: HTMLElement | null = null;
private grid: HTMLElement | null = null;
private currentWeek: Date | null = null;
private allDayEvents: any[] = []; // Store all-day events for current week
private resourceData: ResourceCalendarData | null = null; // Store resource data for resource calendar
constructor() {
this.init();
}
private init(): void {
// Initialize the factory
CalendarTypeFactory.initialize();
this.findElements();
this.subscribeToEvents();
@ -58,6 +66,11 @@ export class GridManager {
}
});
// Re-render on calendar type change
eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
this.render();
});
// Re-render on view change
eventBus.on(EventTypes.VIEW_CHANGE, () => {
this.render();
@ -83,6 +96,21 @@ export class GridManager {
this.updateAllDayEvents(detail.events);
});
// Handle resource data loaded
eventBus.on(EventTypes.RESOURCE_DATA_LOADED, (e: Event) => {
const detail = (e as CustomEvent).detail;
this.resourceData = detail.resourceData;
console.log(`GridManager: Received resource data for ${this.resourceData!.resources.length} resources`);
// Update grid styles with new column count immediately
this.updateGridStyles();
// Re-render if grid is already rendered
if (this.grid && this.grid.children.length > 0) {
this.render();
}
});
// Handle grid clicks
this.setupGridInteractions();
}
@ -122,11 +150,8 @@ export class GridManager {
console.log('GridManager: First render - creating grid structure');
// Create POC structure: header-spacer + time-axis + week-container + right-column + bottom spacers
this.createHeaderSpacer();
this.createRightHeaderSpacer();
this.createTimeAxis();
this.createWeekContainer();
this.createRightColumn();
this.createBottomRow();
} else {
console.log('GridManager: Re-render - updating existing structure');
// Just update the week header for all-day events
@ -146,27 +171,6 @@ export class GridManager {
this.grid.appendChild(headerSpacer);
}
/**
* Create right header spacer for scrollbar alignment
*/
private createRightHeaderSpacer(): void {
if (!this.grid) return;
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
this.grid.appendChild(rightHeaderSpacer);
}
/**
* Create right column for scrollbar area
*/
private createRightColumn(): void {
if (!this.grid) return;
const rightColumn = document.createElement('swp-right-column');
this.grid.appendChild(rightColumn);
}
/**
* Create time axis (positioned beside week container) like in POC
*/
@ -192,15 +196,15 @@ export class GridManager {
}
/**
* Create week container with header and scrollable content like in POC
* Create week container with header and scrollable content using Strategy Pattern
*/
private createWeekContainer(): void {
if (!this.grid || !this.currentWeek) return;
const weekContainer = document.createElement('swp-week-container');
const weekContainer = document.createElement('swp-grid-container');
// Create week header
const weekHeader = document.createElement('swp-week-header');
// Create week header using Strategy Pattern
const weekHeader = document.createElement('swp-calendar-header');
this.renderWeekHeaders(weekHeader);
weekContainer.appendChild(weekHeader);
@ -212,7 +216,7 @@ export class GridManager {
const gridLines = document.createElement('swp-grid-lines');
timeGrid.appendChild(gridLines);
// Create day columns
// Create day columns using Strategy Pattern
const dayColumns = document.createElement('swp-day-columns');
this.renderDayColumns(dayColumns);
timeGrid.appendChild(dayColumns);
@ -224,74 +228,60 @@ export class GridManager {
}
/**
* Create bottom row with spacers
*/
private createBottomRow(): void {
if (!this.grid) return;
// Bottom spacer (left)
const bottomSpacer = document.createElement('swp-bottom-spacer');
this.grid.appendChild(bottomSpacer);
// Bottom middle spacer
const bottomMiddleSpacer = document.createElement('swp-bottom-middle-spacer');
this.grid.appendChild(bottomMiddleSpacer);
// Right bottom spacer
const rightBottomSpacer = document.createElement('swp-right-bottom-spacer');
this.grid.appendChild(rightBottomSpacer);
}
/**
* Render week headers like in POC
* Render week headers using Strategy Pattern
*/
private renderWeekHeaders(weekHeader: HTMLElement): void {
if (!this.currentWeek) return;
const dates = this.getWeekDates(this.currentWeek);
const weekDays = calendarConfig.get('weekDays');
const daysToShow = dates.slice(0, weekDays);
const calendarType = calendarConfig.getCalendarType();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
const context: HeaderRenderContext = {
currentWeek: this.currentWeek,
config: calendarConfig,
allDayEvents: this.allDayEvents,
resourceData: this.resourceData
};
daysToShow.forEach((date) => {
const header = document.createElement('swp-day-header');
if (this.isToday(date)) {
(header as any).dataset.today = 'true';
}
header.innerHTML = `
<swp-day-name>${this.getDayName(date)}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
(header as any).dataset.date = this.formatDate(date);
weekHeader.appendChild(header);
});
// Render all-day events in row 2
this.renderAllDayEvents(weekHeader);
headerRenderer.render(weekHeader, context);
// Update spacer heights based on all-day events
this.updateSpacerHeights();
}
/**
* Render day columns using Strategy Pattern
*/
private renderDayColumns(dayColumns: HTMLElement): void {
if (!this.currentWeek) return;
console.log('GridManager: renderDayColumns called');
const calendarType = calendarConfig.getCalendarType();
const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
const context: ColumnRenderContext = {
currentWeek: this.currentWeek,
config: calendarConfig,
resourceData: this.resourceData
};
columnRenderer.render(dayColumns, context);
}
/**
* Update only the week header (for all-day events) without rebuilding entire grid
*/
private updateWeekHeader(): void {
if (!this.grid || !this.currentWeek) return;
const weekHeader = this.grid.querySelector('swp-week-header');
const weekHeader = this.grid.querySelector('swp-calendar-header');
if (!weekHeader) return;
// Clear existing all-day events but keep day headers
const allDayEvents = weekHeader.querySelectorAll('swp-allday-event');
allDayEvents.forEach(event => event.remove());
// Clear existing content
weekHeader.innerHTML = '';
// Re-render all-day events
this.renderAllDayEvents(weekHeader as HTMLElement);
// Update spacer heights
this.updateSpacerHeights();
// Re-render headers using Strategy Pattern
this.renderWeekHeaders(weekHeader as HTMLElement);
}
/**
@ -320,64 +310,6 @@ export class GridManager {
}
}
/**
* Render all-day events in week header row 2
*/
private renderAllDayEvents(weekHeader: HTMLElement): void {
if (!this.currentWeek) return;
const dates = this.getWeekDates(this.currentWeek);
const weekDays = calendarConfig.get('weekDays');
const daysToShow = dates.slice(0, weekDays);
// Process each all-day event to calculate its span
this.allDayEvents.forEach(event => {
const startDate = new Date(event.start);
const endDate = new Date(event.end);
// Find start and end column indices
let startColumnIndex = -1;
let endColumnIndex = -1;
daysToShow.forEach((date, index) => {
const dateStr = this.formatDate(date);
const startDateStr = this.formatDate(startDate);
const endDateStr = this.formatDate(endDate);
if (dateStr === startDateStr) {
startColumnIndex = index;
}
// For end date, we need to check if the event spans to this day
// All-day events typically end at 23:59:59, so we check if this date is <= end date
if (date <= endDate) {
endColumnIndex = index;
}
});
// Only render if the event starts within the visible week
if (startColumnIndex >= 0) {
// If end column is not found or is before start, default to single day
if (endColumnIndex < startColumnIndex) {
endColumnIndex = startColumnIndex;
}
const allDayEvent = document.createElement('swp-allday-event');
allDayEvent.textContent = event.title;
// Set grid column span: start column (1-based) to end column + 1 (1-based)
const gridColumnStart = startColumnIndex + 1;
const gridColumnEnd = endColumnIndex + 2; // +2 because grid columns are 1-based and we want to include the end column
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
console.log(`GridManager: All-day event "${event.title}" spans columns ${gridColumnStart} to ${gridColumnEnd-1} (${endColumnIndex - startColumnIndex + 1} days)`);
weekHeader.appendChild(allDayEvent);
}
});
}
/**
* Update spacer heights based on all-day events presence
*/
@ -393,33 +325,6 @@ export class GridManager {
console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
}
/**
* Render day columns like in POC
*/
private renderDayColumns(dayColumns: HTMLElement): void {
console.log('GridManager: renderDayColumns called');
if (!this.currentWeek) {
console.log('GridManager: No currentWeek, returning');
return;
}
const dates = this.getWeekDates(this.currentWeek);
const weekDays = calendarConfig.get('weekDays');
const daysToShow = dates.slice(0, weekDays);
console.log('GridManager: About to render', daysToShow.length, 'day columns');
daysToShow.forEach((date, dayIndex) => {
const column = document.createElement('swp-day-column');
(column as any).dataset.date = this.formatDate(date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
dayColumns.appendChild(column);
});
}
/**
* Update grid CSS variables
*/
@ -427,6 +332,7 @@ export class GridManager {
const root = document.documentElement;
const config = calendarConfig.getAll();
const calendar = document.querySelector('swp-calendar') as HTMLElement;
const calendarType = calendarConfig.getCalendarType();
// Set CSS variables
root.style.setProperty('--hour-height', `${config.hourHeight}px`);
@ -437,6 +343,15 @@ export class GridManager {
root.style.setProperty('--work-start-hour', config.workStartHour.toString());
root.style.setProperty('--work-end-hour', config.workEndHour.toString());
// Set number of columns based on calendar type
let columnCount = 7; // Default for date mode
if (calendarType === 'resource' && this.resourceData) {
columnCount = this.resourceData.resources.length;
} else if (calendarType === 'date') {
columnCount = config.weekDays;
}
root.style.setProperty('--grid-columns', columnCount.toString());
// Set day column min width based on fitToWidth setting
if (config.fitToWidth) {
root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
@ -448,6 +363,8 @@ export class GridManager {
if (calendar) {
calendar.setAttribute('data-fit-to-width', config.fitToWidth.toString());
}
console.log('GridManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
}
/**
@ -456,18 +373,20 @@ export class GridManager {
private setupGridInteractions(): void {
if (!this.grid) return;
// Click handler for day columns
// Click handler for day columns (works for both date and resource columns)
this.grid.addEventListener('click', (e: MouseEvent) => {
// Ignore if clicking on an event
if ((e.target as Element).closest('swp-event')) return;
const dayColumn = (e.target as Element).closest('swp-day-column') as HTMLElement;
const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement;
if (!dayColumn) return;
const position = this.getClickPosition(e, dayColumn);
eventBus.emit(EventTypes.GRID_CLICK, {
date: (dayColumn as any).dataset.date,
resource: (dayColumn as any).dataset.resource,
employeeId: (dayColumn as any).dataset.employeeId,
time: position.time,
minutes: position.minutes
});
@ -478,13 +397,15 @@ export class GridManager {
// Ignore if clicking on an event
if ((e.target as Element).closest('swp-event')) return;
const dayColumn = (e.target as Element).closest('swp-day-column') as HTMLElement;
const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement;
if (!dayColumn) return;
const position = this.getClickPosition(e, dayColumn);
eventBus.emit(EventTypes.GRID_DBLCLICK, {
date: (dayColumn as any).dataset.date,
resource: (dayColumn as any).dataset.resource,
employeeId: (dayColumn as any).dataset.employeeId,
time: position.time,
minutes: position.minutes
});
@ -537,36 +458,6 @@ export class GridManager {
* Utility methods
*/
private formatHour(hour: number): string {
const period = hour >= 12 ? 'PM' : 'AM';
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
return `${displayHour} ${period}`;
}
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
private getDayName(date: Date): string {
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
return days[date.getDay()];
}
private getWeekDates(weekStart: Date): Date[] {
const dates: Date[] = [];
for (let i = 0; i < 7; i++) {
const date = new Date(weekStart);
date.setDate(weekStart.getDate() + i);
dates.push(date);
}
return dates;
}
private isToday(date: Date): boolean {
const today = new Date();
return date.toDateString() === today.toDateString();
}
private minutesToTime(totalMinutes: number): string {
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;

4
src/managers/ScrollManager.ts
View file

@ -108,7 +108,7 @@ export class ScrollManager {
this.scrollableContent = document.querySelector('swp-scrollable-content');
this.calendarContainer = document.querySelector('swp-calendar-container');
this.timeAxis = document.querySelector('swp-time-axis');
this.weekHeader = document.querySelector('swp-week-header');
this.weekHeader = document.querySelector('swp-calendar-header');
console.log('ScrollManager: Found elements:', {
scrollableContent: !!this.scrollableContent,
@ -173,7 +173,7 @@ export class ScrollManager {
const navHeight = navigation ? navigation.getBoundingClientRect().height : 0;
// Find week header height
const weekHeader = document.querySelector('swp-week-header');
const weekHeader = document.querySelector('swp-calendar-header');
const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80;
// Calculate available height for scrollable content