React Calendar Timeline

*This is fork of react-calendar-timeline

Checkout the examples here!

FAQ

How can I have items with different colors?

Items have a "className" parameter. For example if you have "standard" items and "analysis" items, then you can just add an "analysis" class for your analysis items and then change the css backgroundColor property for them.

You will then need to override the default CSS rule:

.react-calendar-timeline .rct-items .rct-item.analysis {
  backgroundColor: #68efad;
}

How can I add one more sidebar on the right?

The library supports right sidebar.

To use it, you need to add two props to the <Timeline /> component:

rightSidebarWidth={150}
rightSidebarContent={<p>Second filter</p>}

And add right_sidebar prop to the groups objects:

{
  id: 1,
  title: 'group 1',
  right_sidebar: 'additional info about group 1'
}

I'm using Babel with Rollup or Webpack 2+ and I'm getting strange bugs with click events

These module bundlers don't use the transpiled (ES5) code of this module. They load the original ES2015+ source. Thus your babel configuration needs to match ours. We recommend adding the stage-0 preset to your .babelrc to make sure everything works as intended.

If that's too experimental, then the minimum you need is to add is the transform-class-properties plugin that's in stage-2 and possibly the transform-object-rest-spread plugin from stage-3. However in this case it's easier to make sure you have at least stage-2 enabled.

See issue 51 for more details.

Alternatively you may import the transpiled version of the timeline like this:

// import Timeline from 'react-calendar-timeline'  // ESnext version
import Timeline from 'react-calendar-timeline/lib' // ES5 version

However doing so you lose on some of the features of webpack 2 and will potentially get a slightly larger bundle.

It doesn't work with create-react-app

It's the same issue as above. See issue 134 for details and options.

What are the zIndex values for all the elements?

This is useful when using the plugins (that you pass as children to the component). Override the CSS to change:

• Horizontal Lines: 30
• Vertical Lines: 40
• Today line: 50
• Cursor line: 51
• Items: 80-88 (depending on selection, dragging, etc)
• Header: 90

Behind the scenes

The timeline is built with speed, usability and extensibility in mind.

Speed: The calendar itself is actually a 3x wide scrolling canvas of the screen. All scroll events left and right happen naturally, like scrolling any website. When the timeline has scrolled enough (50% of the invisible surface on one side), we change the "position:absolute;left:{num}px;" variables of each of the visible items and scroll the canvas back. When this happens, the onBoundsChange prop is called.

This results in a visually endless scrolling canvas with optimal performance.

Extensibility and usability: While some parameters (onTimeChange, moveResizeValidator) might be hard to configure, these are design decisions to make it as extensible as possible. If you have recipes for common tasks regarding those parameters, send a PR to add them to this doc.

Interaction

To interact and navigate within the timeline there are the following options for the user:

shift + mousewheel = move timeline left/right
alt + mousewheel = zoom in/out
ctrl + mousewheel = zoom in/out 10× faster
meta + mousewheel = zoom in/out 3x faster (win or cmd + mousewheel)

Plus there is a handling for pinch-in and pinch-out zoom gestures (two touch points). The pinch gesture on a trackpad (not a touch device) works in Chrome and Firefox (v55+) because these browsers map the gesture to ctrl + mousewheel.

Contribute

If you like to improve React Calendar Timeline fork the repo and get started by running the following:

$ git clone https://github.com/namespace-ee/react-calendar-timeline.git react-calendar-timeline
$ cd react-calendar-timeline
$ npm install
$ npm start

Check http://0.0.0.0:8080/ in your browser and have fun!

Please run npm run lint before you send a pull request. npm run jest runs the tests.