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

Adds handling of fit to width bool

Browse source
This commit is contained in:
Janus Knudsen 2025-08-05 21:56:06 +02:00
parent 58f98468a1
commit e6d6599a1e
5 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/managers/GridManager.ts
View file

@ -53,7 +53,7 @@ export class GridManager {
// Re-render grid on config changes
eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => {
const detail = (e as CustomEvent).detail;
if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays'].includes(detail.key)) {
if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays', 'fitToWidth'].includes(detail.key)) {
this.render();
}
});
@ -426,6 +426,7 @@ export class GridManager {
private updateGridStyles(): void {
const root = document.documentElement;
const config = calendarConfig.getAll();
const calendar = document.querySelector('swp-calendar') as HTMLElement;
// Set CSS variables
root.style.setProperty('--hour-height', `${config.hourHeight}px`);
@ -435,6 +436,18 @@ export class GridManager {
root.style.setProperty('--day-end-hour', config.dayEndHour.toString());
root.style.setProperty('--work-start-hour', config.workStartHour.toString());
root.style.setProperty('--work-end-hour', config.workEndHour.toString());
// Set day column min width based on fitToWidth setting
if (config.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
}
// Set fitToWidth data attribute for CSS targeting
if (calendar) {
calendar.setAttribute('data-fit-to-width', config.fitToWidth.toString());
}
}
/**