first working version

components/calendar.js

@@ -0,0 +1,42 @@
+import React, { useContext } from "react";
+
+import AppContext from "../context/app";
+
+const Calendar = () => {
+  const { loading, songs, openDoor } = useContext(AppContext);
+
+  if (loading || !songs) {
+    return null;
+  }
+
+  return (
+    <div>
+      <ul className="cal">
+        {songs.map((song, index) => {
+          const classes = ["calcard", song.locked && "calcard__locked"]
+            .filter(Boolean)
+            .join(" ");
+
+          return (
+            <li
+              className={classes}
+              data-id={index}
+              key={song.id}
+              onClick={() => !song.locked && openDoor(index)}
+              title={
+                song.locked &&
+                `Es ist noch nicht der ${new Date(
+                  song.lockedUntil
+                ).toLocaleDateString()}! Geduld, nur Gedult!` || index + 1
+              }
+            >
+              <span className="cardnumber">{index + 1}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div >
+  );
+};
+
+export default Calendar;