Adds work week configuration feature

Implements configurable work week presets, allowing users to customize the days displayed in the calendar.

This includes:
- Defining work week settings (work days, day names, total days).
- Providing predefined work week presets (standard, compressed, weekend, full week).
- Adding UI elements to switch between presets.
- Updating grid and header rendering logic to reflect the selected work week.
- Emitting events when the work week changes, triggering necessary UI updates and data re-renders.

This provides a more flexible and personalized calendar experience.
This commit is contained in:
Janus Knudsen 2025-08-18 22:27:17 +02:00
parent 26f0cb8aaa
commit d017d48bd6
11 changed files with 283 additions and 34 deletions

View file

@ -264,6 +264,13 @@ export class CalendarManager {
this.refresh();
});
// Lyt efter workweek changes
this.eventBus.on(EventTypes.WORKWEEK_CHANGED, (event: Event) => {
const customEvent = event as CustomEvent;
console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
this.handleWorkweekChange();
});
// Lyt efter reset requests
this.eventBus.on(EventTypes.RESET_REQUESTED, () => {
this.reset();
@ -281,7 +288,8 @@ export class CalendarManager {
nextDate.setDate(nextDate.getDate() + 1);
break;
case 'week':
nextDate.setDate(nextDate.getDate() + 7);
const workWeekSettings = this.config.getWorkWeekSettings();
nextDate.setDate(nextDate.getDate() + 7); // Move to next calendar week regardless of work days
break;
case 'month':
nextDate.setMonth(nextDate.getMonth() + 1);
@ -302,7 +310,8 @@ export class CalendarManager {
previousDate.setDate(previousDate.getDate() - 1);
break;
case 'week':
previousDate.setDate(previousDate.getDate() - 7);
const workWeekSettings = this.config.getWorkWeekSettings();
previousDate.setDate(previousDate.getDate() - 7); // Move to previous calendar week regardless of work days
break;
case 'month':
previousDate.setMonth(previousDate.getMonth() - 1);
@ -370,4 +379,42 @@ export class CalendarManager {
}
}
/**
* Handle workweek configuration changes
*/
private handleWorkweekChange(): void {
console.log('CalendarManager: Handling workweek change - forcing full grid rebuild');
// Force a complete grid rebuild by clearing existing structure
const container = document.querySelector('swp-calendar-container');
if (container) {
container.innerHTML = ''; // Clear everything to force full rebuild
}
// Re-render the grid with new workweek settings (will now rebuild everything)
this.gridManager.render();
// Re-initialize scroll manager after grid rebuild
this.scrollManager.initialize();
// Re-render events in the new grid structure
this.rerenderEvents();
}
/**
* Re-render events after grid structure changes
*/
private rerenderEvents(): void {
console.log('CalendarManager: Re-rendering events for new workweek');
// Get current period data to determine date range
const periodData = this.calculateCurrentPeriod();
// Trigger event rendering for the current date range
this.eventRenderer.renderEventsForDateRange(
periodData.startDate,
periodData.endDate
);
}
}