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

Enhances event rendering and grid updates

Browse source 
Improves event rendering by adding styling, filtering out all-day events (handled by GridManager), and calculating accurate positioning within the time grid.

Optimizes grid updates to avoid unnecessary rebuilding, instead updating only the week header for all-day events, leading to better performance.
This commit is contained in:
Janus Knudsen 2025-08-05 00:41:59 +02:00
parent 7ac7e0f7f8
commit dc5063729b
3 changed files with 64 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/managers/GridManager.ts
View file

@ -117,16 +117,21 @@ export class GridManager {
return;
}
// Clear existing grid and rebuild POC structure
this.grid.innerHTML = '';
// 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();
// Only clear and rebuild if grid is empty (first render)
if (this.grid.children.length === 0) {
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
this.updateWeekHeader();
}
console.log('GridManager: Grid rendered successfully with POC structure');
}
@ -269,6 +274,26 @@ export class GridManager {
this.updateSpacerHeights();
}
/**
* 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');
if (!weekHeader) return;
// Clear existing all-day events but keep day headers
const allDayEvents = weekHeader.querySelectorAll('swp-allday-event');
allDayEvents.forEach(event => event.remove());
// Re-render all-day events
this.renderAllDayEvents(weekHeader as HTMLElement);
// Update spacer heights
this.updateSpacerHeights();
}
/**
* Update all-day events data and re-render if needed
*/
@ -289,9 +314,9 @@ export class GridManager {
console.log('GridManager: Updated all-day events:', this.allDayEvents.length);
// Re-render if grid is already rendered
// Update only the week header if grid is already rendered
if (this.grid && this.grid.children.length > 0) {
this.render();
this.updateWeekHeader();
}
}