Event Calendar styling and bugfixes

assets/css/main.css

@@ -588,6 +588,62 @@ footer {
     text-decoration: underline;
 }
 
+/* ========================
+   Events
+   ======================== */
+.fc-daygrid-day-number {
+    color: var(--color-text) !important;
+}
+
+.fc-toolbar-title {
+    font-weight: 600;
+    font-size: 1.8rem;
+    color: var(--color-text) !important;
+}
+
+.fc-button {
+    background-color: var(--color-accent);
+    border: none;
+    color: var(--color-text);
+    padding: 0.4rem 1rem;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.fc-day-today {
+    background-color: var(--color-accent) !important;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+    color: var(--color-dark) !important;
+}
+
+.fc-event {
+    background-color: var(--color-accent);
+    border: none;
+    border-radius: 4px;
+    color: var(--color-text);
+    font-size: 0.85rem;
+    padding: 2px 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.fc-event.fc-event-start,
+.fc-event.fc-event-end {
+    border-radius: 4px;
+}
+
+.fc-col-header-cell-cushion {
+    color: var(--color-text) !important;
+}
+
+.fc-col-header {
+    background-color: var(--color-background) !important;
+}
+
 /* ========================
    404 Error Page
    ======================== */

assets/css/markdown.css

@@ -24,6 +24,15 @@
     box-shadow: 0 4px 0 0 var(--color-text);
 }
 
+#markdown.title-center {
+    text-align: center;
+}
+
+#markdown.title-center h1 {
+    display: inline-block;
+    text-align: center;
+}
+
 .dark #markdown h1 {
     color: var(--color-text-dark);
     box-shadow: 0 4px 0 0 var(--color-off);

layouts/_partials/head.html

@@ -40,42 +40,49 @@
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
 
 <!-- Event Calendar -->
-<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.css' rel='stylesheet'/>
+{{ if eq .RelPermalink "/events/" }}
-<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.js'></script>
+    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.css' rel='stylesheet'/>
-<script src='https://cdn.jsdelivr.net/npm/ical.js@1.4.0/build/ical.min.js'></script>
+    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5/main.min.js'></script>
-<script>
+    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5/locales/de.js'></script>
-    document.addEventListener('DOMContentLoaded', async function () {
+    <script src='https://cdn.jsdelivr.net/npm/ical.js@1.4.0/build/ical.min.js'></script>
-        const calendarEl = document.getElementById('calendar');
+    <script>
-        const calendar = new FullCalendar.Calendar(calendarEl, {
+        document.addEventListener('DOMContentLoaded', async function () {
-            initialView: 'dayGridMonth'
+            const calendarEl = document.getElementById('calendar');
-        });
+            const calendar = new FullCalendar.Calendar(calendarEl, {
-        calendar.render();
+                initialView: 'dayGridMonth',
-
+                dayMaxEventRows: true,
-        try {
+                height: 'auto',
-            const response = await fetch('https://nc.ifsr.de/remote.php/dav/public-calendars/W5Sk7zLD28n6ze44/?export');
+                locale: 'de',
-            const icsData = await response.text();
+                firstDay: 1
-
-            const jcalData = ICAL.parse(icsData);
-            const comp = new ICAL.Component(jcalData);
-            const events = comp.getAllSubcomponents('vevent');
-
-            const fcEvents = events.map(event => {
-                const icalEvent = new ICAL.Event(event);
-                return {
-                    title: icalEvent.summary,
-                    start: icalEvent.startDate.toJSDate(),
-                    end: icalEvent.endDate.toJSDate(),
-                    description: icalEvent.description
-                };
             });
+            calendar.render();
 
-            calendar.addEventSource(fcEvents);
+            try {
+                const response = await fetch('https://nc.ifsr.de/remote.php/dav/public-calendars/W5Sk7zLD28n6ze44/?export');
+                const icsData = await response.text();
 
-        } catch (error) {
+                const jcalData = ICAL.parse(icsData);
-            console.error('Fehler beim Laden oder Parsen der ICS-Datei:', error);
+                const comp = new ICAL.Component(jcalData, null);
-        }
+                const events = comp.getAllSubcomponents('vevent');
-    });
+
-</script>
+                const fcEvents = events.map(event => {
+                    const icalEvent = new ICAL.Event(event);
+                    return {
+                        title: icalEvent.summary,
+                        start: icalEvent.startDate.toJSDate(),
+                        end: icalEvent.endDate.toJSDate(),
+                        description: icalEvent.description
+                    };
+                });
+
+                calendar.addEventSource(fcEvents);
+
+            } catch (error) {
+                console.error('Fehler beim Laden oder Parsen der ICS-Datei:', error);
+            }
+        });
+    </script>
+{{ end }}
 
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

layouts/events/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
     <div class="container">
-        <div id="markdown">
+        <div id="markdown" class="title-center">
             {{ .Content }}
         </div>
         <div id='calendar'></div>

layouts/neuigkeiten/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
     <div class="container">
-        <div id="markdown">
+        <div id="markdown" class="title-center">
             {{ .Content }}
         </div>
         <div id="feed" class="page"></div>