From 942911d8ef3e4503041f516289a62c2e875da932 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Sat, 23 Aug 2025 12:26:26 -0500
Subject: [PATCH] fix: removes fullcalendar from importmap and references from
 cdn

---
 .../upcoming_episodes_controller.js           | 29 ++++++--
 assets/styles/app.css                         |  8 +++
 importmap.php                                 | 33 ---------
 templates/base.html.twig                      |  1 +
 templates/index/test.html.twig                | 70 ++++---------------
 5 files changed, 46 insertions(+), 95 deletions(-)

diff --git a/assets/controllers/upcoming_episodes_controller.js b/assets/controllers/upcoming_episodes_controller.js
index fd4ff3d..5130176 100644
--- a/assets/controllers/upcoming_episodes_controller.js
+++ b/assets/controllers/upcoming_episodes_controller.js
@@ -2,26 +2,45 @@ 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 {
+    calendar = null;
 
     initialize() {
 
     }
 
     connect() {
-        let calendar = new Calendar(this.element, {
-            plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
+        this.calendar = new Calendar(this.element, {
+            plugins: [ dayGridPlugin, timeGridPlugin ],
             initialView: 'dayGridMonth',
             headerToolbar: {
                 left: 'prev,next today',
                 center: 'title',
-                right: 'dayGridMonth,timeGridWeek,listWeek'
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            },
+            editable: true, // Allow events to be dragged and resized
+            events: '/api/events', // Symfony route to fetch events
+            eventDrop: function(info) {
+                // Handle event drop (e.g., update event in database via AJAX)
+            },
+            eventResize: function(info) {
+                // Handle event resize (e.g., update event in database via AJAX)
             }
         });
-        calendar.render();
+        this.calendar.render();
+        // this.calendar = new Calendar(this.element, {
+        //     plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
+        //     initialView: 'dayGridMonth',
+        //     headerToolbar: {
+        //         left: 'prev,next today',
+        //         center: 'title',
+        //         right: 'dayGridMonth,timeGridWeek,listWeek'
+        //     }
+        // });
+        // this.calendar.render();
         // calendar.render();
     }
 
diff --git a/assets/styles/app.css b/assets/styles/app.css
index bf33987..91b438b 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -27,6 +27,10 @@
     }
 }
 
+:root {
+    --fc-border-color: #a65b27;
+}
+
 /* Prevent scrolling while dialog is open */
 body:has(dialog[data-dialog-target="dialog"][open]) {
     overflow: hidden;
@@ -193,3 +197,7 @@ dialog[data-dialog-target="dialog"][closing] {
 .filter-label {
     @apply flex flex-col gap-1 justify-between;
 }
+
+.fc-col-header-cell {
+    @apply bg-orange-500/60 text-white;
+}
diff --git a/importmap.php b/importmap.php
index e91dd78..83ec592 100644
--- a/importmap.php
+++ b/importmap.php
@@ -70,37 +70,4 @@ 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',
-//    ],
 ];
diff --git a/templates/base.html.twig b/templates/base.html.twig
index c647d2b..8253e29 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -12,6 +12,7 @@
 
         {% block javascripts %}
             {% block importmap %}{{ importmap('app') }}{% endblock %}
+            <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
         {% endblock %}
     </head>
     <body class="flex flex-col bg-stone-700">
diff --git a/templates/index/test.html.twig b/templates/index/test.html.twig
index 05d57b8..577f241 100644
--- a/templates/index/test.html.twig
+++ b/templates/index/test.html.twig
@@ -2,67 +2,23 @@
 
 {% 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>
+    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
+
     <div class="p-4">
-        <twig:Card title="List of upcoming episodes">
+        <twig:Card title="Upcoming episodes of shows your monitoring">
             <div id="calendar" class="text-white">
             </div>
         </twig:Card>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var calendarEl = document.getElementById('calendar');
+            var calendar = new FullCalendar.Calendar(calendarEl, {
+                initialView: 'dayGridMonth'
+            });
+            calendar.render();
+        });
+    </script>
 {% endblock %}
\ No newline at end of file