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,14 +40,20 @@
 <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>
+    <script src='https://cdn.jsdelivr.net/npm/ical.js@1.4.0/build/ical.min.js'></script>
+    <script>
         document.addEventListener('DOMContentLoaded', async function () {
             const calendarEl = document.getElementById('calendar');
             const calendar = new FullCalendar.Calendar(calendarEl, {
-            initialView: 'dayGridMonth'
+                initialView: 'dayGridMonth',
+                dayMaxEventRows: true,
+                height: 'auto',
+                locale: 'de',
+                firstDay: 1
             });
             calendar.render();
 
@@ -56,7 +62,7 @@
                 const icsData = await response.text();
 
                 const jcalData = ICAL.parse(icsData);
-            const comp = new ICAL.Component(jcalData);
+                const comp = new ICAL.Component(jcalData, null);
                 const events = comp.getAllSubcomponents('vevent');
 
                 const fcEvents = events.map(event => {
@@ -75,7 +81,8 @@
                 console.error('Fehler beim Laden oder Parsen der ICS-Datei:', error);
             }
         });
-</script>
+    </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>