redesign calendar

static/dbkcalendar.js

@@ -6,41 +6,41 @@
 const uriRegex =
   /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/\-_\.\:]*(\?\S+)?)?)?)/gi;
 
+const timeFormat = new Intl.DateTimeFormat("de-DE", {
+  dateStyle: "full",
+  timeStyle: "short",
+  hourCycle: "h23",
+});
+
 export default function hackcal(e, p = 1) {
   if (!document.getElementById("dbkcalendar")) return;
 
-  const calendar = document.getElementById("calendar").content.cloneNode(true);
   const calendarDate = document.getElementById("calendar-date");
   const calendarEntry = document.getElementById("calendar-entry");
 
   const calendarParent = document.getElementById("dbkcalendar");
-  const body = calendar.querySelector("tbody");
+  calendarParent.innerHTML = "";
 
   const calUri = `https://hackcal.ctbk.de/?period=${p}`;
   fetch(calUri)
     .then((res) => res.json())
     .then((data) => {
-      const items = [];
       Object.keys(data).forEach(function (date) {
-        const day = new Date(date);
-
-        const dateItem = calendarDate.content.cloneNode(true);
-        const timeElement = dateItem.querySelector("time");
-        timeElement.innerText = day.toLocaleDateString(true, {
-          weekday: "short",
-          day: "numeric",
-          month: "long",
-          year: "numeric",
-        });
-        timeElement.dateTime = date;
-        body.appendChild(dateItem);
-
         Object.keys(data[date]).forEach(function (uid) {
           const event = data[date][uid];
 
+          const startTime = event.dtstart;
+          const day = new Date(startTime);
+          console.log(day);
+
+          const dateItem = calendarDate.content.cloneNode(true);
+          const timeElement = dateItem.querySelector("time");
+          timeElement.innerText = timeFormat.format(day);
+          timeElement.dateTime = date;
+          calendarParent.appendChild(dateItem);
+
           const entryItem = calendarEntry.content.cloneNode(true);
           entryItem.querySelector(".calendar-entry").dataset.uid = uid;
-          entryItem.querySelector(".time").innerText = event.datestr;
 
           // use description as link on summary if it's a valid URL
           const summaryItem = entryItem.querySelector(".summary");
@@ -79,11 +79,8 @@ export default function hackcal(e, p = 1) {
             categoriesParent.appendChild(categoryItem);
           }
 
-          body.appendChild(entryItem);
+          calendarParent.appendChild(entryItem);
         });
       });
-
-      calendarParent.innerHTML = "";
-      calendarParent.appendChild(calendar);
     });
 }

static/main.css

@@ -2,6 +2,7 @@
 :root {
   --main-bg-color: oklch(1% 0 0);
   --main-bg-contrast-color: oklch(40% 0 0);
+  --lighter-bg-contrast-color: oklch(20% 0 0);
   --main-text-color: oklch(92% 0 none);
   --main-accent-color: oklch(85.23% 0.1662 89.73);
   --secondary-accent-color: oklch(64.41% 0.1662 44.98);
@@ -18,6 +19,7 @@
   :root {
     --main-bg-color: oklch(99% 0 0);
     --main-bg-contrast-color: oklch(90% 0 0);
+    --lighter-bg-contrast-color: oklch(95% 0 0);
     --main-text-color: oklch(15% 0 0);
     --main-accent-color: oklch(50% 0.1662 44.98);
     --secondary-accent-color: oklch(79% 0.18 89.03);
@@ -29,9 +31,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family:
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    sans-serif;
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -57,8 +59,8 @@ a {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family:
-    monospace;
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 img {
@@ -171,7 +173,8 @@ header {
   }
 
   nav {
-    transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
+    transition:
+      max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
       margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
     overflow-y: hidden;
     height: auto;
@@ -273,7 +276,9 @@ nav {
     margin-bottom: 0.4em;
     text-transform: uppercase;
     text-decoration: underline 0.15em var(--main-text-color);
-    transition: text-decoration-color 0.3s, color 0.25s;
+    transition:
+      text-decoration-color 0.3s,
+      color 0.25s;
 
     &:focus,
     &:hover {
@@ -322,32 +327,55 @@ footer {
 /* calendar */
 
 #dbkcalendar {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: auto 10em;
+  column-gap: 1em;
+
   * {
     border-radius: 0.25em;
   }
 
-  .calendar-date th {
+  .calendar-date {
+    grid-column: 1 / span 2;
+
     padding: 0.5em 1em;
+
     background: var(--main-bg-contrast-color);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
-  td {
+
+  .calendar-entry {
+    grid-column: 1 / span 2;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-auto-flow: column;
+
     padding: 1em;
+    padding-top: 0.5em;
+    margin-bottom: 1em;
+
+    background: var(--lighter-bg-contrast-color);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
+
   p {
     margin: 0;
     max-height: min-content;
+  }
 
-    &.categories {
+  .categories {
-      margin-top: 0.2em;
+    margin-top: 0.2em;
 
-      em {
+    em {
-        background-color: var(--secondary-accent-color);
+      background-color: var(--secondary-accent-color);
-        padding: 0 0.25em;
+      padding: 0 0.25em;
-        margin-right: 0.2em;
+      margin-right: 0.2em;
-        font-style: normal;
+      font-style: normal;
-        font-weight: bold;
+      font-weight: bold;
-        color: var(--main-bg-color);
+      color: var(--main-bg-color);
-      }
     }
   }
 }

templates/page.html

@@ -124,26 +124,18 @@
       <a href="{{ get_url(path='/datenschutz') }}">Datenschutz</a>
     </footer>
 
-    <template id="calendar">
-      <table>
-        <tbody></tbody>
-      </table>
-    </template>
     <template id="calendar-date">
-      <tr class="calendar-date">
+      <div class="calendar-date">
-        <th colspan="2">
+        <time></time>
-          <time></time>
+      </div>
-        </th>
-      </tr>
     </template>
     <template id="calendar-entry">
-      <tr class="calendar-entry" data-uid="">
+      <div class="calendar-entry" data-uid="">
-        <td class="time"></td>
+        <div role="none" class="calendar-text">
-        <td>
           <p><em class="summary"></em> | <span class="location"></span></p>
           <p class="description"></p>
-          <p class="categories"></p>
+        </div>
-        </td>
+        <div class="categories"></div>
       </tr>
     </template>
   </body>