My availability tab

src/lib/components/Calendar/Calendar.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
   import CalendarBody from "$lib/components/Calendar/CalendarBody.svelte";
-  import { Day } from "$lib/components/Calendar/CalendarDay";
   import { selectedDays } from "$lib/stores/calendarStores";
   import { WEEKDAYS, MONTHS } from "$lib/types/chrono";
+  import { ZotDate } from "$lib/utils/ZotDate";
 
   let today: Date = new Date();
   let currentMonth: number = today.getMonth();
   let currentYear: number = today.getFullYear();
-  let calendarDays: Day[][] = Day.generateCalendarDays(currentMonth, currentYear, $selectedDays);
+  let calendarDays: ZotDate[][] = ZotDate.generateZotDates(
+    currentMonth,
+    currentYear,
+    $selectedDays,
+  );
 
   $: monthName = MONTHS[currentMonth];
 
@@ -32,13 +36,13 @@
   };
 
   const updateCalendar = (): void => {
-    calendarDays = Day.generateCalendarDays(currentMonth, currentYear, $selectedDays);
+    calendarDays = ZotDate.generateZotDates(currentMonth, currentYear, $selectedDays);
   };
 </script>
 
-<div class="max-w-xl p-5 mx-auto bg-surface-50">
-  <p class="text-center h3">{monthName} {currentYear}</p>
-  <div class="flex items-center justify-between pt-5 overflow-x-auto">
+<div class="mx-auto max-w-xl bg-surface-50 p-5">
+  <p class="h3 text-center">{monthName} {currentYear}</p>
+  <div class="flex items-center justify-between overflow-x-auto pt-5">
     <button on:click={decrementMonth} class="p-3 pl-1">
       <span class="text-3xl text-gray-500">&lsaquo;</span>
     </button>
@@ -47,16 +51,16 @@
         <tr>
           {#each WEEKDAYS as dayOfWeek}
             <th>
-              <div class="flex justify-center w-full">
-                <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">
+              <div class="flex w-full justify-center">
+                <p class="text-center text-base font-medium text-gray-800 dark:text-gray-100">
                   {dayOfWeek}
                 </p>
               </div>
             </th>
           {/each}
         </tr>
       </thead>
-      <CalendarBody {calendarDays} {updateCalendar} />
+      <CalendarBody {calendarDays} {updateCalendar} {currentMonth} />
     </table>
     <button on:click={incrementMonth} class="p-3 pr-1">
       <span class="text-3xl text-gray-500">&rsaquo;</span>

src/lib/components/Calendar/CalendarBody.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import CalendarBodyDay from "$lib/components/Calendar/CalendarBodyDay.svelte";
-  import { Day } from "$lib/components/Calendar/CalendarDay";
   import { updateSelectedRange } from "$lib/stores/calendarStores";
+  import { ZotDate } from "$lib/utils/ZotDate";
 
-  export let calendarDays: Day[][];
+  export let calendarDays: ZotDate[][];
   export let updateCalendar: () => void = () => {};
+  export let currentMonth: number;
 
-  let startDaySelection: Day | null = null;
-  let endDaySelection: Day | null = null;
+  let startDaySelection: ZotDate | null = null;
+  let endDaySelection: ZotDate | null = null;
 
   /**
    * Updates the current highlight selection whenever a mobile user drags on the calendar
@@ -24,7 +25,7 @@
     const touchingDay = touchingElement.getAttribute("data-day");
 
     if (startDaySelection && touchingDay) {
-      endDaySelection = Day.extractDayFromElement(touchingElement);
+      endDaySelection = ZotDate.extractDayFromElement(touchingElement);
     }
   };
 
@@ -59,7 +60,7 @@
             }
           }}
         >
-          {#if calendarDay.day > 0}
+          {#if calendarDay.getMonth() === currentMonth}
             {@const isHighlighted =
               startDaySelection &&
               endDaySelection &&
@@ -90,13 +91,13 @@
                 handleEndSelection();
               }}
               tabindex="0"
-              class="relative flex justify-center w-full cursor-pointer select-none"
+              class="relative flex w-full cursor-pointer select-none justify-center"
             >
               <CalendarBodyDay {isHighlighted} {calendarDay} />
             </button>
           {:else}
-            <div class="select-none">
-              <p class="p-2">&nbsp;</p>
+            <div class="flex w-full select-none justify-center">
+              <p class="p-2 text-surface-400">{calendarDay.getDay()}</p>
             </div>
           {/if}
         </td>

src/lib/components/Calendar/CalendarBodyDay.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
-  import type { Day } from "$lib/components/Calendar/CalendarDay";
+  import type { ZotDate } from "$lib/utils/ZotDate";
 
   export let isHighlighted: boolean | null;
-  export let calendarDay: Day;
+  export let calendarDay: ZotDate;
 </script>
 
 {#if isHighlighted}
   <div
-    class="absolute w-10 h-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-200 top-1/2 left-1/2"
+    class="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-200"
   ></div>
 {:else if calendarDay.isSelected}
   <div
-    class="absolute w-10 h-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-400 top-1/2 left-1/2"
+    class="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-400"
   ></div>
 {/if}
+
 <p
   class="relative p-2 text-base font-medium text-gray-500"
-  data-day={calendarDay.day}
-  data-month={calendarDay.month}
-  data-year={calendarDay.year}
+  data-day={calendarDay.getDay()}
+  data-month={calendarDay.getMonth()}
+  data-year={calendarDay.getYear()}
   data-selected={calendarDay.isSelected}
 >
-  {calendarDay.day}
+  {calendarDay.getDay()}
 </p>

src/lib/components/availability/AvailabilityBlock.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { SelectionStateType } from "$lib/types/availability";
+
+  export let isAvailable: boolean;
+  export let zotDateIndex: number;
+  export let blockIndex: number;
+  export let selectionState: SelectionStateType | null;
+
+  let backgroundColor: string = "";
+
+  /**
+   * Updates the background color of a single time block cell
+   * @param selectionState the current boundaries describing the user's selection
+   */
+  const updateBlockColor = (selectionState: SelectionStateType | null): void => {
+    // Render different background color if user is in middle of making a selection and is in range
+    if (selectionState) {
+      const { earlierDateIndex, laterDateIndex, earlierBlockIndex, laterBlockIndex } =
+        selectionState;
+      const dateInRange = earlierDateIndex <= zotDateIndex && zotDateIndex <= laterDateIndex;
+      const timeInRange = earlierBlockIndex <= blockIndex && blockIndex <= laterBlockIndex;
+
+      if (dateInRange && timeInRange) {
+        backgroundColor = "bg-success-200";
+        return;
+      }
+    }
+    backgroundColor = isAvailable ? "bg-success-400" : "bg-neutral-200";
+  };
+
+  $: {
+    updateBlockColor(selectionState);
+  }
+</script>
+
+<div
+  data-date-index={zotDateIndex}
+  data-block-index={blockIndex}
+  class={`${backgroundColor} block h-full w-full py-2`}
+></div>