cda201301c
Simplifies calendar configuration and removes resource-specific code paths Eliminates complexity around resource-based calendar rendering by: - Removing ResourceCalendarData type - Removing resource-specific renderers and managers - Streamlining event and grid management logic - Consolidating to single date-based calendar implementation
93 lines
No EOL
3 KiB
TypeScript
93 lines
No EOL
3 KiB
TypeScript
import { CalendarConfig } from '../core/CalendarConfig';
|
|
|
|
interface GridSettings {
|
|
hourHeight: number;
|
|
snapInterval: number;
|
|
dayStartHour: number;
|
|
dayEndHour: number;
|
|
workStartHour: number;
|
|
workEndHour: number;
|
|
fitToWidth?: boolean;
|
|
}
|
|
|
|
/**
|
|
* GridStyleManager - Manages CSS variables and styling for the grid
|
|
* Separated from GridManager to follow Single Responsibility Principle
|
|
*/
|
|
export class GridStyleManager {
|
|
private config: CalendarConfig;
|
|
|
|
constructor(config: CalendarConfig) {
|
|
this.config = config;
|
|
}
|
|
|
|
/**
|
|
* Update all grid CSS variables
|
|
*/
|
|
public updateGridStyles(): void {
|
|
const root = document.documentElement;
|
|
const gridSettings = this.config.getGridSettings();
|
|
const calendar = document.querySelector('swp-calendar') as HTMLElement;
|
|
|
|
// Set CSS variables for time and grid measurements
|
|
this.setTimeVariables(root, gridSettings);
|
|
|
|
// Set column count based on view
|
|
const columnCount = this.calculateColumnCount();
|
|
root.style.setProperty('--grid-columns', columnCount.toString());
|
|
|
|
// Set column width based on fitToWidth setting
|
|
this.setColumnWidth(root, gridSettings);
|
|
|
|
// Set fitToWidth data attribute for CSS targeting
|
|
if (calendar) {
|
|
calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Set time-related CSS variables
|
|
*/
|
|
private setTimeVariables(root: HTMLElement, gridSettings: GridSettings): void {
|
|
root.style.setProperty('--header-height', '80px'); // Fixed header height
|
|
root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
|
|
root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
|
|
root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());
|
|
root.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
|
|
root.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
|
|
root.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
|
|
root.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
|
|
}
|
|
|
|
/**
|
|
* Calculate number of columns based on view
|
|
*/
|
|
private calculateColumnCount(): number {
|
|
const dateSettings = this.config.getDateViewSettings();
|
|
const workWeekSettings = this.config.getWorkWeekSettings();
|
|
|
|
switch (dateSettings.period) {
|
|
case 'day':
|
|
return 1;
|
|
case 'week':
|
|
return workWeekSettings.totalDays;
|
|
case 'month':
|
|
return workWeekSettings.totalDays; // Use work week for month view too
|
|
default:
|
|
return workWeekSettings.totalDays;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set column width based on fitToWidth setting
|
|
*/
|
|
private setColumnWidth(root: HTMLElement, gridSettings: GridSettings): void {
|
|
if (gridSettings.fitToWidth) {
|
|
root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
|
|
} else {
|
|
root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
|
|
}
|
|
}
|
|
|
|
} |