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

Refactors date handling for ISO week compatibility

Browse source 
Centralizes all date calculations into a new `DateCalculator` class for better maintainability and consistency.

Ensures correct ISO week handling (Monday as the first day) throughout the calendar.

Updates `CalendarConfig` to use ISO day numbering (1-7 for Mon-Sun) for work week definitions.

Fixes issue where date calculations were inconsistent.
Enhances event rendering and navigation.
Updates navigation logic to use pre-rendered events.
Removes the need for `CONTAINER_READY_FOR_EVENTS` event.
This commit is contained in:
Janus Knudsen 2025-08-20 00:39:31 +02:00
parent efc1742dad
commit 7d513600d8
13 changed files with 230 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/renderers/NavigationRenderer.ts
View file

@ -1,8 +1,8 @@
import { IEventBus } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { DateUtils } from '../utils/DateUtils';
import { CalendarConfig } from '../core/CalendarConfig';
import { DateCalculator } from '../utils/DateCalculator';
import { EventRenderingService } from './EventRendererManager';
/**
* NavigationRenderer - Handles DOM rendering for navigation containers
@ -12,10 +12,12 @@ export class NavigationRenderer {
private eventBus: IEventBus;
private config: CalendarConfig;
private dateCalculator: DateCalculator;
private eventRenderer: EventRenderingService;
constructor(eventBus: IEventBus, config: CalendarConfig) {
constructor(eventBus: IEventBus, config: CalendarConfig, eventRenderer: EventRenderingService) {
this.eventBus = eventBus;
this.config = config;
this.eventRenderer = eventRenderer;
this.dateCalculator = new DateCalculator(config);
this.setupEventListeners();
}
@ -51,7 +53,10 @@ export class NavigationRenderer {
* Render a complete container with content and events
*/
public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
console.log('NavigationRenderer: Rendering new container for week:', weekStart.toDateString());
const weekEnd = this.dateCalculator.addDays(weekStart, 6);
console.group(`🎨 RENDERING CONTAINER: ${weekStart.toDateString()} - ${weekEnd.toDateString()}`);
console.log('1. Creating grid structure...');
// Create new grid container
const newGrid = document.createElement('swp-grid-container');
@ -75,17 +80,18 @@ export class NavigationRenderer {
// Add to parent container
parentContainer.appendChild(newGrid);
// Render week content (headers and columns)
console.log('2. Rendering headers and columns...');
this.renderWeekContentInContainer(newGrid, weekStart);
// Emit event to trigger event rendering
const weekEnd = DateUtils.addDays(weekStart, 6);
this.eventBus.emit(EventTypes.CONTAINER_READY_FOR_EVENTS, {
console.log('3. Pre-rendering events synchronously...');
this.eventRenderer.renderEvents({
container: newGrid,
startDate: weekStart,
endDate: weekEnd
});
console.log('✅ Container ready with pre-rendered events');
console.groupEnd();
return newGrid;
}
@ -104,7 +110,6 @@ export class NavigationRenderer {
// Get dates using DateCalculator
const dates = this.dateCalculator.getWorkWeekDates(weekStart);
const workWeekSettings = this.config.getWorkWeekSettings();
// Render headers for target week
dates.forEach((date, i) => {
@ -113,8 +118,10 @@ export class NavigationRenderer {
headerElement.dataset.today = 'true';
}
const dayName = this.dateCalculator.getDayName(date, 'short');
headerElement.innerHTML = `
<swp-day-name>${workWeekSettings.dayNames[i]}</swp-day-name>
<swp-day-name>${dayName}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
headerElement.dataset.date = this.dateCalculator.formatISODate(date);