TIMELINE

Create a Timeline View From Your Roam Graph!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-timeline");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/timeline.js";
  extension.id = "roamjs-timeline";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Usage

Enter {{timeline}} in any block to render the timeline view. By default, no events will be added.

Click the settings wrench to toggle on and off the Timeline configuration. Enter the tag that you would like to visualize across daily note pages. Blocks that reference both the tag and a daily note page will also be included. Click the refresh button once you're done configuring the timeline to get a refreshed view.

The timeline configuration will create blocks as children to the timeline component. You could edit the configuration by also editing these child blocks directly, hitting refresh once you're done.

Customization

By default, all the elements render using the #2196f3 color. To define your own list of colors for the timeline to cycle through, add a child block called colors with each color on its own block.

The blocks themselves could also be customized through using roam/css.

  • .vertical-timeline-element is the container for each entry
  • .vertical-timeline-element-content is the container for each card
  • .vertical-timeline-element-title is the title within the content
  • .vertical-timeline-element-subtitle is the subtitle within the content
  • .vertical-timeline-element-body is the rest of the content body

Layout

By default, the timeline runs down the middle and elements alternate alignment left and right. To change the layout of the timeline, add a child block called layout. As a child of that block, you can set one of three values:

  • alt - (default) Elements alternate left and right of the timeline
  • left - The Timeline is aligned to the left, with the elements on the right
  • right - The Timeline is aligned to the right, with the elements on the left

Reverse

By default, all the elements in the timeline render from latest to earliest. To reverse this setting so that the order is from earliest to latest, add a child block to the timeline with the text reverse. This setting could also be toggled on and off from the timeline configuration.

Creation Date

By default, all the blocks queried use the associated daily note page for ordering. To use the blocks' creation date instead for ordering, add a child block to the timeline with the text Creation Date. This setting could also be toggled on and off from the timeline configuration.

Clean

By default, all the blocks queried keep the query tag in its block text. To filter out both the tag and the daily note tag from the block text, add a child block to the timeline with the text Clean. This setting could also be toggled on and off from the timeline configuration.

Depth

By default, all timeline elements included will include the full tree under the block. To edit the depth of the timeline elements in your graph, head to the roam/js/timeline page and edit the depth field. A value of -1 include the full tree, a value of 0 includes just the targeted node, a value of 1 includes just the targeted node and its children, etc.

Demo


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

Sharon Dale
Sharon Dale
💵📓
Jerry Yu
Jerry Yu
💵

Other Extensions