@spatika/react 1.2.0 → 1.3.1

package/src/composites/EventCalendar.tsx

@@ -60,6 +60,37 @@ import {
 } from "./scheduler-ui";
 import { DropdownMenuItem } from "../primitives/DropdownMenu";
 
+export type EventCalendarEventVariant =
+  | "month-bar"
+  | "month-timed"
+  | "all-day"
+  | "time-grid"
+  | "agenda";
+
+export type EventCalendarEventRenderContext = {
+  view: CalendarView;
+  variant: EventCalendarEventVariant;
+  locale?: string;
+  hour12: boolean;
+  source?: SchedulerEvent;
+  defaultChildren: ReactNode;
+};
+
+export type EventCalendarToolbarContext = {
+  view: CalendarView;
+  date: Date;
+  title: string;
+  views: CalendarView[];
+  locale?: string;
+  preferences: Required<SchedulerPreferences>;
+  onViewChange: (view: CalendarView) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  onToday: () => void;
+  onDateChange: (date: Date) => void;
+  onPreferencesChange: (next: Required<SchedulerPreferences>) => void;
+};
+
 export type EventCalendarProps = {
   events?: SchedulerEvent[];
   resources?: SchedulerResource[];
@@ -85,6 +116,22 @@ export type EventCalendarProps = {
   onEventCreate?: (event: SchedulerEvent) => void;
   onEventDelete?: (event: SchedulerEvent) => void;
   onSlotClick?: (slot: { start: Date; end: Date; allDay: boolean }) => void;
+  /**
+   * Built-in create/edit dialog. Defaults to true.
+   * Set false when the host owns create/edit (custom schedule modal, etc.).
+   */
+  showEventEditor?: boolean;
+  /** Preferences gear in the default toolbar. Ignored when `renderToolbar` is set. */
+  showPreferences?: boolean;
+  /** Extra controls after the view menu. Ignored when `renderToolbar` is set. */
+  toolbarTrailing?: ReactNode;
+  /** Replace event chip contents. The kit still wraps with the click/drag trigger. */
+  renderEvent?: (
+    event: NormalizedEvent,
+    context: EventCalendarEventRenderContext,
+  ) => ReactNode;
+  /** Replace the toolbar. The default kit toolbar is used when omitted. */
+  renderToolbar?: (context: EventCalendarToolbarContext) => ReactNode;
   className?: string;
 };
 
@@ -167,6 +214,11 @@ export function EventCalendar({
   onEventCreate,
   onEventDelete,
   onSlotClick,
+  showEventEditor = true,
+  showPreferences = true,
+  toolbarTrailing,
+  renderEvent,
+  renderToolbar,
   className,
 }: EventCalendarProps) {
   const [view, setView] = useControllableState<CalendarView>({
@@ -238,6 +290,7 @@ export function EventCalendar({
   function openEvent(event: NormalizedEvent) {
     const source = sourceEvent(events, event.id);
     if (source) onEventClick?.(source);
+    if (!showEventEditor) return;
     setDraft(source ? draftFromSource(source) : {
       id: event.id,
       title: event.title,
@@ -253,7 +306,7 @@ export function EventCalendar({
 
   function openSlot(slot: { start: Date; end: Date; allDay: boolean }) {
     onSlotClick?.(slot);
-    if (readOnly) return;
+    if (readOnly || !showEventEditor) return;
     setDraft({ start: slot.start, end: slot.end, allDay: slot.allDay });
   }
 
@@ -322,13 +375,28 @@ export function EventCalendar({
   function renderEventTrigger(
     event: NormalizedEvent,
     className: string,
-    children: ReactNode,
-    options?: { resize?: "ns" },
+    defaultChildren: ReactNode,
+    options?: { resize?: "ns"; variant: EventCalendarEventVariant },
   ) {
+    const source = sourceEvent(events, event.id);
+    const variant = options?.variant ?? "month-timed";
+    const children = renderEvent
+      ? renderEvent(event, {
+          view: resolvedView,
+          variant,
+          locale,
+          hour12,
+          source,
+          defaultChildren,
+        })
+      : defaultChildren;
+    if (renderEvent && children == null) return null;
+
     const resizable =
       options?.resize === "ns" &&
       eventCanResize(event, { readOnly, enabled: canResize }) &&
       Boolean(onEventChange);
+    const painted = variant === "month-bar" || variant === "all-day" || variant === "time-grid";
 
     const button = (
       <button
@@ -336,9 +404,11 @@ export function EventCalendar({
         draggable={false}
         className={className}
         style={
-          isMonthBar(event) || resolvedView !== "month"
-            ? eventColorStyle(event.color, resolvedView === "month" ? "bar" : "block")
-            : undefined
+          variant === "agenda"
+            ? eventColorStyle(event.color, "wash")
+            : painted
+              ? eventColorStyle(event.color, resolvedView === "month" ? "bar" : "block")
+              : undefined
         }
         onClick={() => {
           if (dragRef.current?.active) return;
@@ -385,24 +455,46 @@ export function EventCalendar({
       aria-label="Event calendar"
       onKeyDown={handleKeyDown}
     >
-      <SchedulerToolbar
-        title={title}
-        onPrev={() => go(-1)}
-        onNext={() => go(1)}
-        onToday={() => setDate(new Date())}
-        menuLabel={CALENDAR_VIEW_LABEL[resolvedView]}
-        menu={views.map((item) => (
-          <DropdownMenuItem key={item} onClick={() => setView(item)}>
-            {CALENDAR_VIEW_LABEL[item]}
-          </DropdownMenuItem>
-        ))}
-        trailing={
-          <SchedulerPreferencesMenu
-            value={resolvedPrefs}
-            onChange={(next) => setPrefs(next)}
-          />
-        }
-      />
+      {renderToolbar ? (
+        renderToolbar({
+          view: resolvedView,
+          date: resolvedDate,
+          title,
+          views,
+          locale,
+          preferences: resolvedPrefs,
+          onViewChange: (next) => setView(next),
+          onPrev: () => go(-1),
+          onNext: () => go(1),
+          onToday: () => setDate(new Date()),
+          onDateChange: (next) => setDate(next),
+          onPreferencesChange: (next) => setPrefs(next),
+        })
+      ) : (
+        <SchedulerToolbar
+          title={title}
+          onPrev={() => go(-1)}
+          onNext={() => go(1)}
+          onToday={() => setDate(new Date())}
+          menuLabel={CALENDAR_VIEW_LABEL[resolvedView]}
+          menu={views.map((item) => (
+            <DropdownMenuItem key={item} onClick={() => setView(item)}>
+              {CALENDAR_VIEW_LABEL[item]}
+            </DropdownMenuItem>
+          ))}
+          trailing={
+            <>
+              {toolbarTrailing}
+              {showPreferences ? (
+                <SchedulerPreferencesMenu
+                  value={resolvedPrefs}
+                  onChange={(next) => setPrefs(next)}
+                />
+              ) : null}
+            </>
+          }
+        />
+      )}
 
       {resolvedView === "month" ? (
         <MonthGrid
@@ -425,7 +517,7 @@ export function EventCalendar({
           locale={locale}
           hour12={hour12}
           onSlotClick={openSlot}
-          onEventClick={openEvent}
+          renderEventTrigger={renderEventTrigger}
         />
       ) : (
         <TimeGrid
@@ -446,31 +538,33 @@ export function EventCalendar({
 
       <ResourceLegend resources={resources} hiddenIds={hiddenIds} onToggle={toggleResource} />
 
-      <EventEditor
-        open={draft != null}
-        onOpenChange={(open) => {
-          if (!open) setDraft(null);
-        }}
-        draft={draft}
-        resources={resources}
-        readOnly={editorLocked}
-        onSave={(event) => {
-          if (event.id && sourceEvent(events, event.id)) {
-            const source = sourceEvent(events, event.id)!;
-            onEventChange?.(source, event);
-          } else {
-            onEventCreate?.(event);
+      {showEventEditor ? (
+        <EventEditor
+          open={draft != null}
+          onOpenChange={(open) => {
+            if (!open) setDraft(null);
+          }}
+          draft={draft}
+          resources={resources}
+          readOnly={editorLocked}
+          onSave={(event) => {
+            if (event.id && sourceEvent(events, event.id)) {
+              const source = sourceEvent(events, event.id)!;
+              onEventChange?.(source, event);
+            } else {
+              onEventCreate?.(event);
+            }
+          }}
+          onDelete={
+            onEventDelete
+              ? (id) => {
+                  const source = sourceEvent(events, id);
+                  if (source) onEventDelete(source);
+                }
+              : undefined
           }
-        }}
-        onDelete={
-          onEventDelete
-            ? (id) => {
-                const source = sourceEvent(events, id);
-                if (source) onEventDelete(source);
-              }
-            : undefined
-        }
-      />
+        />
+      ) : null}
     </SchedulerShell>
   );
 }
@@ -500,7 +594,7 @@ function MonthGrid({
     event: NormalizedEvent,
     className: string,
     children: ReactNode,
-    options?: { resize?: "ns" },
+    options?: { resize?: "ns"; variant: EventCalendarEventVariant },
   ) => ReactNode;
 }) {
   const weeks = chunkWeeks(getMonthGrid(date, weekStartsOn));
@@ -585,6 +679,7 @@ function MonthGrid({
                             slot.event,
                             "flex h-5 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold leading-none",
                             slot.event.title,
+                            { variant: "month-bar" },
                           )}
                         </div>
                       ),
@@ -628,6 +723,7 @@ function MonthGrid({
                                 </span>
                                 <span className="min-w-0 truncate font-medium">{event.title}</span>
                               </>,
+                              { variant: "month-timed" },
                             )}
                           </div>
                         ))}
@@ -698,7 +794,7 @@ function TimeGrid({
     event: NormalizedEvent,
     className: string,
     children: ReactNode,
-    options?: { resize?: "ns" },
+    options?: { resize?: "ns"; variant: EventCalendarEventVariant },
   ) => ReactNode;
 }) {
   const days =
@@ -756,6 +852,7 @@ function TimeGrid({
                     event,
                     "flex h-5 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold",
                     event.title,
+                    { variant: "all-day" },
                   )}
                 </div>
               ))}
@@ -824,7 +921,7 @@ function TimeGrid({
                           {formatTime(item.event.start, locale, hour12)}
                         </span>
                       </>,
-                      { resize: "ns" },
+                      { resize: "ns", variant: "time-grid" },
                     )}
                   </div>
                 ))}
@@ -852,7 +949,7 @@ function AgendaList({
   locale,
   hour12,
   onSlotClick,
-  onEventClick,
+  renderEventTrigger,
 }: {
   date: Date;
   events: NormalizedEvent[];
@@ -860,7 +957,12 @@ function AgendaList({
   locale?: string;
   hour12: boolean;
   onSlotClick?: EventCalendarProps["onSlotClick"];
-  onEventClick: (event: NormalizedEvent) => void;
+  renderEventTrigger: (
+    event: NormalizedEvent,
+    className: string,
+    children: ReactNode,
+    options?: { resize?: "ns"; variant: EventCalendarEventVariant },
+  ) => ReactNode;
 }) {
   const days = filterWeekendDays(agendaDays(date, AGENDA_LENGTH), showWeekends);
 
@@ -899,24 +1001,24 @@ function AgendaList({
                 <p className="pt-2 text-xs text-muted-foreground">No events</p>
               ) : (
                 items.map((event) => (
-                  <button
-                    key={occurrenceKey(event)}
-                    type="button"
-                    data-scheduler-day={isoDay(day)}
-                    className="flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1.5 text-left hover:bg-muted/40"
-                    style={eventColorStyle(event.color, "wash")}
-                    onClick={() => onEventClick(event)}
-                  >
-                    <span className="mt-1.5 size-2 shrink-0 rounded-full" style={eventColorStyle(event.color, "dot")} />
-                    <span className="min-w-0">
-                      <span className="block truncate text-sm font-semibold text-foreground">{event.title}</span>
-                      <span className="text-[11px] text-muted-foreground">
-                        {event.allDay || isMonthBar(event)
-                          ? "All day"
-                          : `${formatTime(event.start, locale, hour12)} – ${formatTime(event.end, locale, hour12)}`}
-                      </span>
-                    </span>
-                  </button>
+                  <div key={occurrenceKey(event)} data-scheduler-day={isoDay(day)}>
+                    {renderEventTrigger(
+                      event,
+                      "flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1.5 text-left hover:bg-muted/40",
+                      <>
+                        <span className="mt-1.5 size-2 shrink-0 rounded-full" style={eventColorStyle(event.color, "dot")} />
+                        <span className="min-w-0">
+                          <span className="block truncate text-sm font-semibold text-foreground">{event.title}</span>
+                          <span className="text-[11px] text-muted-foreground">
+                            {event.allDay || isMonthBar(event)
+                              ? "All day"
+                              : `${formatTime(event.start, locale, hour12)} – ${formatTime(event.end, locale, hour12)}`}
+                          </span>
+                        </span>
+                      </>,
+                      { variant: "agenda" },
+                    )}
+                  </div>
                 ))
               )}
             </div>

package/src/composites/EventTimeline.tsx

@@ -48,6 +48,11 @@ export type EventTimelineProps = {
   onEventChange?: (event: SchedulerEvent, next: Partial<SchedulerEvent>) => void;
   onEventCreate?: (event: SchedulerEvent) => void;
   onEventDelete?: (event: SchedulerEvent) => void;
+  /**
+   * Built-in create/edit dialog. Defaults to true.
+   * Set false when the host owns create/edit.
+   */
+  showEventEditor?: boolean;
   className?: string;
 };
 
@@ -103,6 +108,7 @@ export function EventTimeline({
   onEventChange,
   onEventCreate,
   onEventDelete,
+  showEventEditor = true,
   className,
 }: EventTimelineProps) {
   const [scale, setScale] = useControllableState<TimelineScale>({
@@ -153,6 +159,7 @@ export function EventTimeline({
   function openEvent(event: NormalizedEvent) {
     const source = sourceEvent(events, event.id);
     if (source) onEventClick?.(source);
+    if (!showEventEditor) return;
     setDraft(source ? draftFromSource(source) : {
       id: event.id,
       title: event.title,
@@ -328,30 +335,32 @@ export function EventTimeline({
         onToggle={toggleResource}
       />
 
-      <EventEditor
-        open={draft != null}
-        onOpenChange={(open) => {
-          if (!open) setDraft(null);
-        }}
-        draft={draft}
-        resources={resources}
-        readOnly={editorLocked}
-        onSave={(event) => {
-          if (event.id && sourceEvent(events, event.id)) {
-            onEventChange?.(sourceEvent(events, event.id)!, event);
-          } else {
-            onEventCreate?.(event);
+      {showEventEditor ? (
+        <EventEditor
+          open={draft != null}
+          onOpenChange={(open) => {
+            if (!open) setDraft(null);
+          }}
+          draft={draft}
+          resources={resources}
+          readOnly={editorLocked}
+          onSave={(event) => {
+            if (event.id && sourceEvent(events, event.id)) {
+              onEventChange?.(sourceEvent(events, event.id)!, event);
+            } else {
+              onEventCreate?.(event);
+            }
+          }}
+          onDelete={
+            onEventDelete
+              ? (id) => {
+                  const source = sourceEvent(events, id);
+                  if (source) onEventDelete(source);
+                }
+              : undefined
           }
-        }}
-        onDelete={
-          onEventDelete
-            ? (id) => {
-                const source = sourceEvent(events, id);
-                if (source) onEventDelete(source);
-              }
-            : undefined
-        }
-      />
+        />
+      ) : null}
     </SchedulerShell>
   );
 }

package/src/composites/scheduler-ui.tsx

@@ -36,6 +36,16 @@ export const TIMELINE_SCALE_LABEL: Record<TimelineScale, string> = {
   years: "Years",
 };
 
+export type SchedulerToolbarProps = {
+  title: ReactNode;
+  onPrev: () => void;
+  onNext: () => void;
+  onToday: () => void;
+  menuLabel: string;
+  menu: ReactNode;
+  trailing?: ReactNode;
+};
+
 export function SchedulerToolbar({
   title,
   onPrev,
@@ -44,15 +54,7 @@ export function SchedulerToolbar({
   menuLabel,
   menu,
   trailing,
-}: {
-  title: string;
-  onPrev: () => void;
-  onNext: () => void;
-  onToday: () => void;
-  menuLabel: string;
-  menu: ReactNode;
-  trailing?: ReactNode;
-}) {
+}: SchedulerToolbarProps) {
   return (
     <div
       data-slot="scheduler-toolbar"

package/src/composites/scheduler.test.tsx

@@ -152,6 +152,75 @@ describe("EventCalendar", () => {
     await user.click(screen.getByRole("button", { name: "Save" }));
     expect(onEventCreate).toHaveBeenCalledWith(expect.objectContaining({ title: "Focus time" }));
   });
+
+  it("skips the built-in editor when showEventEditor is false", async () => {
+    const user = userEvent.setup();
+    const onEventClick = vi.fn();
+    const onSlotClick = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        resources={resources}
+        locale="en-US"
+        showEventEditor={false}
+        onEventClick={onEventClick}
+        onSlotClick={onSlotClick}
+      />,
+    );
+    await user.click(screen.getByText("Morning Run"));
+    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ id: "run" }));
+    expect(screen.queryByRole("heading", { name: /event/i })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "15" }));
+    expect(onSlotClick).toHaveBeenCalled();
+    expect(screen.queryByRole("heading", { name: "New event" })).not.toBeInTheDocument();
+  });
+
+  it("renders custom event chips and toolbar", async () => {
+    const user = userEvent.setup();
+    const onDateChange = vi.fn();
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        resources={resources}
+        locale="en-US"
+        showEventEditor={false}
+        showPreferences={false}
+        toolbarTrailing={<button type="button">Jump year</button>}
+        renderEvent={(event) => <span>★ {event.title}</span>}
+        renderToolbar={({ title, onToday }) => (
+          <div>
+            <p>{title}</p>
+            <button type="button" onClick={onToday}>
+              Jump today
+            </button>
+          </div>
+        )}
+        onDateChange={onDateChange}
+      />,
+    );
+    expect(screen.getByText("★ Morning Run")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Preferences" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Jump year" })).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Jump today" }));
+    expect(onDateChange).toHaveBeenCalled();
+  });
+
+  it("keeps toolbarTrailing on the default toolbar", () => {
+    render(
+      <EventCalendar
+        defaultDate={new Date(2026, 7, 15)}
+        events={events}
+        locale="en-US"
+        showPreferences={false}
+        toolbarTrailing={<button type="button">Jump year</button>}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Jump year" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /August 2026/i })).toBeInTheDocument();
+  });
 });
 
 describe("EventTimeline", () => {
@@ -191,4 +260,21 @@ describe("EventTimeline", () => {
     expect(screen.getByText("API V3 Development")).toBeInTheDocument();
     expect(screen.getByText("Mobile App UI/UX")).toBeInTheDocument();
   });
+
+  it("skips the built-in editor when showEventEditor is false", async () => {
+    const user = userEvent.setup();
+    const onEventClick = vi.fn();
+    render(
+      <EventTimeline
+        defaultDate={new Date(2026, 7, 1)}
+        events={timelineEvents}
+        resources={timelineResources}
+        showEventEditor={false}
+        onEventClick={onEventClick}
+      />,
+    );
+    await user.click(screen.getByText("API V3 Development"));
+    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ id: "api" }));
+    expect(screen.queryByRole("heading", { name: /event/i })).not.toBeInTheDocument();
+  });
 });

package/src/index.test.ts

@@ -5,7 +5,9 @@ import {
   Button,
   ChartContainer,
   ChartDataGrid,
+  EventCalendar,
   MapChart,
+  SchedulerToolbar,
   mercator,
 } from "./index";
 
@@ -17,6 +19,8 @@ describe("@spatika/react public exports", () => {
     expect(ChartDataGrid).toBeTypeOf("function");
     expect(MapChart).toBeTypeOf("function");
     expect(BarChart3D).toBeTypeOf("function");
+    expect(EventCalendar).toBeTypeOf("function");
+    expect(SchedulerToolbar).toBeTypeOf("function");
     expect(mercator([0, 0])[0]).toBeCloseTo(0.5);
   });
 });

package/src/index.ts

@@ -486,6 +486,9 @@ export {
 export {
   EventCalendar,
   type EventCalendarProps,
+  type EventCalendarEventVariant,
+  type EventCalendarEventRenderContext,
+  type EventCalendarToolbarContext,
 } from "./composites/EventCalendar";
 export {
   EventTimeline,
@@ -495,12 +498,19 @@ export {
   EventEditor,
   type EventEditorDraft,
 } from "./composites/EventEditor";
+export {
+  SchedulerToolbar,
+  SchedulerPreferencesMenu,
+  CALENDAR_VIEW_LABEL,
+  type SchedulerToolbarProps,
+} from "./composites/scheduler-ui";
 export {
   DEFAULT_SCHEDULER_PREFERENCES,
   SCHEDULER_COLOR_TONES,
 } from "./lib/scheduler";
 export type {
   CalendarView,
+  NormalizedEvent,
   SchedulerColorTone,
   SchedulerEvent,
   SchedulerPreferences,

package/src/lib/scheduler.test.ts

@@ -65,6 +65,19 @@ describe("scheduler dates", () => {
     expect(occupiesDay(birthday, new Date(2026, 7, 4))).toBe(true);
     expect(occupiesDay(birthday, new Date(2026, 7, 5))).toBe(false);
   });
+
+  it("preserves host data on normalized events", () => {
+    const [event] = normalizeEvents([
+      {
+        id: "run",
+        title: "Morning Run",
+        start: "2026-08-03T07:00:00",
+        end: "2026-08-03T07:45:00",
+        data: { kind: "CATCHUP" },
+      },
+    ]);
+    expect(event.data).toEqual({ kind: "CATCHUP" });
+  });
 });
 
 describe("scheduler layout", () => {