Verbesserte Kalenderseite

content/kalender.md

@@ -5,7 +5,36 @@ menu_title: "Kalender"
 
 ## Veranstaltungen
 
-Die Community organisiert eine Vielzahl von Veranstaltungen. Die
-nächsten sind:
+Die Highlights der nächsten Monate:
+
+{{< rawhtml >}}
+<table class="cal-events"><tr>
+    <td>
+        <a href="https://stateofthemap.eu/"><img alt="State of the Map Erope 2024, Łódź, Polen" src="sotm-eu-lodz.svg"/></a>
+        <div>18. bis 21. Juli 2024</div>
+    </td>
+    <td>
+        <a href="https://2024.stateofthemap.org/"><img alt="State of the Map 2024, Nairobi, Kenia" src="sotm-nairobi.svg"/></a>
+        <div>6. bis 8. September 2024</div>
+    </td>
+    <td>
+        <a href="https://www.fossgis.de/wiki/FOSSGIS_OSM_Communitytreffen_2024_Nummer_22">FOSSGIS OSM Communitytreffen 2024 Nummer 22</a>
+        <div>3. bis 6. Oktober 2024</div>
+    </td>
+    <td>
+        <a href="https://wiki.openstreetmap.org/wiki/Karlsruhe_Hack_Weekend_October_2024">Karlsruhe Hack Weekend October 2024</a>
+        <div>18. bis 20. Oktober 2024</div>
+    </td>
+    <td>
+        <a href="https://fossgis-konferenz.de/2025/"><img alt="FOSSGIS-Konferenz 2025, Münster" src="fossgis-2025.png"/></a>
+        <div>26. bis 29. März 2025</div>
+    </td>
+</tr></table>
+{{< /rawhtml >}}
+
+Die Community organisiert eine Vielzahl von Veranstaltungen:
 
 {{< osmcal-events >}}
+
+Weitere OpenStreetMap-Veranstaltungen unter [osmcal.org](https://osmcal.org/).
+

content/kalender/index.md

@@ -0,0 +1,11 @@
+---
+title: "OpenStreetMap-Kalender"
+menu_title: "Kalender"
+---
+
+## Veranstaltungen
+
+Die Community organisiert eine Vielzahl von Veranstaltungen. Die
+nächsten sind:
+
+{{< osmcal-events >}}

layouts/shortcodes/osmcal-events.html

@@ -1,23 +1,26 @@
 <ul id="osmcal_ul"></ul>
 <script>
 // Gets the data of the osmcal Rest-API and lists them
-fetch("https://osmcal.org/api/v2/events/?in=de").then(function (response) {
-    return response.json();
-}).then(function (data) {
-    var eventListUl = document.getElementById("osmcal_ul");
+fetch("https://osmcal.org/api/v2/events/?in=de").then( (response) => response.json() ).then(function (data) {
+    const eventListUl = document.getElementById('osmcal_ul');
+    const now = new Date();
 
     data.forEach(event => {
+        const days = (new Date(event.date.start) - now) / 1000 / 60 / 60 / 24; // this many days in the future
 
-        var a = document.createElement("a");
-        a.href = event.url;
-        a.target = "_blank";
-        var p = document.createElement("p");
-        a.innerHTML = event.name + "<br>" + event.date.human + " " + event.location.short + "<br><br>";
+        if (days < 92) {
+            const a = document.createElement('a');
+            a.href = event.url;
+            a.target = "_blank";
 
-        var li = document.createElement("li");
-        li.append(a);
+            const p = document.createElement('p');
+            a.innerHTML = event.name + '<br>' + event.date.human + ' ' + event.location.short + '<br><br>';
 
-        eventListUl.append(li);
+            const li = document.createElement('li');
+            li.append(a);
+
+            eventListUl.append(li);
+        }
     });
 }).catch((error) => {
     console.error(error);

layouts/shortcodes/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}

themes/openstreetmap/assets/css/style.css

@@ -444,3 +444,25 @@ div.span-one-half {
     }
 
 }
+
+.cal-events {
+    border-spacing: 10px;
+}
+
+.cal-events td {
+    border: 1px solid #e0e0e0;
+    padding: 10px;
+    text-align: center;
+    vertical-align: bottom;
+    width: 160px;
+    height: 140px;
+}
+
+.cal-events img {
+    width: 100px;
+}
+
+.cal-events div {
+    margin-top: 10px;
+}
+