Timeline
Open in

Timeline Demo

"Gantt-chart" style timeline component with drag-and-drop. Try dragging slots between different rows and watch for conflict validation. Press ESC to cancel a drag operation.

Zoom level

Meeting
Workshop
Break
Review
Rooms
9:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00

Conference Room A

12

Team Standup
09:308
Product Review
11:006

Conference Room B

8

Design Workshop
10:005
Client Meeting
14:004

Meeting Room 1

6

Quick Sync
09:003
Coffee Break
13:0010

Meeting Room 2

4

Code Review
10:304
1-on-1
15:002

Training Room

20

React Workshop
09:0015
Security Training
14:3018
Now: 16:07

Features

  • Gantt-chart style timeline with drag-and-drop functionality
  • Built on @dnd-kit/core for smooth, accessible drag interactions
  • Configurable time range (start/end hours) and grid intervals
  • Snap-to-interval positioning for precise time alignment
  • Real-time conflict validation during drag operations
  • Visual drop indicators and ghost previews
  • Mouse time indicator for precise positioning
  • Current time marker with auto-update
  • Customizable zoom/scale with percentageInView prop
  • Row-based organization with custom header rendering
  • Quarter-hour and hour grid lines for visual guidance
  • Keyboard navigation (ESC to cancel drag)
  • Composable slot content with label and custom content components
  • Fully typed with TypeScript

Component Props

TimelineProvider

  • config - TimelineConfig (required) - Timeline configuration object
  • percentageInView - number - Zoom level (default: 100)
  • onSlotPositionChange - (slotId: string, newTime: string, newRowId: string) => Promise<boolean> - Callback when slot position changes
  • onValidateDrop - (slotId: string, newTime: string, newRowId: string) => boolean - Validation callback for drop operations
  • onSlotClick - (slotId: string) => void - Click handler for slots
  • className - string
  • children - React.ReactNode

Timeline

  • slots - TimelineSlotData[] (required) - Array of slot data
  • rows - TimelineRowData[] (required) - Array of row data
  • className - string
  • children - React.ReactNode

TimelineGrid

  • className - string
  • children - React.ReactNode - TimelineHeader, TimelineRow, and TimelineCurrentTime components

TimelineHeader

  • columnLabel - React.ReactNode - Label for the left column (default: "Row")
  • className - string

TimelineRow

  • row - TimelineRowData (required) - Row data object
  • slots - TimelineSlotData[] (required) - Array of slots for this row
  • children - (slot: TimelineSlotData) => React.ReactNode (required) - Render function for slots
  • renderRowHeader - (row: TimelineRowData) => React.ReactNode - Custom row header renderer
  • className - string

TimelineSlot

  • slot - TimelineSlotData (required) - Slot data object
  • className - string
  • children - React.ReactNode - Slot content (use TimelineSlotLabel and TimelineSlotContent)

TimelineSlotLabel

  • className - string
  • children - React.ReactNode

TimelineSlotContent

  • className - string
  • children - React.ReactNode

TimelineCurrentTime

  • nowLabel - string - Label for current time indicator (default: "Now")
  • className - string

Type Definitions

TimelineConfig

  • startHour - number - Start hour (e.g., 9 for 9:00 AM)
  • endHour - number - End hour (e.g., 18 for 6:00 PM)
  • snapIntervalMinutes - number - Snap interval in minutes (default: 15)
  • columnWidth - number - Width of left column in pixels (default: 112)

TimelineSlotData

  • id - string - Unique slot identifier
  • rowId - string - Parent row identifier
  • startTime - string - Start time in "HH:MM" format (e.g., "14:30")
  • duration - number - Duration in minutes
  • Additional custom properties can be added as needed

TimelineRowData

  • id - string - Unique row identifier
  • label - string - Row label/name
  • Additional custom properties can be added as needed

Helper Functions

timeToMinutes(time: string): number

Converts time string (e.g., "14:30") to total minutes from midnight.

minutesToTime(minutes: number): string

Converts total minutes from midnight to time string in "HH:MM" format.