Hallo zusammen,
ich möchte für eine Webseite ein Widget erstellen, das die nächsten Veranstaltungen anzeigen soll. Diese werden in dem Code dann hinzugefügt. Auf dem Widget welches auf der Webseite angezeigt wird dürfen aber immer nur zwei Veranstaltungen gleichzeitig dargestellt werden. Das Datum der Veranstaltungen soll immer mit dem aktuellen Datum verglichen werden. Ist das Datum der ganz oben also an erster Stelle stehenden Veranstaltung seit einem Tag überschritten soll diese gesamte Veranstaltung ausgeblendet werden. Die darunter stehende also an zweiter Stelle befindliche Veranstaltung rückt dann an erste Stelle und an Zweite Stelle rückt dann eine bisher noch nicht angezeigt Veranstaltung. Immer so das halt nur zwei Veranstaltungen gleichzeitig angezeigt werden. Das Datum vergleichen und ein/ausblenden und neu ordnen der Veranstaltungen funktioniert bei meinem Code noch nicht so ganz. Kann mir dabei bitte jemand helfen. Wenn das möglich ist am besten den Code so anpassen damit diese Funktionen so funktionieren.
Mit freundlichen Grüßen
Tim
Hier ist mein aktueller Code davon:
<!DOCTYPE html>
<html>
<head>
<style>
/* Stil für das Widget */
.event-widget {
border: 1px solid #ccc;
padding: 6px;
max-width: 215px; /* Breiteres Widget */
background-color: #f7f7f7;
}
/* Stil für die Hellschwarze Hauptüberschrift */
.event-widget h3 {
color: #454545; /* Hellschwarz */
font-size: 18px; /* Kleinere Schriftgröße für die Hauptüberschrift */
text-align: center; /* Zentriert den Text */
margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */
}
/* Stil für die einzelnen Veranstaltungen */
.event-widget ul li {
margin-bottom: 10px; /* Fügt einen Abstand zwischen den Veranstaltungen hinzu */
padding-bottom: 5px; /* Fügt zusätzlichen Abstand zwischen dem Trennungsstrich und dem Text hinzu */
}
/* Fügt einen Trennungsstrich zwischen den Veranstaltungen hinzu */
.event-item + .event-item {
border-top: 1px solid #ccc;
margin-top: 10px;
padding-top: 5px;
}
/* Stil für die übrigen Texte */
.event-title {
color: #8B0000; /* Weinrot */
font-size: 15px; /* Kleinere Schriftgröße für den übrigen Text */
}
/* Stil für die Uhrzeit */
.event-time {
font-weight: bold;
font-size: 12px; /* Kleinere Schriftgröße */
}
</style>
</head>
<body>
<div class="event-widget">
<h3>Nächste Veranstaltungen</h3>
<ul id="event-list">
<!-- Hier kannst du Veranstaltungen hinzufügen -->
<li class="event-item">
<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>
<br>
Datum: 2023-11-09
<br>
Zeit: 14:30 - 16:00 Uhr
<br>
Ort: Feuerwehrhaus
</li>
<li class="event-item">
<strong class="event-title">Volkstrauertag:</strong>
<br>
Datum: 2023-11-19
<br>
Zeit: 15:00 - 16:00 Uhr
<br>
Ort: Am Ehrenmal Ahrenshöft
</li>
<li class="event-item">
<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>
<br>
Datum: 2023-12-14
<br>
Zeit: 14:30 - 16:00 Uhr
<br>
Ort: Feuerwehrhaus
</li>
<!-- Weitere Veranstaltungen hier hinzufügen -->
</ul>
</div>
<script>
function updateEvents() {
const eventList = document.getElementById("event-list");
const events = eventList.getElementsByClassName("event-item");
const currentDate = new Date();
const displayedEvents = 2;
for (let i = 0; i < events.length; i++) {
const eventDateString = events[i].querySelector("br:nth-child(2)").textContent.replace("Datum: ", "");
const eventDate = new Date(eventDateString);
// Überprüfe, ob das Datum um einen Tag überschritten ist
if (eventDate < currentDate) {
events[i].style.display = "none"; // Verstecke vergangene Veranstaltungen
} else {
events[i].style.display = "block"; // Zeige zukünftige Veranstaltungen
}
// Überprüfe, ob die maximale Anzahl von angezeigten Veranstaltungen erreicht ist
if (i >= displayedEvents) {
events[i].style.display = "none";
}
}
}
// Aktualisiere die Veranstaltungen beim Laden der Seite
document.addEventListener("DOMContentLoaded", updateEvents);
</script>
</body>
</html>