Kalender2
index.html
Termine 2025
styles.css
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.event {
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.event-date {
background: #064eaf;
color: white;
padding: 10px;
text-align: center;
border-radius: 8px;
min-width: 80px;
margin-right: 20px;
}
.event-info {
flex: 1;
}
.event-title {
font-size: 20px;
font-weight: bold;
color: #064eaf;
}
.event-description {
margin-top: 5px;
}
.calendar-link {
display: inline-block;
margin-top: 10px;
background: #f8f8f8;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
color: #064eaf;
border: 1px solid #064eaf;
}
script.js
document.addEventListener('DOMContentLoaded', function() {
Papa.parse('events.csv', {
download: true,
header: true,
complete: function(results) {
const events = results.data.filter(e => e['Subject']);
const eventsList = document.getElementById('events-list');
const today = new Date();
events.sort((a, b) => {
const dateA = new Date(a['Start-Datum']);
const dateB = new Date(b['Start-Datum']);
return dateA - dateB;
});
events.forEach(event => {
const eventDate = new Date(event['Start-Datum']);
if (eventDate < today) return;
const div = document.createElement('div');
div.className = 'event';
const dateDiv = document.createElement('div');
dateDiv.className = 'event-date';
dateDiv.innerHTML = `
${eventDate.getDate()}
${eventDate.toLocaleString('de-DE', { month: 'short' })}
`;
const infoDiv = document.createElement('div');
infoDiv.className = 'event-info';
infoDiv.innerHTML = `
${event['Subject']}
${event['Beschreibung'] || ''}
Ort: ${event['Ort'] || 'wird noch bekanntgegeben'}
Start: ${event['Start-Datum']} ${event['Start-Zeit'] || ''}
Ende: ${event['Ende-Datum']} ${event['Ende-Zeit'] || ''}
+ Google Kalender
`;
div.appendChild(dateDiv);
div.appendChild(infoDiv);
eventsList.appendChild(div);
});
}
});
});
function generateGoogleCalendarLink(event) {
const start = formatGoogleDateTime(event['Start-Datum'], event['Start-Zeit']);
const end = formatGoogleDateTime(event['Ende-Datum'], event['Ende-Zeit']);
return `https://calendar.google.com/calendar/r/eventedit?text=${encodeURIComponent(event['Subject'])}&dates=${start}/${end}&details=${encodeURIComponent(event['Beschreibung'] || '')}&location=${encodeURIComponent(event['Ort'] || '')}`;
}
function formatGoogleDateTime(date, time) {
const d = new Date(date + 'T' + (time ? time : '00:00'));
return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
}
events.csv (Beispiel)
Subject,Start-Datum,Start-Zeit,Ende-Datum,Ende-Zeit,Beschreibung,Ort
Bürgergespräch im Rathaus,2025-05-15,18:00,2025-05-15,20:00,Offenes Gespräch mit Bürgern,Rathaus Pfungstadt
Eröffnung des Schwimmbads,2025-06-01,10:00,2025-06-01,14:00,Feierliche Eröffnung des neuen Bads,Schwimmbad Pfungstadt
Stadtfest Pfungstadt,2025-07-20,12:00,2025-07-20,22:00,Sommerfest mit Musik und Essen,Innenstadt Pfungstadt