Clean up Calendar code

Add checks for notBefore a date
Rename variables for easier reading

front/src/components/Calendar.svelte

@@ -28,42 +28,61 @@
         "December",
     ];
 
-    const today = new Date();
+    export let notBefore: Date;
+    export let selectedDate: Date;
+    let todayDate = new Date();
 
-    let date = new Date();
-    let year = date.getFullYear();
-    let month = date.getMonth();
-    let selectedDate: Date;
+    let viewingDate = new Date();
+    let viewingYear = viewingDate.getFullYear();
+    let viewingMonth = viewingDate.getMonth();
 
-    $: firstDayOffset = new Date(year, month, 0).getDay();
-    $: monthLength = new Date(year, month + 1, 0).getDate();
-    $: lastDayOffset = new Date(year, month, monthLength).getDay();
+    $: firstDayOffset = new Date(viewingYear, viewingMonth, 0).getDay();
+    $: monthLength = new Date(viewingYear, viewingMonth + 1, 0).getDate();
 
-    function last() {
-        month -= 1;
+    $: isToday = (day: number) => {
+        return (
+            day === todayDate.getDate()
+            && viewingMonth === todayDate.getMonth()
+            && viewingYear === todayDate.getFullYear()
+        );
+    }
+    $: isSelected = (day: number) => {
+        return (
+            selectedDate
+            && day === selectedDate.getDate()
+            && viewingMonth === selectedDate.getMonth()
+            && viewingYear === selectedDate.getFullYear()
+        );
+    }
+    $: isBefore = (day: number) => {
+        const thisDate = new Date(viewingYear, viewingMonth, day);
+        return notBefore && thisDate < notBefore;
+    }
+
+    function backMonth() {
+        viewingMonth -= 1;
         updateDate();
     }
-
-    function next() {
-        month += 1;
+    function forwardsMonth() {
+        viewingMonth += 1;
         updateDate();
     }
-
-    function selected(day: number) {
-        selectedDate = new Date(year, month, day);
-        dispatcher("selected", { date: selectedDate });
-    }
-
     function updateDate() {
-        if (month < 0 || month > 11) {
-            date = new Date(year, month, new Date().getDate());
-            year = date.getFullYear();
-            month = date.getMonth();
+        if (viewingMonth < 0 || viewingMonth > 11) {
+            viewingDate = new Date(viewingYear, viewingMonth, new Date().getDate());
+            viewingYear = viewingDate.getFullYear();
+            viewingMonth = viewingDate.getMonth();
         } else {
-            date = new Date();
+            viewingDate = new Date();
         }
     }
 
+    function dateSelected(event) {
+        const day: number = event.target.getAttribute("data-day");
+        selectedDate = new Date(viewingYear, viewingMonth, day);
+        dispatcher("selected", { date: selectedDate });
+    }
+
     // Full reference code:
     // https://www.geeksforgeeks.org/how-to-design-a-simple-calendar-using-javascript/
 </script>
@@ -71,9 +90,9 @@
 
 <div class="calendar">
     <div class="calendar-header">
-        <p>{monthLabels[month]}&nbsp;<span>{year}</span></p>
-        <button on:click={last}><ArrowArcLeft weight="fill" /></button>
-        <button on:click={next}><ArrowArcRight weight="fill" /></button>
+        <p>{monthLabels[viewingMonth]}&nbsp;<span>{viewingYear}</span></p>
+        <button on:click={backMonth}><ArrowArcLeft weight="fill" /></button>
+        <button on:click={forwardsMonth}><ArrowArcRight weight="fill" /></button>
     </div>
     <div class="calendar-weeks">
         {#each weekLabels as label}
@@ -81,28 +100,11 @@
         {/each}
     </div>
     <div class="calendar-days">
-        {#each {length:firstDayOffset} as _}
-            <div />
-        {/each}
-        {#each {length:monthLength} as _, dayNum}
-            <div
-                    class:today={
-                        dayNum+1 === today.getDate()
-                        && month === today.getMonth()
-                        && year === today.getFullYear()
-                    }
-                    class:selected={
-                        selectedDate
-                        && dayNum+1 === selectedDate.getDate()
-                        && month === selectedDate.getMonth()
-                        && year === selectedDate.getFullYear()
-                    }
-            >
-                <button on:click={() => { selected(dayNum+1) }}>{dayNum+1}</button>
+        {#each {length:firstDayOffset} as _}<div />{/each}
+        {#each {length:monthLength} as _, day}
+            <div class:today={isToday(day+1)} class:selected={isSelected(day+1)} class:before={isBefore(day+1)}>
+                <button on:click={dateSelected} data-day={day+1}>{day+1}</button>
             </div>
         {/each}
-        {#each {length:lastDayOffset} as _}
-            <!-- Not really important to add these.... -->
-        {/each}
     </div>
 </div>