From 61e4b25212e8c4140a9dff6956faf762882455c2 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Tue, 16 Sep 2025 13:17:29 -0500
Subject: [PATCH] feat: makes events clickable

---
 assets/styles/app.css                         |  4 ++++
 templates/monitor/upcoming-episodes.html.twig | 11 +++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index 8bcc165..7f9aa38 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -199,6 +199,10 @@ dialog[data-dialog-target="dialog"][closing] {
     @apply flex flex-col gap-1 justify-between;
 }
 
+/** FullCalendar **/
+#upcoming_episodes_calendar .fc-event-main .fc-event-title-container {
+    cursor: pointer !important;
+}
 .fc-col-header-cell {
     @apply bg-orange-500/60 text-white;
 }
diff --git a/templates/monitor/upcoming-episodes.html.twig b/templates/monitor/upcoming-episodes.html.twig
index c31cbfb..7448535 100644
--- a/templates/monitor/upcoming-episodes.html.twig
+++ b/templates/monitor/upcoming-episodes.html.twig
@@ -19,7 +19,7 @@
             <a href="{{ path('app.monitors.ical', {email: app.user.email}) }}" title="Subscribe to the 'Upcoming Episodes' calendar via iCal. Click to export the events to a .ics file or copy the link and use it to subscribe in a calendar app that supports iCal/ics calendars." class="mb-2 self-end dark:text-white decoration-underline">
                 <twig:ux:icon name="lets-icons:calendar-add-light" width="24" class="text-orange-500" />
             </a>
-            <div id="calendar" class="text-white">
+            <div id="upcoming_episodes_calendar" class="text-white">
             </div>
         </twig:Card>
     </div>
@@ -33,15 +33,22 @@
             }
         }
         document.addEventListener('DOMContentLoaded', async function() {
+            const modal = document.getElementById('previewModal');
             let data = await fetch('/api/monitor/upcoming-episodes');
             data = (await data.json())['data'];
 
-            const calendarEl = document.getElementById('calendar');
+            const calendarEl = document.getElementById('upcoming_episodes_calendar');
             const calendar = new FullCalendar.Calendar(calendarEl, {
                 initialView: getView(),
                 events: data['episodes'],
                 windowResize: function(arg) {
                     this.changeView(getView());
+                },
+                eventClick: function (data) {
+                    modal.display({
+                        heading: data.event.title,
+                        content: `<p>${data.event.startStr}</p>`
+                    })
                 }
             });
             calendar.render();