home/torsearch
1
0
Fork 0
Code Issues 22 Pull Requests 1 Actions 3 Packages Projects 4 Releases Wiki Activity

fix: removes fullcalendar from importmap and references from cdn

Browse Source
This commit is contained in:
brock
2025-08-23 12:26:26 -05:00
parent 2f7d406d12
commit 942911d8ef
5 changed files with 46 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/controllers/upcoming_episodes_controller.js
View File

@@ -2,26 +2,45 @@ import { Controller } from '@hotwired/stimulus';
import { Calendar } from '@fullcalendar/core'; import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
/* stimulusFetch: 'lazy' */ /* stimulusFetch: 'lazy' */
export default class extends Controller { export default class extends Controller {
calendar = null;
initialize() { initialize() {
} }
connect() { connect() {
let calendar = new Calendar(this.element, { this.calendar = new Calendar(this.element, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ], plugins: [ dayGridPlugin, timeGridPlugin ],
initialView: 'dayGridMonth', initialView: 'dayGridMonth',
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', 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(); // calendar.render();
} }

8
assets/styles/app.css
View File

@@ -27,6 +27,10 @@
} }
} }
:root {
--fc-border-color: #a65b27;
}
/* Prevent scrolling while dialog is open */ /* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) { body:has(dialog[data-dialog-target="dialog"][open]) {
overflow: hidden; overflow: hidden;
@@ -193,3 +197,7 @@ dialog[data-dialog-target="dialog"][closing] {
.filter-label { .filter-label {
@apply flex flex-col gap-1 justify-between; @apply flex flex-col gap-1 justify-between;
} }
.fc-col-header-cell {
@apply bg-orange-500/60 text-white;
}

33
importmap.php
View File

@@ -70,37 +70,4 @@ return [
'@ungap/custom-elements' => [ '@ungap/custom-elements' => [
'version' => '1.3.0', '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',
// ],
]; ];

1
templates/base.html.twig
View File

@@ -12,6 +12,7 @@
{% block javascripts %} {% block javascripts %}
{% block importmap %}{{ importmap('app') }}{% endblock %} {% block importmap %}{{ importmap('app') }}{% endblock %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
{% endblock %} {% endblock %}
</head> </head>
<body class="flex flex-col bg-stone-700"> <body class="flex flex-col bg-stone-700">

70
templates/index/test.html.twig
View File

@@ -2,67 +2,23 @@
{% block h2 %}Upcoming Episodes{% endblock %} {% 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 %} {% block body %}
<style> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
:root {
--fc-border-color: orange;
}
</style>
<div class="p-4"> <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 id="calendar" class="text-white">
</div> </div>
</twig:Card> </twig:Card>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
{% endblock %} {% endblock %}