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 functionality of the timeline, included panning, zooming and rendering of items
Moving and Resizing examples. Clicking and dragging can move items into different groups. Notice the handleItemMove and handleItemResize handlers passed to the Timeline.
The itemRenderer component allows you to customize what contents are shown in the item on the calendar.
You can restrict the moving and resizing of items at the item level by providing a canMove and canResize property with an item.
Adding a right sidebar is as easy as passing rightSidebarWidth. Content in the right column is populated from the rightTitle property on the group.
Note: If you are using Custom Headers then you need to add them with SidebarHeader with variant "right"
By managing the the visibleStartTime and visibleEndTime for multiple timelines, you can syncronize scroll across multiple timelines.
Through group manipulation, you can achieve tree group views.
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.
Controlled visible port of the calendar using visibleTimeStart and visibleTimeEnd. This also limits scrolling by mouse and adds two buttons to change the visible port of the calendar
Using controlled scroll and react-spring to trigger scrolling and create an animation.
Using Timeline Header you can make the header stick to the top of the page while scrolling down
Native info label was removed with 0.26.0 and now the responsibility to render to render the Info Label is on the user. The example bellow has InfoLabel that matches exactly the removed label