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:
parent
26f0cb8aaa
commit
d017d48bd6
11 changed files with 283 additions and 34 deletions
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue