I'm starting to consider an exorcism
So... I planned to host a basic onlive calender for a club where every member from differrent villages can input their event in a password secured form which will be safen in an ics data. Then, the index page is to read out the data from the ics data on the server and display it in a grid.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events - Besser für Bayern</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #eef8fd;
text-align: center;
}
h1 {
font-family: Museo, Arial, sans-serif;
background-color: #d3effd;
padding: 20px;
margin:0
}
#event-table {
width: 100%;
border-collapse: collapse;
}
#event-table th, #event-table td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
#event-table th {
background-color: #f2f2f2;
}
footer {
text-align: center;
background-color: #1ca1f2;
color: white;
padding: 10px;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
...
<br>
<table id="event-table">
<thead>
<tr>
<th>Beginn</th>
<th>Uhrzeit</th>
<th>Ende</th>
<th>Uhrzeit</th>
<th>Titel</th>
<th class="left-align" !important>Ort</th>
<th class="left-align" !important>Beschreibung</th>
<th class="left-align" !important>Veranstalter</th>
<th class="left-align" !important>Verband</th>
</tr>
</thead>
<tbody id="event-table-body">
<!-- Event grid -->
</tbody>
</table>
...
<script>
function parseICS(icsData) {
const events = [];
const lines = icsData.split('\n');
let event = {};
lines.forEach(line => {
if (line.startsWith('BEGIN:VEVENT')) {
event = {};
} else if (line.startsWith('END:VEVENT')) {
events.push(event);
} else {
const parts = line.split(':');
const key = parts[0];
const value = parts.slice(1).join(':'); // Handle values with ':'
if (key && value) {
if (key === 'DTSTART') {
event['start'] = new Date(value.replace(/T/, ' ').replace(/Z/, ''));
} else if (key === 'DTEND') {
event['end'] = new Date(value.replace(/T/, ' ').replace(/Z/, ''));
} else {
event[key.toLowerCase()] = value;
}
}
}
});
return events;
}
function updateEvents() {
fetch('events.ics')
.then(response => response.text())
.then(data => {
const newEvents = parseICS(data);
const currentDate = new Date();
const tableBody = document.getElementById('event-table-body');
const existingEventIds = new Set();
tableBody.querySelectorAll('tr').forEach(row => {
existingEventIds.add(row.getAttribute('data-event-id'));
});
tableBody.querySelectorAll('tr').forEach(row => {
const eventId = row.getAttribute('data-event-id');
if (!existingEventIds.has(eventId)) {
row.remove();
}
});
newEvents
.filter(event => new Date(event.start) > currentDate)
.sort((a, b) => new Date(a.start) - new Date(b.start))
.forEach(event => {
const eventId = event.uid; // Verwende die UID des Ereignisses als ID
if (!existingEventIds.has(eventId)) {
const row = document.createElement('tr');
row.setAttribute('data-event-id', eventId);
row.innerHTML = `
<td>${new Date(event.start).toLocaleDateString('de-DE')}</td>
<td>${new Date(event.start).toLocaleTimeString('de-DE', { hour: 'numeric', minute: 'numeric' })}</td>
<td>${new Date(event.end).toLocaleDateString('de-DE')}</td>
<td>${new Date(event.end).toLocaleTimeString('de-DE', { hour: 'numeric', minute: 'numeric' })}</td>
<td>${event.summary}</td>
<td>${event.location}</td>
<td>${event.description}</td>
<td>${event.organizer}</td>
<td>${event['x-proid']}</td>
`;
tableBody.appendChild(row);
}
});
});
}
window.onload = updateEvents;
</script>
</body>
</html>
For some reason it only reads out some old events from the ics, that didn't take place jet, but doesn't want to add any new content from the ics.
It all started when I redesigned the input page - yes, I checked it like a thousand times - the new events are being added to the ics (even though the confirmation message doesn't seem to work)
I have genuently no idea why, and anytime I reduce the code to the basic "display what you find without filtering it" it won't show me anything more.
Do you guys have any idea what's going on there? I need help, please
For some reason it only reads out some old events from the ics, that didn't take place jet, but doesn't want to add any new content from the ics.
It all started when I redesigned the input page - yes, I checked it like a thousand times - the new events are being added to the ics (even though the confirmation message doesn't seem to work)
I have genuently no idea why, and anytime I reduce the code to the basic "display what you find without filtering it" it won't show me anything more.
I expect to display a grid with the content of the ics data. One event per row, showing the Date, Time, Location, Title, some content information and the association, as well as the host.