Link events to SchedulerComponent

dashboard/src/App.tsx

@@ -8,19 +8,19 @@ import {
   LayoutDashboard,
   Calendar,
   Boxes,
-  Users,
-  UserSquare,
   Image,
   User,
   Settings,
+  Monitor,
+  MonitorDotIcon
 } from 'lucide-react';
 
 const sidebarItems = [
   { name: 'Dashboard', path: '/', icon: LayoutDashboard },
   { name: 'Termine', path: '/termine', icon: Calendar },
   { name: 'Ressourcen', path: '/ressourcen', icon: Boxes },
-  { name: 'Infoscreens', path: '/Infoscreens', icon: Users },
-  { name: 'Gruppen', path: '/gruppen', icon: UserSquare },
+  { name: 'Infoscreens', path: '/Infoscreens', icon: Monitor },
+  { name: 'Gruppen', path: '/gruppen', icon: MonitorDotIcon },
   { name: 'Medien', path: '/medien', icon: Image },
   { name: 'Benutzer', path: '/benutzer', icon: User },
   { name: 'Einstellungen', path: '/einstellungen', icon: Settings },

dashboard/src/apiEvents.ts

@@ -0,0 +1,17 @@
+export interface Event {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  allDay: boolean;
+  classNames: string[];
+  extendedProps: Record<string, unknown>;
+}
+
+export async function fetchEvents(): Promise<Event[]> {
+  const response = await fetch('/api/events');
+  if (!response.ok) {
+    throw new Error('Fehler beim Laden der Events');
+  }
+  return await response.json();
+}

dashboard/src/appointments.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   ScheduleComponent,
   Day,
@@ -6,15 +6,13 @@ import {
   WorkWeek,
   Month,
   Agenda,
-  TimelineViews,
-  TimelineMonth,
   Inject,
   ViewsDirective,
   ViewDirective,
-  ResourcesDirective,
-  ResourceDirective,
 } from '@syncfusion/ej2-react-schedule';
 import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
+import { fetchEvents } from './apiEvents';
+import type { Event } from './apiEvents';
 import * as de from 'cldr-data/main/de/ca-gregorian.json';
 import * as numbers from 'cldr-data/main/de/numbers.json';
 import * as timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';
@@ -46,61 +44,31 @@ L10n.load({
 // Kultur setzen
 setCulture('de');
 
-// Ressourcen-Daten
-const resources = [
-  { text: 'Raum A', id: 1, color: '#1aaa55' },
-  { text: 'Raum B', id: 2, color: '#357cd2' },
-  { text: 'Raum C', id: 3, color: '#7fa900' },
-];
+const Appointments: React.FC = () => {
+  const [events, setEvents] = useState<Event[]>([]);
 
-// Dummy-Termine generieren
-const now = new Date();
-const appointments = Array.from({ length: 10 }).map((_, i) => {
-  const dayOffset = Math.floor(i * 1.4); // verteilt auf 14 Tage
-  const start = new Date(now);
-  start.setDate(now.getDate() + dayOffset);
-  start.setHours(9 + (i % 4), 0, 0, 0);
-  const end = new Date(start);
-  end.setHours(start.getHours() + 1);
+  useEffect(() => {
+    fetchEvents().then(setEvents).catch(console.error);
+  }, []);
 
-  return {
-    Id: i + 1,
-    Subject: `Termin ${i + 1}`,
-    StartTime: start,
-    EndTime: end,
-    ResourceId: (i % 3) + 1,
-    Location: resources[i % 3].text,
-  };
-});
-
-const Appointments: React.FC = () => (
-  <ScheduleComponent
-    height="650px"
-    locale="de"
-    currentView="TimelineWeek"
-    eventSettings={{ dataSource: appointments }}
-    group={{ resources: ['Räume'] }}
-  >
-    <ViewsDirective>
-      <ViewDirective option="Week" />
-      <ViewDirective option="TimelineWeek" />
-      <ViewDirective option="Month" />
-      <ViewDirective option="TimelineMonth" />
-    </ViewsDirective>
-    <ResourcesDirective>
-      <ResourceDirective
-        field="ResourceId"
-        title="Räume"
-        name="Räume"
-        allowMultiple={false}
-        dataSource={resources}
-        textField="text"
-        idField="id"
-        colorField="color"
-      />
-    </ResourcesDirective>
-    <Inject services={[Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth]} />
-  </ScheduleComponent>
-);
+  return (
+    <ScheduleComponent
+      height="650px"
+      locale="de"
+      currentView="Month"
+      eventSettings={{ dataSource: events }}
+      firstDayOfWeek={1} // Montag als ersten Wochentag setzen
+    >
+      <ViewsDirective>
+        <ViewDirective option="Day" />
+        <ViewDirective option="Week" />
+        <ViewDirective option="WorkWeek" />
+        <ViewDirective option="Month" />
+        <ViewDirective option="Agenda" />
+      </ViewsDirective>
+      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
+    </ScheduleComponent>
+  );
+};
 
 export default Appointments;