wip: renders calendar with demo data

assets/controllers/upcoming_episodes_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus';
+import { Calendar } from '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    initialize() {
+
+    }
+
+    connect() {
+        let calendar = new Calendar(this.element, {
+            plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
+            initialView: 'dayGridMonth',
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,listWeek'
+            }
+        });
+        calendar.render();
+        // calendar.render();
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}

importmap.php

@@ -70,4 +70,37 @@ return [
     '@ungap/custom-elements' => [
         'version' => '1.3.0',
     ],
+//    '@fullcalendar/core' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/daygrid' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/timegrid' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/list' => [
+//        'version' => '6.1.19',
+//    ],
+//    'preact' => [
+//        'version' => '10.12.1',
+//    ],
+//    'preact/compat' => [
+//        'version' => '10.12.1',
+//    ],
+//    '@fullcalendar/core/index.js' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/core/internal.js' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/core/preact.js' => [
+//        'version' => '6.1.19',
+//    ],
+//    '@fullcalendar/daygrid/internal.js' => [
+//        'version' => '6.1.19',
+//    ],
+//    'preact/hooks' => [
+//        'version' => '10.12.1',
+//    ],
 ];

src/Base/Framework/Controller/IndexController.php

@@ -53,9 +53,6 @@ final class IndexController extends AbstractController
     #[Route('/test')]
     public function monitorTvShow(): Response
     {
-        $this->monitorTvShowHandler->handle(new MonitorTvShowCommand(96));
-        return $this->json([
-            'Success' => 'Monitor added'
-        ]);
+        return $this->render('index/test.html.twig', []);
     }
 }

templates/index/test.html.twig

@@ -0,0 +1,68 @@
+{% extends 'base.html.twig' %}
+
+{% block h2 %}Upcoming Episodes{% endblock %}
+
+{% block javascripts %}
+    <script type='importmap'>
+        {
+          "imports": {
+            "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.19",
+            "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.19"
+          }
+        }
+    </script>
+
+    <script type='module'>
+        import { Calendar } from '@fullcalendar/core'
+        import dayGridPlugin from '@fullcalendar/daygrid'
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const calendarEl = document.getElementById('calendar')
+            const calendar = new Calendar(calendarEl, {
+                plugins: [dayGridPlugin],
+                headerToolbar: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+                },
+                events: [
+                    {
+                        'id': 1,
+                        'title': 'South Park (S26E01)',
+                        'start': '2025-07-23'
+                    },
+                    {
+                        'id': 2,
+                        'title': 'South Park (S26E02)',
+                        'start': '2025-08-06'
+                    },
+                    {
+                        'id': 3,
+                        'title': 'South Park (S26E03)',
+                        'start': '2025-08-20'
+                    },
+                    {
+                        'id': 4,
+                        'title': 'South Park (S26E04)',
+                        'start': '2025-09-03'
+                    }
+                ]
+            })
+            calendar.render()
+        })
+    </script>
+{% endblock %}
+
+{% block body %}
+    <style>
+        :root {
+            --fc-border-color: orange;
+        }
+    </style>
+    <div class="p-4">
+        <twig:Card title="List of upcoming episodes">
+            <div id="calendar" class="text-white">
+            </div>
+        </twig:Card>
+    </div>
+{% endblock %}