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

feat: makes events clickable

Browse Source
This commit is contained in:
brock
2025-09-16 13:17:29 -05:00
parent 209266597e
commit 61e4b25212
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/app.css
View File

@@ -199,6 +199,10 @@ dialog[data-dialog-target="dialog"][closing] {
@apply flex flex-col gap-1 justify-between; @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 { .fc-col-header-cell {
@apply bg-orange-500/60 text-white; @apply bg-orange-500/60 text-white;
} }

11
templates/monitor/upcoming-episodes.html.twig
View File

@@ -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"> <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" /> <twig:ux:icon name="lets-icons:calendar-add-light" width="24" class="text-orange-500" />
</a> </a>
<div id="calendar" class="text-white"> <div id="upcoming_episodes_calendar" class="text-white">
</div> </div>
</twig:Card> </twig:Card>
</div> </div>
@@ -33,15 +33,22 @@
} }
} }
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {
const modal = document.getElementById('previewModal');
let data = await fetch('/api/monitor/upcoming-episodes'); let data = await fetch('/api/monitor/upcoming-episodes');
data = (await data.json())['data']; data = (await data.json())['data'];
const calendarEl = document.getElementById('calendar'); const calendarEl = document.getElementById('upcoming_episodes_calendar');
const calendar = new FullCalendar.Calendar(calendarEl, { const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: getView(), initialView: getView(),
events: data['episodes'], events: data['episodes'],
windowResize: function(arg) { windowResize: function(arg) {
this.changeView(getView()); this.changeView(getView());
},
eventClick: function (data) {
modal.display({
heading: data.event.title,
content: `<p>${data.event.startStr}</p>`
})
} }
}); });
calendar.render(); calendar.render();