Calendar

front/src/components/Calendar.svelte

@@ -0,0 +1,73 @@
+<script>
+    import { ArrowArcLeft, ArrowArcRight } from "phosphor-svelte";
+
+    const weekLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+    const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+    let date = new Date();
+    let year = date.getFullYear();
+    let month = date.getMonth();
+
+    $: firstDayOffset = new Date(year, month, 0).getDay();
+    $: monthLength = new Date(year, month + 1, 0).getDate();
+    $: lastDayOffset = new Date(year, month, monthLength).getDay();
+
+    function last() {
+        month -= 1;
+
+        if (month < 0 || month > 11) {
+            date = new Date(year, month, new Date().getDate());
+            year = date.getFullYear();
+            month = date.getMonth();
+        } else {
+            date = new Date();
+        }
+    }
+    function next() {
+        month += 1;
+
+        if (month < 0 || month > 11) {
+            date = new Date(year, month, new Date().getDate());
+            year = date.getFullYear();
+            month = date.getMonth();
+        } else {
+            date = new Date();
+        }
+    }
+
+    // Full reference code:
+    // https://www.geeksforgeeks.org/how-to-design-a-simple-calendar-using-javascript/
+</script>
+
+
+<div class="calendar">
+    <div class="calendar-header">
+        <p>{monthLabels[month]}&nbsp;{year}</p>
+        <button on:click={last}><ArrowArcLeft weight="fill" /></button>
+        <button on:click={next}><ArrowArcRight weight="fill" /></button>
+    </div>
+    <div class="calendar-weeks">
+        {#each weekLabels as weekname}
+            <span>{weekname}</span>
+        {/each}
+    </div>
+    <div class="calendar-days">
+        {#each {length:firstDayOffset} as _}
+            <div />
+        {/each}
+        {#each {length:monthLength} as _, i}
+            <div
+                    class:today={
+                        i === date.getDate()
+                        && month === new Date().getMonth()
+                        && year === new Date().getFullYear()
+                    }
+            >
+                <button>{i+1}</button>
+            </div>
+        {/each}
+        {#each {length:lastDayOffset} as _}
+            <!-- Not really important to add these.... -->
+        {/each}
+    </div>
+</div>

front/src/pages/PageBooking.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { expandOnTyping } from "../lib/utils";
+    import Calendar from "../components/Calendar.svelte";
 
     const specialRequestsMax = 300;
 
@@ -88,11 +89,11 @@
         {/if}
     </div>
 
-    <div class="spacer half" />
-    <hr>
     <div class="spacer" />
-    <hr>
-    <div class="spacer half" />
+
+    <Calendar />
+
+    <div class="spacer" />
 
     <div class="form-element">
         <label class="form-label" for="message">Message</label>

front/src/styles/_calendar.scss

@@ -0,0 +1,107 @@
+.calendar {
+    width: 400px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    border-radius: $border-radius-large;
+    background-color: $color-light;
+    color: $color-on-light;
+
+    overflow: hidden;
+}
+
+.calendar-header {
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    border-bottom: 1px dotted rgba($color-light, 0.2);
+    background-color: $color-dark;
+    color: $color-on-dark;
+
+    z-index: 4;
+
+    > p {
+        padding-left: $spacing-normal;
+        flex-grow: 1;
+        font-size: $font-size-h4;
+    }
+
+    > button {
+        padding: $spacing-normal;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: $font-size-p;
+
+        border-radius: $border-radius-normal;
+        border: 1px solid transparent;
+        background-color: transparent;
+        color: $color-on-dark;
+
+        &:hover {
+            color: $color-primary;
+        }
+    }
+}
+
+.calendar-weeks {
+    padding: $spacing-small;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    background-color: $color-dark;
+    color: $color-on-dark;
+    box-shadow: 0 0 3px 1px rgba(#000, 0.3);
+
+    > span {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.calendar-days {
+    padding: $spacing-small;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    > div {
+        height: 40px;
+        overflow: hidden;
+        list-style: none;
+
+        > button {
+            padding: 0;
+
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            border-radius: $border-radius-normal;
+            border: 1px solid transparent;
+            background-color: transparent;
+
+            &:hover {
+                border: 1px solid rgba($color-dark, 0.3);
+            }
+        }
+
+        &.today {
+            > button {
+                background-color: $color-primary;
+                color: $color-on-primary;
+            }
+        }
+    }
+}

front/src/styles/main.scss

@@ -8,3 +8,4 @@
 @import "container";
 @import "menu_item";
 @import "form_element";
+@import "calendar";