Improves calendar event rendering and UX

Refactors calendar rendering for improved user experience and performance.

- Removes unused function for rendering week content directly, streamlining the rendering process.
- Updates mock events to better reflect realistic all-day events.
- Adds file system search permission to claude settings.
- Removes console logs in scroll and navigation managers.
This commit is contained in:
Janus Knudsen 2025-08-17 22:09:50 +02:00
parent a03f314c4a
commit 6026d28e6f
4 changed files with 7 additions and 81 deletions

View file

@ -194,57 +194,6 @@ export class NavigationManager {
});
}
/**
* Render week content in the new grid container
*/
private renderWeekContent(gridContainer: HTMLElement, weekStart: Date): void {
const header = gridContainer.querySelector('swp-calendar-header');
const dayColumns = gridContainer.querySelector('swp-day-columns');
if (!header || !dayColumns) return;
// Clear existing content
header.innerHTML = '';
dayColumns.innerHTML = '';
// Render headers for target week
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
for (let i = 0; i < 7; i++) {
const date = new Date(weekStart);
date.setDate(date.getDate() + i);
const headerElement = document.createElement('swp-day-header');
if (this.isToday(date)) {
headerElement.dataset.today = 'true';
}
headerElement.innerHTML = `
<swp-day-name>${days[date.getDay()]}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
headerElement.dataset.date = this.formatDate(date);
header.appendChild(headerElement);
}
// Render day columns for target week
for (let i = 0; i < 7; i++) {
const column = document.createElement('swp-day-column');
const date = new Date(weekStart);
date.setDate(date.getDate() + i);
column.dataset.date = this.formatDate(date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
dayColumns.appendChild(column);
}
// NOTE: Removed POC event emission to prevent interference with production code
// POC events should not trigger production event rendering
// this.eventBus.emit(EventTypes.WEEK_CONTENT_RENDERED, { ... });
}
// Utility functions (from POC)
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
@ -264,19 +213,12 @@ export class NavigationManager {
const weekNumberElement = document.querySelector('swp-week-number');
const dateRangeElement = document.querySelector('swp-date-range');
if (weekNumberElement) {
if (weekNumberElement)
weekNumberElement.textContent = `Week ${weekNumber}`;
console.log('NavigationManager: Updated week number:', `Week ${weekNumber}`);
} else {
console.warn('NavigationManager: swp-week-number element not found in DOM');
}
if (dateRangeElement) {
if (dateRangeElement)
dateRangeElement.textContent = dateRange;
console.log('NavigationManager: Updated date range:', dateRange);
} else {
console.warn('NavigationManager: swp-date-range element not found in DOM');
}
// Notify other managers about week info update
this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, {
@ -361,7 +303,6 @@ export class NavigationManager {
endDate: weekEnd
});
console.log('NavigationManager: Container rendered with content and events triggered');
return newGrid;
}

View file

@ -16,7 +16,6 @@ export class ScrollManager {
private resizeObserver: ResizeObserver | null = null;
constructor() {
console.log('📜 ScrollManager: Constructor called');
this.init();
}
@ -28,14 +27,12 @@ export class ScrollManager {
* Public method to initialize scroll after grid is rendered
*/
public initialize(): void {
console.log('ScrollManager: Initialize called, setting up scrolling');
this.setupScrolling();
}
private subscribeToEvents(): void {
// Handle navigation animation completion - sync time axis position
eventBus.on(EventTypes.NAVIGATION_ANIMATION_COMPLETE, () => {
console.log('ScrollManager: Navigation animation complete');
this.syncTimeAxisPosition();
this.setupScrolling();
});
@ -110,7 +107,6 @@ export class ScrollManager {
this.resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('ScrollManager: Container resized', entry.contentRect);
this.updateScrollableHeight();
}
});
@ -141,13 +137,6 @@ export class ScrollManager {
// Calculate available width (container width minus time-axis)
const availableWidth = containerRect.width - 60; // 60px time-axis
console.log('ScrollManager: Dynamic height calculation');
console.log('- Container height:', containerRect.height);
console.log('- Navigation height:', navHeight);
console.log('- Header height:', headerHeight);
console.log('- Available height:', availableHeight);
console.log('- Available width:', availableWidth);
// Set the height and width on scrollable content
if (availableHeight > 0) {
this.scrollableContent.style.height = `${availableHeight}px`;
@ -163,8 +152,6 @@ export class ScrollManager {
private setupScrollSynchronization(): void {
if (!this.scrollableContent || !this.timeAxis) return;
console.log('ScrollManager: Setting up scroll synchronization');
// Throttle scroll events for better performance
let scrollTimeout: number | null = null;
@ -194,7 +181,6 @@ export class ScrollManager {
// Debug logging (can be removed later)
if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
}
}
}
@ -205,7 +191,6 @@ export class ScrollManager {
private setupHorizontalScrollSynchronization(): void {
if (!this.scrollableContent || !this.calendarHeader) return;
console.log('ScrollManager: Setting up horizontal scroll synchronization');
// Listen to horizontal scroll events
this.scrollableContent.addEventListener('scroll', () => {
@ -226,7 +211,6 @@ export class ScrollManager {
// Debug logging (can be removed later)
if (scrollLeft % 100 === 0) { // Only log every 100px to avoid spam
console.log(`ScrollManager: Synced calendar-header to scrollLeft: ${scrollLeft}px`);
}
}