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

Improves calendar event rendering and UX

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

65
src/managers/NavigationManager.ts
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;
}