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

wip

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-10-06 22:29:31 +02:00
parent 9981a5a5af
commit 7d7a8d9208
2 changed files with 25 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/renderers/GridRenderer.ts
View file

@ -5,6 +5,7 @@ import { ColumnRenderContext } from './ColumnRenderer';
import { eventBus } from '../core/EventBus'; import { eventBus } from '../core/EventBus';
import { DateService } from '../utils/DateService'; import { DateService } from '../utils/DateService';
import { CoreEvents } from '../constants/CoreEvents'; import { CoreEvents } from '../constants/CoreEvents';
import { TimeFormatter } from '../utils/TimeFormatter';
/** /**
* GridRenderer - Centralized DOM rendering for calendar grid * GridRenderer - Centralized DOM rendering for calendar grid
@ -20,9 +21,6 @@ export class GridRenderer {
this.dateService = new DateService(timezone); this.dateService = new DateService(timezone);
} }
/**
* Render the complete grid structure with view-aware optimization
*/
public renderGrid( public renderGrid(
grid: HTMLElement, grid: HTMLElement,
currentDate: Date, currentDate: Date,
@ -41,7 +39,7 @@ export class GridRenderer {
if (grid.children.length === 0) { if (grid.children.length === 0) {
this.createCompleteGridStructure(grid, currentDate, resourceData, view); this.createCompleteGridStructure(grid, currentDate, resourceData, view);
// Setup grid-related event listeners on first render // Setup grid-related event listeners on first render
// this.setupGridEventListeners(); // this.setupGridEventListeners();
} else { } else {
// Optimized update - only refresh dynamic content // Optimized update - only refresh dynamic content
this.updateGridContent(grid, currentDate, resourceData, view); this.updateGridContent(grid, currentDate, resourceData, view);
@ -78,9 +76,6 @@ export class GridRenderer {
grid.appendChild(fragment); grid.appendChild(fragment);
} }
/**
* Create optimized time axis with caching
*/
private createOptimizedTimeAxis(): HTMLElement { private createOptimizedTimeAxis(): HTMLElement {
const timeAxis = document.createElement('swp-time-axis'); const timeAxis = document.createElement('swp-time-axis');
const timeAxisContent = document.createElement('swp-time-axis-content'); const timeAxisContent = document.createElement('swp-time-axis-content');
@ -88,13 +83,11 @@ export class GridRenderer {
const startHour = gridSettings.dayStartHour; const startHour = gridSettings.dayStartHour;
const endHour = gridSettings.dayEndHour; const endHour = gridSettings.dayEndHour;
// Create all hour markers in memory first
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
for (let hour = startHour; hour < endHour; hour++) { for (let hour = startHour; hour < endHour; hour++) {
const marker = document.createElement('swp-hour-marker'); const marker = document.createElement('swp-hour-marker');
const period = hour >= 12 ? 'PM' : 'AM'; const date = new Date(2024, 0, 1, hour, 0);
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour); marker.textContent = TimeFormatter.formatTime(date);
marker.textContent = `${displayHour} ${period}`;
fragment.appendChild(marker); fragment.appendChild(marker);
} }
@ -104,9 +97,6 @@ export class GridRenderer {
return timeAxis; return timeAxis;
} }
/**
* Create optimized grid container with header and scrollable content
*/
private createOptimizedGridContainer( private createOptimizedGridContainer(
currentDate: Date, currentDate: Date,
resourceData: ResourceCalendarData | null, resourceData: ResourceCalendarData | null,

2
wwwroot/css/calendar-layout-css.css
View file

@ -138,7 +138,7 @@ swp-time-axis-content {
swp-hour-marker { swp-hour-marker {
height: var(--hour-height); height: var(--hour-height);
padding: 0 8px 8px 8px; padding: 0 8px 8px 15px;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
display: flex; display: flex;