Data Display

EventTimeline

Horizontal time-axis strip for scheduled events with proportional dots, a now marker, and collision-nudged labels.

import { EventTimeline } from '@lostgradient/cinder/event-timeline';
event-timelinescheduletimeline
01

Overview

Horizontal time-axis strip for scheduled events with proportional dots, a now marker, and collision-nudged labels.

Usage

svelte 
<script lang="ts">
  import { EventTimeline } from '@lostgradient/cinder/event-timeline';
</script>

<EventTimeline
  label="Next 24 hours"
  start="2026-07-03T00:00:00.000Z"
  end="2026-07-04T00:00:00.000Z"
  now="2026-07-03T10:30:00.000Z"
  items={[
    { at: '2026-07-03T02:00:00.000Z', label: 'Digest', sublabel: '02:00', state: 'done' },
    { at: '2026-07-03T16:00:00.000Z', label: 'Deploy', sublabel: '16:00' },
  ]}
/>
Live preview
02

When to use

Use when
  • Showing several fired and upcoming events across a bounded time window, such as a next-24-hour schedule strip.
Avoid when
03

Examples

Event timeline

A proportional schedule strip with fired and upcoming events.

Dense cluster

Excess overlapping events collapse into a keyboard-accessible cluster.

Overlapping labels

Nearby events are nudged into separate label lanes.

04

Props

Props for event-timeline
Name Type Default Required Bindable Description
start Date | number | string req Inclusive start of the displayed time range.
end Date | number | string req Inclusive end of the displayed time range.
now Date | number | string Optional current time marker.
items EventTimelineItem[] req Events positioned proportionally between start and end.
label text Visible heading for the timeline.
ariaLabel text Accessible name override. Defaults to label or Event timeline.
size 'sm' | 'md' 'md' Timeline density. Default md.