Add fullcalendar event popup (#8)

Signed-off-by: Christian Berendt <[email protected]>
osism · Dec 20, 2024 · da0120b · da0120b
1 parent 0ecb545
commit da0120b
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/calendar/osism.html b/calendar/osism.html
@@ -6,10 +6,58 @@
   <title>OSISM Community Calendar</title>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.css" rel="stylesheet">
+
+  <style>
+    /* Modal Background */
+    #eventPopup {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    /* Modal Content */
+    #popupContent {
+      background: #fff;
+      padding: 20px;
+      width: 400px;
+      border-radius: 10px;
+      margin: 100px auto;
+      text-align: center;
+      position: relative;
+    }
+
+    /* Close Button */
+    .closeBtn {
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      font-size: 20px;
+      color: #aaa;
+      cursor: pointer;
+    }
+    .closeBtn:hover {
+      color: #000;
+    }
+  </style>
 </head>
 <body>
   <div id="calendar" style="max-width: 1000px; margin: 0 auto;"></div>
 
+  <div id="eventPopup">
+    <div id="popupContent">
+      <span class="closeBtn">&times;</span>
+      <h3 id="popupTitle">Event Title</h3>
+      <p><strong>Start:</strong> <span id="popupStart"></span><br/>
+      <strong>End:</strong> <span id="popupEnd"></span></p>
+      <p id="popupDescription">No description available</p>
+    </div>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/ical.min.js"></script>
 
@@ -43,6 +91,19 @@
       const calendarEl = document.getElementById('calendar');
       const icsUrl = 'https://osism.tech/calendar/osism.ics';
       const events = await loadICS(icsUrl);
+      const popup = document.getElementById('eventPopup');
+      const popupTitle = document.getElementById('popupTitle');
+      const popupStart = document.getElementById('popupStart');
+      const popupEnd = document.getElementById('popupEnd');
+      const popupDescription = document.getElementById('popupDescription');
+      const closeBtn = document.querySelector('.closeBtn');
+
+      closeBtn.onclick = () => popup.style.display = 'none';
+      window.onclick = (event) => {
+        if (event.target === popup) {
+          popup.style.display = 'none';
+        }
+      };
 
       const calendar = new FullCalendar.Calendar(calendarEl, {
         initialView: 'dayGridMonth',
@@ -65,6 +126,16 @@
           minute: '2-digit',
           hour12: false,
         },
+        eventClick: (info) => {
+          const event = info.event;
+
+          popupTitle.textContent = event.title || 'No Title';
+          popupStart.textContent = event.start ? event.start.toLocaleString() : 'N/A';
+          popupEnd.textContent = event.end ? event.end.toLocaleString() : 'N/A';
+          popupDescription.textContent = event.extendedProps.description || 'No description available';
+
+          popup.style.display = 'block';
+        },
       });
 
       calendar.render();