Event Calendar

When to use

Reach for EventCalendar when you already hold the canonical TaskItem[] (the data behind task-card, task-tree, kanban-board, and gantt-timeline) and want a date-grid surface — month, week, day, or agenda — with no adapter. It is the read-only display sibling of the gantt; editing lands in v0.2.

Basic example

import { EventCalendar } from "@/components/event-calendar"

export function Example({ tasks }) {
  return (
    <EventCalendar
      data={tasks}                 // TaskItem[]
      statusOptions={statusOptions}
      defaultView="month"          // "month" | "week" | "day" | "agenda"
      now={serverNow}              // SSR-stable "now"
      showMiniNav
      onTaskClick={(item) => openDetail(item)}
      onRangeChange={({ start, end }) => fetchWindow(start, end)}
    />
  )
}

Editing (opt-in feature)

Editing (drag/resize/create, clipboard, keyboard mutations, permission-gated actions) ships as a separate feature slice — installing the base package alone keeps it out of your bundle entirely. Install @ilinxa/event-calendar-editing, import calendarEditing, and pass it alongside editable.

import { EventCalendar } from "@/components/event-calendar"
import { calendarEditing } from "@/components/event-calendar/features/editing"

<EventCalendar
  editable
  editing={calendarEditing}   // wires drag/resize/create/clipboard/keyboard
  data={tasks}
  onChange={setTasks}         // controlled — echo the mutated forest back
  statusOptions={statusOptions}
  permissions={permissions}   // optional — the shared TaskPermissions matrix
/>

editable without editing wired stays fully read-only (byte-identical to a base-only install) — the calendar logs one console.warn in development and never throws.

Lighter (hand-assembled subset)

import {
  EventCalendarRoot, CalendarToolbar, CalendarMonthView,
} from "@/components/event-calendar"

// month-only — the week/day time-grid code never enters your bundle
<EventCalendarRoot data={tasks} statusOptions={statusOptions} views={["month"]}>
  <CalendarToolbar />
  <CalendarMonthView />
</EventCalendarRoot>

All-day vs timed

• A classifyEvent(item) predicate wins when it returns a kind.
• Otherwise a date-only string ("2026-06-22", no T) is an all-day event (parsed floating-local — no timezone off-by-one); a full timestamp is timed.
• With no end and a full timestamp, the item is a milestone (a marker / dot).

Notes

• Fully controlled — no internal data state. Pass now for an SSR-stable first paint.
• Keyboard: M/W/D/A switch views, ←/→ + PageUp/PageDown step the period, T jumps to today.
• The default hover tooltip is a native title; pass renderTooltip (e.g. CalendarFullCardTooltip) for a rich card.