Skip to content
Get Pro
Calendars

Timeline Bars

Events on a week track where a bar's width is its duration, one lane per kind.

$149 once · every Pro piece

Customize

A now line cuts the track in the accent: everything before it is solid, everything after it is hatched as planned, and the one event in progress burns in the accent up to now. Hover a bar for a pill that reads "2h 14m Review · Wed 11:45–13:59" while the rest step back and a time pill follows the pointer; switch between week and day, or click a day, and the view tweens in with hour ticks and labels inside the bars. Lanes isolate and hide from the legend; ←/→ walk the events from the keyboard.

Install

npx shadcn@latest add @obsyde/timeline-bars

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { TimelineBars } from '@/components/obsyde/ember/timeline-bars/TimelineBars';

export function Example() {
  return (
    <TimelineBars />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/timeline-bars/TimelineBars.tsxcomponent
  • ember/timeline-bars/timeline-bars.cssstyles
  • ember/timeline-bars/TimelineBarsDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
zoomZoom'week' | 'day''week'
lanesLanesnumber4
nowNow linebooleantrue
crosshairCrosshair'none' | 'solid' | 'dashed''none'
legendLegend'row' | 'none''row'
patternPattern'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none''diagonal-up'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber6