Gäste können Termine in der Kalenderansicht anklicken (Readonly-Details-Popup)

src/Dittes.jsx

@@ -132,6 +132,8 @@ function Dittes({
   const [status, setStatus] = useState("Lade Kalender...");
   const [showModal, setShowModal] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showReadonlyModal, setShowReadonlyModal] = useState(false);
+  const [selectedEvent, setSelectedEvent] = useState(null);
   const [dragStart, setDragStart] = useState(null);
   const [dragEnd, setDragEnd] = useState(null);
   const [page, setPage] = useState(0);
@@ -375,12 +377,17 @@ function Dittes({
                           {dayEvents.slice(0, 3).map((entry) => (
                             <div
                               key={entry.id}
-                              className={`calendar-event-pill ${getEventSpanClass(date, entry.start, entry.end)} ${adminMode ? "calendar-event-pill-clickable" : ""}`}
+                              className={`calendar-event-pill ${getEventSpanClass(date, entry.start, entry.end)} calendar-event-pill-clickable`}
                               style={{ backgroundColor: entry.color || "#1a73e8" }}
                               title={`${entry.title} | ${formatDateTime(entry.start)}`}
                               onClick={(event) => {
                                 event.stopPropagation();
-                                if (adminMode) handleEdit(entry);
+                                if (adminMode) {
+                                  handleEdit(entry);
+                                } else {
+                                  setSelectedEvent(entry);
+                                  setShowReadonlyModal(true);
+                                }
                               }}
                             >
                               {getEventLabel(date, entry)}
@@ -503,6 +510,55 @@ function Dittes({
             </form>
           </Modal.Body>
         </Modal>
+
+        <Modal show={showReadonlyModal} onHide={() => setShowReadonlyModal(false)} centered>
+          <Modal.Header closeButton>
+            <Modal.Title>Termin Details</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            {selectedEvent && (
+              <div className="readonly-event-details">
+                <h5>{selectedEvent.title}</h5>
+                {selectedEvent.location && (
+                  <p className="mb-2">
+                    <strong>{calendarSlug === "kegeln" ? "Wirt" : "Ort"}:</strong> {selectedEvent.location}
+                  </p>
+                )}
+                <p className="mb-2">
+                  <strong>Start:</strong> {formatDateTime(selectedEvent.start)}
+                </p>
+                <p className="mb-2">
+                  <strong>Ende:</strong> {formatDateTime(selectedEvent.end)}
+                </p>
+                {selectedEvent.description && (
+                  <p className="mb-2">
+                    <strong>Beschreibung:</strong> {selectedEvent.description}
+                  </p>
+                )}
+                <div className="d-flex align-items-center gap-2 mt-1">
+                  <span>Farbe:</span>
+                  <span
+                    className="d-inline-block rounded"
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      backgroundColor: selectedEvent.color || "#1a73e8",
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="mt-3 text-end">
+              <button
+                className="btn btn-outline-secondary"
+                type="button"
+                onClick={() => setShowReadonlyModal(false)}
+              >
+                Abbrechen
+              </button>
+            </div>
+          </Modal.Body>
+        </Modal>
       </main>
     </div>
   );

upload/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "./static/css/main.229d58bf.css",
-    "main.js": "./static/js/main.bead9d38.js",
+    "main.js": "./static/js/main.d3a870d3.js",
     "index.html": "./index.html",
     "main.229d58bf.css.map": "./static/css/main.229d58bf.css.map",
-    "main.bead9d38.js.map": "./static/js/main.bead9d38.js.map"
+    "main.d3a870d3.js.map": "./static/js/main.d3a870d3.js.map"
   },
   "entrypoints": [
     "static/css/main.229d58bf.css",
-    "static/js/main.bead9d38.js"
+    "static/js/main.d3a870d3.js"
   ]
 }

upload/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>ESV-Bludenz</title><script defer="defer" src="./static/js/main.bead9d38.js"></script><link href="./static/css/main.229d58bf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>ESV-Bludenz</title><script defer="defer" src="./static/js/main.d3a870d3.js"></script><link href="./static/css/main.229d58bf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

upload/static/js/main.d3a870d3.js.LICENSE.txt

@@ -0,0 +1,55 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/**
+ * @license React
+ * react-dom-client.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */