Examples

Below are links to Codesandbox instances for examples of how to use this repo. Feel free to fork these sandboxes and play around with this library's features. If you have any examples of cool uses of this library, submit a PR to add one!

Basic Usage

Basic functionality of the timeline, included panning, zooming and rendering of items

Example Codesandbox

Item Moving and Resizing

Moving and Resizing examples. Clicking and dragging can move items into different groups. Notice the handleItemMove and handleItemResize handlers passed to the Timeline.

Example Codesandbox

Custom Item Rendering

The itemRenderer component allows you to customize what contents are shown in the item on the calendar.

Example Codesandbox

Restricting Item Moving and Resizing

You can restrict the moving and resizing of items at the item level by providing a canMove and canResize property with an item.

Example Codesandbox

Right Sidebar

Adding a right sidebar is as easy as passing in a couple of props rightSidebarWidth and rightSidebarContent. Content in the right column is populated from the rightTitle property on the group.

Example Codesandbox

Linked Timelines

By managing the the visibleStartTime and visibleEndTime for multiple timelines, you can syncronize scroll across multiple timelines.

Example Codesandbox

Tree Groups

Through group manipulation, you can achieve tree group views.

Example Codesandbox

Note that this is the user code manipulating groups to achieve tree group functionality. This example is an illustration of how you can achieve this functionality. This is not a feature that is directly supported by the library.

Programmatically Scrolling

Using scrollRef you can trigger scrolling and create an animation. This is an alternative to setting visibleStartTime and visibleEndTime.

Example Codesandbox