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

Enhances event handling with timezone support

Browse Source 
Adds timezone handling to the event parsing and formatting logic.

This allows events to be displayed in the user's local timezone, improving the user experience.

Also restructures the event display on the "Termine" page to include a sidebar for filtering by year and month.
This commit is contained in:
Tobias Feigel
2025-09-06 12:27:56 +02:00
parent 94078a7e6f
commit 15de43a2b5
3 changed files with 339 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/snippets/home-termine.php
+90 -38
View File
@@ -1,34 +1,34 @@
<?php
$events = collection('termine');
$events = collection('termine');
// Aktuelles Datum
$today = (new DateTime())->format('Ymd');
// Aktuelles Datum
$today = new DateTime()->format('Ymd');
// Nur zukünftige Termine anzeigen
$future_events = array_filter($events, function ($event) use ($today) {
return isset($event['DTSTART']) && $event['DTSTART'] >= $today;
});
// Nur zukünftige Termine anzeigen
$future_events = array_filter($events, function ($event) use ($today) {
return isset($event['DTSTART']) && $event['DTSTART'] >= $today;
});
// Termine nach DTSTART in aufsteigender Reihenfolge sortieren
usort($future_events, function ($a, $b) {
return $a['DTSTART'] <=> $b['DTSTART'];
});
// Termine nach DTSTART in aufsteigender Reihenfolge sortieren
usort($future_events, function ($a, $b) {
return $a['DTSTART'] <=> $b['DTSTART'];
});
// --- Deutsche Monatsnamen ---
$de_months = [
'01' => 'Jan',
'02' => 'Feb',
'03' => 'Mrz',
'04' => 'Apr',
'05' => 'Mai',
'06' => 'Jun',
'07' => 'Jul',
'08' => 'Aug',
'09' => 'Sep',
'10' => 'Okt',
'11' => 'Nov',
'12' => 'Dez',
];
// --- Deutsche Monatsnamen ---
$de_months = [
'01' => 'Jan',
'02' => 'Feb',
'03' => 'Mrz',
'04' => 'Apr',
'05' => 'Mai',
'06' => 'Jun',
'07' => 'Jul',
'08' => 'Aug',
'09' => 'Sep',
'10' => 'Okt',
'11' => 'Nov',
'12' => 'Dez',
];
?>
<div class="container mx-auto py-8">
@@ -43,16 +43,19 @@
<div id="termine-container" class="flex space-x-6 pb-4 transition-transform duration-300 ease-in-out">
<?php foreach ($future_events as $event): ?>
<?php
$start = $event['DTSTART'] ?? '';
$end = $event['DTEND'] ?? '';
$summary = $event['SUMMARY'] ?? '';
$start = $event['DTSTART'] ?? '';
$end = $event['DTEND'] ?? '';
$summary = $event['SUMMARY'] ?? '';
$location = $event['LOCATION'] ?? '';
$desc = $event['DESCRIPTION'] ?? '';
$date = format_ics_date($start);
$time = (str_contains($start, 'T')) ? substr($date, 11) : 'ganztägig';
$day = substr($date, 0, 2);
$month = substr($date, 3, 2);
?>
$desc = $event['DESCRIPTION'] ?? '';
$timezone = $event['DTSTART_TZID'] ?? null;
$date_info = format_ics_date_with_timezone($start, $timezone);
$date = $date_info['display'];
$time = $date_info['has_time'] ? substr($date, 11) : 'ganztägig';
$day = substr($date, 0, 2);
$month = substr($date, 3, 2);
$iso_date = $date_info['iso'];
?>
<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 -->
@@ -66,7 +69,9 @@
<!-- Datumsanzeige -->
<div class="flex-grow flex items-center justify-center">
<div class="text-3xl font-bold text-sf_grau-800" data-day><?php echo htmlspecialchars($day); ?></div>
<div class="text-3xl font-bold text-sf_grau-800" data-day><?php echo htmlspecialchars(
$day,
); ?></div>
</div>
<!-- Dekorative Elemente - kleine Punkte für Kalendertage -->
@@ -81,8 +86,16 @@
</div>
</div>
<div class="ml-5 flex-grow">
<pack class="text-xl font-medium text-sf_grau-900"><?= $event["SUMMARY"] ?></p>
<p class="text-sf_blau-700 text-lg font-medium mt-1">ab <?php echo htmlspecialchars($time); ?> Uhr</p>
<pack 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']): ?>
ab <span class="local-time" data-iso-date="<?php echo htmlspecialchars(
$iso_date,
); ?>"><?php echo htmlspecialchars($time); ?></span> Uhr
<?php else: ?>
ganztägig
<?php endif; ?>
</p>
</div>
</div>
</div>
@@ -169,6 +182,45 @@
// Initialer Aufruf
updateArrowState();
// Zeitzonenkonvertierung für lokale Zeiten
function convertTimesToLocal() {
const timeElements = document.querySelectorAll('.local-time');
timeElements.forEach(element => {
const isoDate = element.getAttribute('data-iso-date');
if (isoDate) {
try {
// Erstelle ein Date-Objekt aus der ISO-Date
// JavaScript erkennt automatisch UTC-Zeiten (mit Z oder +00:00)
const date = new Date(isoDate);
// Prüfe ob das Datum gültig ist
if (isNaN(date.getTime())) {
console.warn('Ungültiges Datum:', isoDate);
return;
}
// Formatiere die Zeit in der lokalen Zeitzone des Browsers
const localTime = date.toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit',
hour12: false
});
// Aktualisiere den Text
element.textContent = localTime;
// Debug-Information (kann später entfernt werden)
console.log('Konvertiert:', isoDate, '->', localTime, 'in Zeitzone:', Intl.DateTimeFormat().resolvedOptions().timeZone);
} catch (error) {
console.warn('Fehler bei der Zeitzonenkonvertierung:', error, 'für Datum:', isoDate);
}
}
});
}
// Zeitzonenkonvertierung beim Laden der Seite
convertTimesToLocal();
// Responsives Verhalten - bei Fenstergröße-Änderung
window.addEventListener('resize', () => {
// Anzahl der Karten je nach Bildschirmgröße anpassen