feat: make time-grid event height floor and gap configurable

[afonsojramos]

Closes #54
Closes #55

What

Two new Calendar / TimeGrid props on both renderers replace the hard-coded MIN_EVENT_HEIGHT and EVENT_GAP constants in the native time grid:

• minEventHeight sets the floor on a timed event box's pixel height. It is also the floor of the boxHeight handed to renderEvent, which is what Override hard-coded MIN_EVENT_HEIGHT #55 needs for custom appointment renderers. Pass 0 to size every box strictly by its duration.
• eventGap sets the inset between an event box and its slot on each side. Pass 0 to let events fill the full slot, which is what Override hard-coded EVENT_GAP #54 asks for.

Defaults keep today's look on each renderer: native 32 / 2, dom 14 / 1. With both props set explicitly the two renderers produce identical geometry.

Where it applies

• minEventHeight floors every rendered event box: resting boxes, the live drag/resize height, the midnight spill preview, the multi-day move preview (native), and the cross-page drag ghost (native). Every place the old hard-coded floor lived.
• eventGap insets those same boxes and, since it shares the old constant, also the drag-to-create ghost on both renderers.
• The drag-to-create ghost's height is unchanged: it previews the swept range and keeps its existing floor (one snap step on native, a 2px sliver on dom), so it is not affected by minEventHeight.

Validation

• Unit tests on both renderers cover the default floor, lowering and raising it, the gap inset, and the Calendar pass-through. pnpm lint, pnpm format, pnpm typecheck (root and both examples), pnpm test, and pnpm build all pass; the renderer parity and docs-sync guards stay green.
• End-to-end in headless Chromium against both example apps (dom via Vite, native via Expo on react-native-web), measuring the rendered DOM for a 15-minute event and two overlapping events:

renderer	scenario	box height	boxHeight arg	side inset	gap between neighbours
dom	defaults	14	14	1	2
dom	minEventHeight={0} eventGap={0}	12	12	0	0
dom	minEventHeight={40} eventGap={6}	40	40	6	12
native	defaults	32	32	2	4
native	minEventHeight={0} eventGap={0}	12	12	0	0
native	minEventHeight={40} eventGap={6}	40	40	6	12

Docs

docs/guides/time-grid.mdx gains an "Event boxes" section, docs/reference/api.mdx lists both props, and docs/guides/events.mdx notes that boxHeight is floored by minEventHeight.

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
super-calendar	🟢 Ready	View Preview	Sep 8, 2026, 6:17 PM

💡 Tip: Enable Automations to automatically generate PRs for you.

[Copilot]

🟡 Changes recommended

The implementation does not match the PR description regarding minEventHeight affecting the drag-to-create ghost height (native + dom), so either behavior or description/tests should be aligned.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR makes timed event box sizing configurable across both renderers by introducing minEventHeight (height floor, also the boxHeight floor passed to custom renderers) and eventGap (per-side inset), replacing previously hard-coded constants and documenting the new behavior.

Changes:

• Add minEventHeight and eventGap props to native + dom Calendar and TimeGrid, with renderer-appropriate defaults.
• Thread the new sizing params through native previews/ghosts and dom layout/preview styles, replacing hard-coded floors/insets.
• Add unit tests and docs updates describing the new props and their impact on boxHeight.

File summaries

File	Description
packages/native/src/components/TimeGrid.tsx	Replaces hard-coded sizing constants with configurable props and threads eventGap/minEventHeight through TimeGrid internals.
packages/native/src/components/MultiDayMovePreview.tsx	Uses passed minEventHeight/eventGap for multi-day move preview sizing/inset.
packages/native/src/components/Calendar.tsx	Exposes new props on Calendar and forwards them into the native TimeGrid.
packages/native/src/components/tests/TimeGrid.test.tsx	Adds native tests for default sizing, overrides, and Calendar forwarding.
packages/dom/src/TimeGrid.tsx	Adds new props with defaults and applies them to event box geometry + previews.
packages/dom/src/Calendar.tsx	Exposes new props on dom Calendar and forwards them into dom TimeGrid.
packages/dom/src/tests/TimeGrid.test.tsx	Adds dom tests for default sizing, overrides, and inset behavior.
packages/dom/src/tests/Calendar.test.tsx	Adds dom Calendar forwarding test for the new sizing props.
docs/reference/api.mdx	Documents the new props in the native API reference.
docs/guides/time-grid.mdx	Adds an “Event boxes” section documenting minEventHeight and eventGap.
docs/guides/events.mdx	Notes that boxHeight is floored by minEventHeight and references eventGap.

Review details

• Files reviewed: 11/11 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.