components / timeline

timeline.

day schedule — a 24h vertical axis with positioned event blocks and an optional live now-line. blocks placed by minutes-of-day. generalized from the justin06lee.dev day view.

00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
deep work
standup
reading
sleep
installation
bunx @justin06lee/chrome@latest add timeline
usage
Day schedule
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
deep work
reading
<Timeline
  showNow
  events={[
    { startMin: 480, endMin: 570, label: "deep work", color: "#6ee7b7" },
    { startMin: 780, endMin: 870, label: "reading", color: "#c4b5fd" },
  ]}
/>