change color of work cells in the past to light

yellow

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';
+            }
+          }
+        }}
       >
         <ViewsDirective>
           <ViewDirective option="Day" />