fix: links to upcoming episodes page

templates/monitor/index.html.twig

@@ -4,6 +4,10 @@
 {% block h2 %}Monitors{% endblock %}
 
 {% block action_buttons %}
+    <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false"
+       class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
+        Upcoming Episodes
+    </a>
     <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
 {% endblock %}
 

templates/monitor/upcoming-episodes.html.twig

@@ -0,0 +1,37 @@
+{% extends 'base.html.twig' %}
+
+{% block h2 %}Upcoming Episodes{% endblock %}
+
+{% block action_buttons %}
+    <a href="{{ path('app.monitor.upcoming-episodes') }}"
+       class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
+        Upcoming Episodes
+    </a>
+    <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
+{% endblock %}
+
+{% block body %}
+    {{ turbo_page_requires_reload() }}
+    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
+
+    <div class="p-4">
+        <twig:Card title="Upcoming episodes of shows your monitoring">
+            <div id="calendar" class="text-white">
+            </div>
+        </twig:Card>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', async function() {
+            let data = await fetch('/api/monitor/upcoming-episodes');
+            data = (await data.json())['data'];
+
+            const calendarEl = document.getElementById('calendar');
+            const calendar = new FullCalendar.Calendar(calendarEl, {
+                initialView: 'dayGridMonth',
+                events: data['episodes'],
+            });
+            calendar.render();
+        });
+    </script>
+{% endblock %}