Timeline View

Usage

• Use the timeline layout to plan work over time and see overlaps between rows.
• Give rows a date so they render as bars; rows without one are left out of the timeline.
• Don’t use a timeline for single-day events in a month view; use the calendar layout instead.
• Don’t rely on dragging bars as the only way to change dates; it is pointer-only.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { DatabaseView, SAMPLE_TODAY, createTasksSample } from '@krackedui/motion';

export function TimelineViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-timeline" today={SAMPLE_TODAY} />
  );
}

Examples

Bare timeline

The timeline is width px wide; outside DatabaseView, put it in a horizontal scroll container.

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

<TimelineView width={…}>
  CalendarToolbar leading={» Open table} extra={Month ▾}
  day header (40px days, today pill)
  body → weekend bands · today line · bar × n (34px) · edge arrow chips
</TimelineView>

API Reference

TimelineView

Accessibility

• Bars are role="button" and open the page; edge chips are labelled "Scroll to <title>".
• Dragging a bar is pointer-only.