"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface CalendarEventDot {
  date: string;
  label?: string;
  tone?: "default" | "primary" | "muted" | "destructive";
}

export interface CalendarProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value"> {
  value?: Date | null;
  defaultValue?: Date | null;
  onChange?: (date: Date | null) => void;
  initialMonth?: Date;
  onMonthChange?: (month: Date) => void;
  events?: CalendarEventDot[];
  weekStartsOn?: 0 | 1;
  showOutsideDays?: boolean;
}

const weekLabels: Record<0 | 1, string[]> = {
  0: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  1: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
};

const toneClasses: Record<NonNullable<CalendarEventDot["tone"]>, string> = {
  default: "bg-muted",
  primary: "bg-primary",
  muted: "bg-muted opacity-60",
  destructive: "bg-destructive",
};

const pad = (value: number) => value.toString().padStart(2, "0");

const toDateKey = (date: Date) =>
  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;

const startOfMonth = (date: Date) =>
  new Date(date.getFullYear(), date.getMonth(), 1);

const addMonths = (date: Date, amount: number) =>
  new Date(date.getFullYear(), date.getMonth() + amount, 1);

const isSameDay = (left: Date, right: Date) =>
  left.getFullYear() === right.getFullYear() &&
  left.getMonth() === right.getMonth() &&
  left.getDate() === right.getDate();

export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
  (
    {
      className,
      value,
      defaultValue = null,
      onChange,
      initialMonth,
      onMonthChange,
      events = [],
      weekStartsOn = 1,
      showOutsideDays = true,
      ...props
    },
    ref
  ) => {
    const isControlled = value !== undefined;
    const [internalValue, setInternalValue] = React.useState<Date | null>(
      defaultValue
    );
    const selectedDate = isControlled ? value ?? null : internalValue;

    const [currentMonth, setCurrentMonth] = React.useState(() => {
      const base = initialMonth ?? selectedDate ?? new Date();
      return startOfMonth(base);
    });

    React.useEffect(() => {
      if (!selectedDate) return;
      setCurrentMonth(startOfMonth(selectedDate));
    }, [selectedDate]);

    const eventMap = React.useMemo(() => {
      const map = new Map<string, CalendarEventDot[]>();
      events.forEach((event) => {
        const existing = map.get(event.date) ?? [];
        map.set(event.date, [...existing, event]);
      });
      return map;
    }, [events]);

    const updateDate = (next: Date | null) => {
      if (!isControlled) {
        setInternalValue(next);
      }
      onChange?.(next);
    };

    const handleMonthChange = (direction: number) => {
      setCurrentMonth((prev) => {
        const next = startOfMonth(addMonths(prev, direction));
        onMonthChange?.(next);
        return next;
      });
    };

    const firstDay = currentMonth;
    const lastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
    const daysInMonth = lastDay.getDate();
    const offset = (firstDay.getDay() - weekStartsOn + 7) % 7;
    const totalCells = Math.ceil((offset + daysInMonth) / 7) * 7;
    const today = new Date();

    const monthLabel = currentMonth.toLocaleString("en-US", {
      month: "long",
      year: "numeric",
    });

    return (
      <div
        ref={ref}
        className={cn("rounded-2xl border border-border bg-card", className)}
        {...props}
      >
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <button
            type="button"
            onClick={() => handleMonthChange(-1)}
            className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:bg-muted focus-visible:outline-none"
            aria-label="Previous month"
          >
            <svg
              viewBox="0 0 20 20"
              className="h-4 w-4"
              aria-hidden="true"
            >
              <path
                d="M12.5 4.5 7.5 10l5 5.5"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.6"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
          <div className="text-sm font-semibold text-foreground">{monthLabel}</div>
          <button
            type="button"
            onClick={() => handleMonthChange(1)}
            className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:bg-muted focus-visible:outline-none"
            aria-label="Next month"
          >
            <svg
              viewBox="0 0 20 20"
              className="h-4 w-4"
              aria-hidden="true"
            >
              <path
                d="M7.5 4.5 12.5 10l-5 5.5"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.6"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        </div>

        <div className="grid grid-cols-7 gap-px border-b border-border bg-border/60 text-xs text-muted-foreground">
          {weekLabels[weekStartsOn].map((label) => (
            <div key={label} className="bg-card px-2 py-2 text-center font-semibold">
              {label}
            </div>
          ))}
        </div>

        <div className="grid grid-cols-7 gap-px bg-border/60">
          {Array.from({ length: totalCells }).map((_, index) => {
            const dayNumber = index - offset + 1;
            const date = new Date(
              currentMonth.getFullYear(),
              currentMonth.getMonth(),
              dayNumber
            );
            const inMonth = dayNumber >= 1 && dayNumber <= daysInMonth;

            if (!showOutsideDays && !inMonth) {
              return <div key={index} className="bg-card" />;
            }

            const dateKey = toDateKey(date);
            const dayEvents = eventMap.get(dateKey) ?? [];
            const isToday = isSameDay(date, today);
            const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;

            return (
              <button
                key={dateKey}
                type="button"
                onClick={() => updateDate(date)}
                className={cn(
                  "flex min-h-[96px] flex-col gap-3 bg-card px-2 py-2 text-left transition hover:bg-muted focus-visible:outline-none",
                  inMonth ? "text-foreground" : "text-muted-foreground"
                )}
              >
                <div
                  className={cn(
                    "flex h-8 w-8 items-center justify-center rounded-md text-sm font-semibold",
                    isSelected ? "bg-primary text-primary-foreground" : "bg-muted",
                    !isSelected && isToday ? "ring-1 ring-ring" : ""
                  )}
                >
                  {date.getDate()}
                </div>
                <div className="flex flex-wrap items-center gap-1">
                  {dayEvents.slice(0, 3).map((event, eventIndex) => (
                    <span
                      key={`${dateKey}-${event.label ?? eventIndex}`}
                      className={cn(
                        "h-2 w-2 rounded-full",
                        toneClasses[event.tone ?? "default"]
                      )}
                    />
                  ))}
                  {dayEvents.length > 3 ? (
                    <span className="text-[10px] text-muted-foreground">
                      +{dayEvents.length - 3}
                    </span>
                  ) : null}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    );
  }
);

Calendar.displayName = "Calendar";
Calendar

Dependencies

Files

Installation
