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

@ -35,6 +35,17 @@ interface DateViewSettings {
showAllDay: boolean; // Show all-day event row
}
/**
* Work week configuration settings
*/
interface WorkWeekSettings {
id: string;
workDays: number[]; // [1,2,3,4,5] for mon-fri
dayNames: string[]; // ['Mon','Tue','Wed','Thu','Fri']
totalDays: number; // 5
firstWorkDay: number; // 1 = Monday
}
/**
* View settings for resource-based calendar mode
*/
@ -57,6 +68,7 @@ export class CalendarConfig {
private gridSettings: GridSettings;
private dateViewSettings: DateViewSettings;
private resourceViewSettings: ResourceViewSettings;
private currentWorkWeek: string = 'standard';
constructor() {
this.config = {
@ -422,6 +434,83 @@ export class CalendarConfig {
date: date
});
}
/**
* Get work week presets
*/
private getWorkWeekPresets(): { [key: string]: WorkWeekSettings } {
return {
'standard': {
id: 'standard',
workDays: [1,2,3,4,5],
dayNames: ['Mon','Tue','Wed','Thu','Fri'],
totalDays: 5,
firstWorkDay: 1
},
'compressed': {
id: 'compressed',
workDays: [1,2,3,4],
dayNames: ['Mon','Tue','Wed','Thu'],
totalDays: 4,
firstWorkDay: 1
},
'midweek': {
id: 'midweek',
workDays: [3,4,5],
dayNames: ['Wed','Thu','Fri'],
totalDays: 3,
firstWorkDay: 3
},
'weekend': {
id: 'weekend',
workDays: [6,0],
dayNames: ['Sat','Sun'],
totalDays: 2,
firstWorkDay: 6
},
'fullweek': {
id: 'fullweek',
workDays: [0,1,2,3,4,5,6],
dayNames: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
totalDays: 7,
firstWorkDay: 0
}
};
}
/**
* Get current work week settings
*/
getWorkWeekSettings(): WorkWeekSettings {
const presets = this.getWorkWeekPresets();
return presets[this.currentWorkWeek] || presets['standard'];
}
/**
* Set work week preset
*/
setWorkWeek(workWeekId: string): void {
const presets = this.getWorkWeekPresets();
if (presets[workWeekId]) {
this.currentWorkWeek = workWeekId;
// Update dateViewSettings to match work week
this.dateViewSettings.weekDays = presets[workWeekId].totalDays;
// Emit work week change event
eventBus.emit(EventTypes.WORKWEEK_CHANGED, {
workWeekId: workWeekId,
settings: presets[workWeekId]
});
}
}
/**
* Get current work week ID
*/
getCurrentWorkWeek(): string {
return this.currentWorkWeek;
}
}
// Create singleton instance