feature calendar refutes claims

Author: jeremy-clearlabs

components.json

@@ -8,7 +8,10 @@
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
 	},
-	"typescript": true
-}
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
+}

package-lock.json

@@ -37,7 +37,9 @@
     "d3": "^7.9.0",
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.0",
+    "highlight.js": "^11.9.0",
     "html-escaper": "^3.0.3",
+    "marked": "^15.0.7",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
@@ -49,8 +51,11 @@
     "tailwind-variants": "^0.3.0",
     "tailwindcss": "^3.4.17",
     "unist-util-remove": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
-    "marked": "^15.0.7",
-    "highlight.js": "^11.9.0"
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@internationalized/date": "^3.7.0",
+    "bits-ui": "^1.1.0",
+    "lucide-svelte": "^0.475.0"
   }
 }

package.json

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { getLocalTimeZone, today, parseDate } from "@internationalized/date";
+  import type { DateValue } from "@internationalized/date";
+  import { Calendar } from "$lib/components/ui/calendar";
+  import { Badge } from "$lib/components/ui/badge";
+  import holidays from "../utils/holidays.ts";
+  import { onMount } from "svelte";
+  import type { Holiday } from "../utils/holidays.ts";
+
+  // default selected date is today
+  let value: DateValue | undefined = today(getLocalTimeZone());
+  // let selectedDate: Date = new Date();
+  let selectedHolidays: Holiday[];
+
+  $: {
+    console.log("selectedDate changed:", value);
+    selectedHolidays = value
+      ? holidays.filter((h) => h.date === value.toString())
+      : [];
+    console.log("selectedHolidays:", selectedHolidays);
+  }
+
+  function modifierClass(date: DateValue): string {
+    const isoDateStr = date.toString();
+    const hasHoliday = holidays.some((h) => h.date === isoDateStr);
+    if (hasHoliday) {
+      console.log("Date has holiday:", isoDateStr);
+    }
+    return hasHoliday ? "holiday-date" : "";
+  }
+
+  let maxValue = parseDate("2025-12-31");
+  let minValue = parseDate("2025-01-01");
+
+  function isDateUnavailable(date: DateValue) {
+    // if a date is not in the list of holidays, return false
+    return !holidays.some((h) => h.date === date.toString());
+  }
+
+  onMount(() => {
+    console.log("Total holidays in dataset:", holidays.length);
+    console.log("Sample holidays:", holidays.slice(0, 100));
+  });
+</script>
+
+<div class="calendar-container space-y-4">
+  <Calendar
+    type="single"
+    bind:value
+    {maxValue}
+    {minValue}
+    numberOfMonths={1}
+    class="rounded-md border shadow calendar-container"
+    {isDateUnavailable}
+  />
+  <button
+    class="px-2 my-2 border-slate-800 dark:border-slate-200 border-2 rounded hover:bg-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
+    disabled={value?.toString() === today(getLocalTimeZone()).toString()}
+    on:click={() => (value = today(getLocalTimeZone()))}>Return to today</button
+  >
+
+  {#if selectedHolidays.length > 0}
+    <div class="p-4 border rounded-md space-y-2">
+      <h3 class="font-semibold text-lg">
+        Holidays on {value?.toString()}
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+        {#each selectedHolidays as holiday}
+          <Badge variant="secondary" class="flex items-center gap-1">
+            {holiday.holiday}
+            {#if holiday.note}
+              <span class="text-xs text-muted-foreground">({holiday.note})</span
+              >
+            {/if}
+          </Badge>
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="p-4 border rounded-md space-y-2">
+      <h3 class="font-semibold text-lg">
+        No holidays on {value?.toString()}
+      </h3>
+    </div>
+  {/if}
+</div>
+
+<style lang="postcss">
+  :global(.calendar-container) {
+    --destructive-foreground: rgb(239 68 68);
+  }
+
+  :global(
+      .data-\[unavailable\]\:text-destructive-foreground[data-unavailable]
+    ) {
+    color: var(--destructive-foreground) !important;
+  }
+
+  :global(.calendar-container div div) {
+    justify-content: center;
+  }
+
+  :global(.calendar-container div div table) {
+    width: initial !important;
+  }
+</style>

src/components/HolidayCalendar.svelte

@@ -0,0 +1,17 @@
+---
+import holidays from "../utils/holidays.ts";
+
+const holidaysToShow = holidays;
+---
+
+<ul class="list-none p-0">
+  {holidaysToShow.map((holiday) => (
+    <li class="py-2 px-2 border-b border-gray-200">
+      <span class="text-gray-500 mr-4">{holiday.date}</span>
+      <span class="text-gray-900">{holiday.holiday}</span>
+      {holiday.note && (
+        <span class="text-gray-500 ml-4">{holiday.note}</span>
+      )}
+    </li>
+  ))}
+</ul>

src/components/HolidayList.astro

@@ -96,7 +96,7 @@
 </script>
 
 <div class="markdown-preview">
-  <div class="grid grid-cols-2 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
     <div class="editor">
       <textarea
         class="w-full h-[500px] p-4 border rounded"