working on #6 and fixed #13

Backend/static/css/styles.css

@@ -550,6 +550,9 @@
   .col-span-3 {
     grid-column: span 3 / span 3;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .-my-1 {
     margin-block: calc(var(--spacing) * -1);
   }
@@ -591,6 +594,9 @@
   .h-full {
     height: 100%;
   }
+  .w-1\/3 {
+    width: calc(1/3 * 100%);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -633,6 +639,9 @@
   .items-center {
     align-items: center;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -743,6 +752,9 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .text-accent {
     color: var(--color-accent);
   }
@@ -755,6 +767,9 @@
   .text-neutral-800 {
     color: var(--color-neutral-800);
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .text-red-600 {
     color: var(--color-red-600);
   }

Backend/static/script.js

@@ -24,3 +24,11 @@ function editAbwesenheit(element, event) {
     newBookingComponent.style.display = "none";
   }
 }
+
+function navigateWeek(element, event, direction) {
+  var dateInput = element.closest("form").querySelector("input[type=date]");
+  var date = dateInput.valueAsDate;
+  date.setDate(date.getDate() + 7 * direction);
+  date.setHours(10);
+  dateInput.valueAsDate = date;
+}