feat: makes events clickable

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;
 }

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();