@alphinex/calendar

Headless month/week/day/resource calendar engine + styled renderer.

<Calendar>

import { Calendar } from "@alphinex/calendar";

const events = [
  { id: "1", title: "Standup", start: new Date(2026, 0, 15, 9), end: new Date(2026, 0, 15, 9, 30) },
];

<Calendar events={events} defaultView="month" />;

Add resources to enable the "resource" scheduling view (rows-per-resource, rows virtualized via @tanstack/react-virtual — the same library @alphinex/table's DataGrid uses):

<Calendar
  events={events}
  resources={[{ id: "r1", name: "Dr. Ada Lovelace" }]}
  defaultView="resource"
/>

onEventClick/onSlotClick are the "event CRUD callbacks" — this package owns no data layer itself; the app decides what a click means (open an edit modal, create a new event, etc.), consistent with every other domain package's generic-shape-in posture.

useCalendar()

The headless engine <Calendar> is built on, if you want to compose your own layout with the individual MonthView/WeekView/DayView/ResourceView renderers:

import { useCalendar, MonthView } from "@alphinex/calendar";

const calendar = useCalendar({ defaultView: "month" });
<MonthView date={calendar.date} events={events} />;

Known limitations

• No timezone conversion. All date math (dateMath.ts) operates on local wall-clock time — a calendar spanning multiple timezones is out of scope.
• Events are shown on their start day only. A multi-day event isn't rendered as a spanning bar across day cells/columns; it appears once, on the day it starts.
• 1000+ events without jank is handled two different ways depending on the view: MonthView caps events rendered per day cell (maxEventsPerDay, default 3) with a "+N more" indicator — bounded DOM nodes per cell, not virtualization. ResourceView virtualizes rows instead, since its row count (not events-per-row) is what's potentially unbounded.

See documentation/PRODUCT-RESEARCH-MASTER-PLAN.md §10 (Sprint 18) for the full package contract.