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

Adds work hours management with day-specific overrides

Browse source 
Introduces work hours management with weekly default and date-specific overrides to support per-column scheduling.

Calculates and applies non-work hour overlays to columns.
This allows users to visualize working and non-working times.

Adjusts event rendering to prevent overlap with horizontal timelines.
This commit is contained in:
Janus Knudsen 2025-08-22 22:57:35 +02:00
parent 18c12cd3e6
commit a3ed03ff44
5 changed files with 252 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/renderers/ColumnRenderer.ts
View file

@ -3,6 +3,7 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';
import { WorkHoursManager } from '../managers/WorkHoursManager';
/**
* Interface for column rendering strategies
@ -25,23 +26,28 @@ export interface ColumnRenderContext {
*/
export class DateColumnRenderer implements ColumnRenderer {
private dateCalculator!: DateCalculator;
private workHoursManager!: WorkHoursManager;
render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
const { currentWeek, config } = context;
// Initialize date calculator
// Initialize date calculator and work hours manager
this.dateCalculator = new DateCalculator(config);
this.workHoursManager = new WorkHoursManager(config);
const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
const dateSettings = config.getDateViewSettings();
const daysToShow = dates.slice(0, dateSettings.weekDays);
console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns');
console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns with work hours');
daysToShow.forEach((date) => {
const column = document.createElement('swp-day-column');
(column as any).dataset.date = this.dateCalculator.formatISODate(date);
// Apply work hours styling
this.applyWorkHoursToColumn(column, date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
@ -49,6 +55,28 @@ export class DateColumnRenderer implements ColumnRenderer {
});
}
private applyWorkHoursToColumn(column: HTMLElement, date: Date): void {
const workHours = this.workHoursManager.getWorkHoursForDate(date);
if (workHours === 'off') {
// No work hours - mark as off day (full day will be colored)
(column as any).dataset.workHours = 'off';
console.log(`DateColumnRenderer: ${this.dateCalculator.formatISODate(date)} is an off day`);
} else {
// Calculate and apply non-work hours overlays (before and after work)
const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours);
if (nonWorkStyle) {
// Before work overlay (::before pseudo-element)
column.style.setProperty('--before-work-height', `${nonWorkStyle.beforeWorkHeight}px`);
// After work overlay (::after pseudo-element)
column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`);
console.log(`DateColumnRenderer: ${this.dateCalculator.formatISODate(date)} non-work overlays - before: ${nonWorkStyle.beforeWorkHeight}px, after: ${nonWorkStyle.afterWorkTop}px (work hours: ${workHours.start}-${workHours.end})`);
}
}
}
}
/**