using own fullcalendar component

dashboard/pages/appointments.py

@@ -1,16 +1,60 @@
 # dashboard/pages/appointments.py
-from dash import html
+from dash import html, dcc
 import dash
+from dash_using_fullcalendar import DashUsingFullcalendar
+
+# dash.register_page(__name__, path="/appointments", name="Termine")
+# def layout():  # Als Funktion definieren
+#     return html.Div([
+#         dcc.Store(id="calendar-click-store"),
+#         dcc.Store(id="calendar-event-store"), 
+#         dcc.Input(id="test-input"),
+#         html.Div("TEST")
+#     ])
+import dash_bootstrap_components as dbc
 
 dash.register_page(__name__, path="/appointments", name="Termine")
 
-layout = html.Div(
-    className="appointments-page",
-    children=[
-        html.H3("Terminverwaltung"),
-        html.Div(id="calendar-container"),
-        html.Button("Neuen Termin anlegen", id="btn-add-appointment"),
-        html.Div(id="appointments-feedback"),
-        # Hier später das Modal oder das FullCalendar‐Element einfügen
-    ]
-)
+layout = dbc.Container([
+    dbc.Row([
+        dbc.Col(html.H2("Dash FullCalendar mit Bootstrap 5"))
+    ]),
+    dbc.Row([
+        dbc.Col(
+            DashUsingFullcalendar(
+                id='calendar',
+                events=[
+                    {"id": "1", "title": "Meeting", "date": "2025-06-13T09:00:00"},
+                    {"id": "2", "title": "Workshop", "date": "2025-06-15T14:30:00"}
+                ],
+                initialView="timeGridWeek",
+                headerToolbar={
+                    "left": "prev,next today",
+                    "center": "title",
+                    "right": "dayGridMonth,timeGridWeek,timeGridDay"
+                },
+                height=600,
+                locale="de",
+                slotDuration="00:30:00",
+                slotMinTime="00:00:00",
+                slotMaxTime="24:00:00",
+                scrollTime="07:00:00",
+                weekends=True,
+                allDaySlot=False,
+                firstDay=1,
+                # themeSystem kann auf "bootstrap5" gesetzt werden, wenn das Plugin eingebunden ist
+                themeSystem="bootstrap5"
+            )
+        )
+    ]),
+    dbc.Row([
+        dbc.Col(html.Div(id='output'))
+    ]),
+    dbc.Row([
+        dbc.Col(html.Div(id='event-output'))
+    ]),
+    dbc.Row([
+        dbc.Col(html.Div(id='select-output'))
+    ])
+], fluid=True)
+