Calendar

1import { ChevronLeft, ChevronRight } from "lucide-solid";
2import type { Component } from "solid-js";
3import { For, createMemo, createSignal, splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5import { buttonVariants } from "./button";
6 
7const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] as const;
8const MONTHS = [
9  "January",
10  "February",
11  "March",
12  "April",
13  "May",
14  "June",
15  "July",
16  "August",
17  "September",
18  "October",
19  "November",
20  "December",
21] as const;
22 
23export type CalendarProps = {
24  class?: string;
25  selected?: Date;
26  onSelect?: (date: Date) => void;
27  defaultMonth?: Date;
28  disabled?: (date: Date) => boolean;
29  mode?: "single" | "range";
30};
31 
32export const Calendar: Component<CalendarProps> = (props) => {
33  const [local] = splitProps(props, ["class", "selected", "onSelect", "defaultMonth", "disabled"]);
34 
35  const today = new Date();
36  const [viewDate, setViewDate] = createSignal(local.defaultMonth ?? local.selected ?? today);
37 
38  const year = () => viewDate().getFullYear();
39  const month = () => viewDate().getMonth();
40 
41  const days = createMemo(() => {
42    const firstDay = new Date(year(), month(), 1).getDay();
43    const daysInMonth = new Date(year(), month() + 1, 0).getDate();
44    const daysInPrevMonth = new Date(year(), month(), 0).getDate();
45 
46    const cells: Array<{ date: Date; outside: boolean }> = [];
47 
48    for (let i = firstDay - 1; i >= 0; i--) {
49      cells.push({ date: new Date(year(), month() - 1, daysInPrevMonth - i), outside: true });
50    }
51    for (let d = 1; d <= daysInMonth; d++) {
52      cells.push({ date: new Date(year(), month(), d), outside: false });
53    }
54    const remaining = 42 - cells.length;
55    for (let d = 1; d <= remaining; d++) {
56      cells.push({ date: new Date(year(), month() + 1, d), outside: true });
57    }
58 
59    return cells;
60  });
61 
62  const isSelected = (date: Date) =>
63    local.selected ? date.toDateString() === local.selected.toDateString() : false;
64 
65  const isToday = (date: Date) => date.toDateString() === today.toDateString();
66 
67  const prevMonth = () => setViewDate(new Date(year(), month() - 1, 1));
68  const nextMonth = () => setViewDate(new Date(year(), month() + 1, 1));
69 
70  return (
71    <div class={cn("p-3", local.class)}>
72      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
73        <div class="space-y-4">
74          <div class="flex items-center justify-between pt-1 relative">
75            <button
76              type="button"
77              onClick={prevMonth}
78// … truncated