SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Calendar Loading Problems

Browse Source
This commit is contained in:
Tobias Feigel
2025-12-18 19:00:05 +01:00
parent afadbbc835
commit bbe05bd765
3 changed files with 228 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/collections/termine.php
+23 -10
View File
@@ -1,4 +1,3 @@
<?php
// URL der öffentlichen ICS-Datei
define(
@@ -83,13 +82,10 @@ function format_ics_date_with_timezone($date, $timezone = null)
}
}
// ICS-Datei laden
$ics = @file_get_contents(CAL_URL);
if (!$ics) {
echo '<div class="text-red-600">Kalender konnte nicht geladen werden.</div>';
return;
}
// Cache für 24 Stunden (in Minuten)
$cacheDuration = 24 * 60;
$cacheId = 'google_calendar_events';
$cache = kirby()->cache('pages');
// Termine parsen
function parse_ics($ics)
@@ -134,9 +130,26 @@ function parse_ics($ics)
return $events;
}
$events = parse_ics($ics);
return function () use ($cache, $cacheId, $cacheDuration) {
// Versuche Daten aus dem Cache zu laden
$events = $cache->get($cacheId);
if ($events === null) {
// Wenn nicht im Cache, neu laden
$ics = @file_get_contents(CAL_URL);
if (!$ics) {
// Fehler beim Laden (z.B. 429 Error)
return null;
}
// Termine parsen
$events = parse_ics($ics);
// In Cache speichern
$cache->set($cacheId, $events, $cacheDuration);
}
return function () use ($events) {
return $events;
};
site/snippets/home-termine.php
+46 -17
View File
@@ -1,6 +1,13 @@
<?php
$events = collection('termine');
if ($events === null): ?>
<div class="container mx-auto py-8">
<h2>Bevorstehende Termine</h2>
<div class="text-red-600">Die Termine können gerade nicht geladen werden.</div>
</div>
<?php return; endif;
// Aktuelles Datum - PHP 8.3 kompatibel
$today = (new DateTime('now'))->format('Ymd');
@@ -35,8 +42,12 @@ $de_months = [
<h2>Bevorstehende Termine</h2>
<div class="relative flex items-center justify-center">
<button id="scroll-left" class="flex-shrink-0 bg-white p-3 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 z-10 hidden md:block mr-4">
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<button id="scroll-left"
class="flex-shrink-0 bg-white p-3 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 z-10 hidden md:block mr-4">
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<div id="termine-wrapper" class="relative w-full max-w-7xl overflow-hidden">
@@ -69,11 +80,13 @@ $de_months = [
$safe_time = htmlspecialchars($time, ENT_QUOTES, 'UTF-8');
?>
<div class="termine-card flex-none w-full md:w-1/2 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl transform hover:scale-102 transition-all duration-300 ease-in-out border border-blue-200">
<div
class="termine-card flex-none w-full md:w-1/2 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl transform hover:scale-102 transition-all duration-300 ease-in-out border border-blue-200">
<!-- Inhalt der ersten Karte bleibt unverändert -->
<div class="p-6 flex flex-col h-full">
<div class="flex items-top mb-5">
<div class="relative flex-shrink-0 bg-white rounded-lg shadow-md overflow-hidden w-16 h-16 flex flex-col border border-blue-200">
<div
class="relative flex-shrink-0 bg-white rounded-lg shadow-md overflow-hidden w-16 h-16 flex flex-col border border-blue-200">
<!-- Kopfzeile des Kalenders mit Monat -->
<div class="bg-blue-600 text-white text-xs font-semibold py-1 text-center uppercase">
<span data-month><?= $month_name ?></span>
@@ -99,7 +112,8 @@ $de_months = [
<p class="text-xl font-medium text-sf_grau-900"><?= $event_summary ?></p>
<p class="text-sf_blau-700 text-lg font-medium mt-1">
<?php if ($date_info['has_time'] ?? false): ?>
ab <span class="local-time" data-iso-date="<?= $safe_iso_date ?>"><?= $safe_time ?></span> Uhr
ab <span class="local-time"
data-iso-date="<?= $safe_iso_date ?>"><?= $safe_time ?></span> Uhr
<?php else: ?>
ganztägig
<?php endif; ?>
@@ -112,14 +126,18 @@ $de_months = [
</div>
</div>
<button id="scroll-right" class="flex-shrink-0 bg-white p-3 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 z-10 hidden md:block ml-4">
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<button id="scroll-right"
class="flex-shrink-0 bg-white p-3 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 z-10 hidden md:block ml-4">
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const termineWrapper = document.getElementById('termine-wrapper');
const termineContainer = document.getElementById('termine-container');
const scrollLeftBtn = document.getElementById('scroll-left');
@@ -250,32 +268,41 @@ $de_months = [
<style>
/* Versteckt die Scrollbar vollständig, behält aber die Scrollfunktionalität */
#termine-container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
overflow-x: visible;
}
#termine-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
display: none;
/* Chrome, Safari, Opera */
}
/* Gleiche Kartenbreiten sicherstellen */
@media (min-width: 1280px) {
.termine-card {
width: 100%; /* 100% minus 2 Gaps (2 * 24px) geteilt durch 3 */
width: 100%;
/* 100% minus 2 Gaps (2 * 24px) geteilt durch 3 */
}
#termine-container {
space-x-0; /* Kein Abstand zwischen Karten nötig */
space-x-0;
/* Kein Abstand zwischen Karten nötig */
}
}
/* Auf mobilen Geräten eine Karte anzeigen */
@media (max-width: 1280px) {
.termine-card {
width: 100%; /* Volle Breite */
width: 100%;
/* Volle Breite */
}
#termine-container {
space-x-0; /* Kein Abstand zwischen Karten nötig */
space-x-0;
/* Kein Abstand zwischen Karten nötig */
}
}
@@ -283,9 +310,11 @@ $de_months = [
.termine-card h3 {
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */ /* Diese Zeile entfernen oder kommentieren */
/* white-space: nowrap; */
/* Diese Zeile entfernen oder kommentieren */
display: -webkit-box;
-webkit-line-clamp: 2; /* Maximal 2 Zeilen anzeigen */
-webkit-line-clamp: 2;
/* Maximal 2 Zeilen anzeigen */
-webkit-box-orient: vertical;
line-height: 1.3;
}
site/snippets/termine.php
+14 -5
View File
@@ -2,6 +2,14 @@
$events = collection('termine');
if ($events === null): ?>
<section class="py-24 bg-sf_grau-50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-red-600 bg-white p-6 rounded-lg shadow">Die Termine können gerade nicht geladen werden.</div>
</div>
</section>
<?php return; endif;
// Nur Events mit DTSTART berücksichtigen
$events = array_filter($events, function ($event) {
return isset($event['DTSTART']) && !empty($event['DTSTART']);
@@ -99,10 +107,11 @@ if ($filter_jahr && $filter_monat) {
onclick="event.stopPropagation(); openYear('<?= $safe_year ?>')">
<span><?= $safe_year ?></span>
</a>
<button type="button" class="ml-1 focus:outline-none" onclick="toggleYear('<?= $safe_year ?>')">
<svg class="w-4 h-4 transition-transform" id="arrow-<?= $safe_year ?>" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
<button type="button" class="ml-1 focus:outline-none"
onclick="toggleYear('<?= $safe_year ?>')">
<svg class="w-4 h-4 transition-transform" id="arrow-<?= $safe_year ?>" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
@@ -253,7 +262,7 @@ if ($filter_jahr && $filter_monat) {
}
// Zeitzonenkonvertierung beim Laden der Seite
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
convertTimesToLocal();
});
</script>