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>

front/src/pages/PageBooking.svelte

@@ -3,32 +3,25 @@
     import Calendar from "../components/Calendar.svelte";
 
     const specialRequestsMax = 300;
+    const today = new Date();
 
     let name = "";
     let email = "";
     let telephone = "";
+    let date: Date;
     let specialRequests = "";
 
     let nameValid = true;
     let emailValid = true;
     let telephoneValid = true;
+    let dateValid = true;
     let specialRequestsValid = true;
 
-    function validateName() {
-        nameValid = name.length > 1
-    }
-
-    function validateEmail() {
-        emailValid = email.length > 1
-    }
-
-    function validateTelephone() {
-        telephoneValid = telephone.length == 11
-    }
-
-    function validateSpecialRequests() {
-        specialRequestsValid = specialRequests.length < 301
-    }
+    function validateName() { nameValid = name.length > 1}
+    function validateEmail() { emailValid = email.length > 1}
+    function validateTelephone() { telephoneValid = telephone.length == 11}
+    function validateDate() { dateValid = date > today;}
+    function validateSpecialRequests() { specialRequestsValid = specialRequests.length < 301 }
 
     function onSubmit(event) {
 
@@ -91,11 +84,17 @@
 
     <div class="spacer" />
 
-    <Calendar
-            on:selected={(event) => {
-                console.log(event.detail.date)
-            }}
-    />
+    <div class="form-element">
+        <p class="form-label">Booking Date</p>
+        <Calendar
+                bind:selectedDate={date}
+                on:selected={validateDate}
+                notBefore={today}
+        />
+        {#if !dateValid}
+            <span class="form-notice error">Date not valid! Must chose date tomorrow or later</span>
+        {/if}
+    </div>
 
     <div class="spacer" />
 

front/src/styles/_calendar.scss

@@ -30,6 +30,7 @@
         padding-left: $spacing-normal;
         flex-grow: 1;
         font-size: $font-size-h4;
+        font-weight: $font-weight-thin;
 
         > span {
             font-weight: $font-weight-bolder;
@@ -47,8 +48,7 @@
 
         font-size: $font-size-p;
 
-        border-radius: $border-radius-normal;
-        border: 1px solid transparent;
+        border: 0 solid transparent;
         background-color: transparent;
         color: $color-on-dark;
 
@@ -95,19 +95,28 @@
             justify-content: center;
             align-items: center;
 
-            border-radius: $border-radius-normal;
+            border-radius: $border-radius-circle;
             border: 1px solid transparent;
             background-color: transparent;
+            color: $color-on-light;
 
             &:hover {
                 border: 1px solid rgba($color-dark, 0.3);
             }
         }
 
+        &:nth-child(7n-1),
+        &:nth-child(7n){
+            > button {
+                color: rgba($color-on-light, 0.5);
+            }
+        }
+
         &.today {
             > button {
                 font-weight: $font-weight-black;
                 text-decoration: underline;
+                color: $color-on-light;
                 //background-color: $color-primary;
                 //color: $color-on-primary;
             }
@@ -120,6 +129,13 @@
                 background-color: $color-primary;
                 color: $color-on-primary;
             }
+
+            &.before {
+                > button {
+                    background-color: $color-error;
+                    color: $color-on-error;
+                }
+            }
         }
     }
 }