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

Implements custom scroll and event logging

Browse source 
Adds custom scroll management for the calendar week view, replacing native scrollbars with a custom handle.

Introduces categorized event logging with console grouping and styling, enhancing debug output. It also allows configuring logging for specific event categories.
This commit is contained in:
Janus Knudsen 2025-07-29 00:52:01 +02:00
parent 001443ce11
commit 9f6d4333cb
7 changed files with 606 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/managers/GridManager.ts
View file

@ -94,7 +94,9 @@ export class GridManager {
this.renderGrid();
// Emit grid rendered event
console.log('GridManager: Emitting GRID_RENDERED event');
eventBus.emit(EventTypes.GRID_RENDERED);
console.log('GridManager: GRID_RENDERED event emitted');
}
/**
@ -115,15 +117,48 @@ export class GridManager {
// Clear existing grid and rebuild POC structure
this.grid.innerHTML = '';
// Create POC structure: time-axis + week-container
// Create POC structure: header-spacer + time-axis + week-container + right-side
this.createHeaderSpacer();
this.createRightHeaderSpacer();
this.createTimeAxis();
this.createRightColumn();
this.createWeekContainer();
console.log('GridManager: Grid rendered successfully with POC structure');
}
/**
* Create time axis (left column) like in POC
* Create header spacer to align time axis with week content
*/
private createHeaderSpacer(): void {
if (!this.grid) return;
const headerSpacer = document.createElement('swp-header-spacer');
this.grid.appendChild(headerSpacer);
}
/**
* Create right header spacer to align right column with week content
*/
private createRightHeaderSpacer(): void {
if (!this.grid) return;
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
this.grid.appendChild(rightHeaderSpacer);
}
/**
* Create right column beside week container
*/
private createRightColumn(): void {
if (!this.grid) return;
const rightColumn = document.createElement('swp-right-column');
this.grid.appendChild(rightColumn);
}
/**
* Create time axis (positioned beside week container) like in POC
*/
private createTimeAxis(): void {
if (!this.grid) return;
@ -132,7 +167,7 @@ export class GridManager {
const startHour = calendarConfig.get('dayStartHour');
const endHour = calendarConfig.get('dayEndHour');
for (let hour = startHour; hour <= endHour; hour++) {
for (let hour = startHour; hour < endHour; hour++) {
const marker = document.createElement('swp-hour-marker');
const period = hour >= 12 ? 'PM' : 'AM';
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
@ -221,7 +256,6 @@ export class GridManager {
const column = document.createElement('swp-day-column');
(column as any).dataset.date = this.formatDate(date);
console.log(`GridManager: Creating day column ${dayIndex} for date ${this.formatDate(date)}`);
// Add dummy content to force column width (temporary test)
const dummyContent = document.createElement('div');