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:
parent
a03f314c4a
commit
6026d28e6f
4 changed files with 7 additions and 81 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue