diff --git a/dashboard/src/appointments.tsx b/dashboard/src/appointments.tsx index 954b5d8..83ff77c 100644 --- a/dashboard/src/appointments.tsx +++ b/dashboard/src/appointments.tsx @@ -12,7 +12,11 @@ import { } from '@syncfusion/ej2-react-schedule'; import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base'; -import type { EventRenderedArgs, ActionEventArgs } from '@syncfusion/ej2-react-schedule'; +import type { + EventRenderedArgs, + ActionEventArgs, + RenderCellEventArgs, +} from '@syncfusion/ej2-react-schedule'; import { fetchEvents } from './apiEvents'; import { fetchGroups } from './apiGroups'; import { getGroupColor } from './groupColors'; @@ -316,7 +320,7 @@ const Appointments: React.FC = () => { if (args.data.EndTime && args.data.EndTime < now) { // Vergangene Termine: Raumgruppenfarbe mit Transparenz und grauer Schrift args.element.style.backgroundColor = groupColor - ? `${groupColor}80` // 80 = ~50% Transparenz für hex-Farben + ? `${groupColor}` // 100 = ~100% Transparenz für hex-Farben : '#f3f3f3'; args.element.style.color = ''; } else if (groupColor) { @@ -359,6 +363,18 @@ const Appointments: React.FC = () => { } }} firstDayOfWeek={1} + renderCell={(args: RenderCellEventArgs) => { + // Nur für Arbeitszellen (Stunden-/Tageszellen) + if (args.elementType === 'workCells') { + const now = new Date(); + // args.element ist vom Typ Element, daher als HTMLElement casten: + const cell = args.element as HTMLElement; + if (args.date && args.date < now) { + cell.style.backgroundColor = '#fff9e3'; // Hellgelb für Vergangenheit + cell.style.opacity = '0.7'; + } + } + }} >