React-Continuum

A React component to help with displaying overlaying events and tasks.

Timeline Props

Prop	Type	Description	Default
data	TimelineData[]	The data to display in the timeline	Required
height	Number	The height of the timeline in pixels	Required
viewStart	Moment or DateTimeString	The initial view start	Required
viewEnd	Moment or DateTimeString	The initial view end	Required
targetDivisions	Number	The number of divisions when rendering guidelines	10
renderDatum	(datum: ExtendedTimelineData) => ReactNode	Render function to use instead of the built in render, this will override all base styles other than positioning of the element	None

TimelineData

Key	ValueType	Description
start	Moment	The start moment of this datum
end	Moment	The end moment of this datum
label	String	The label associated with this datum

Example

let data = [
    {
        start: Moment().subtract(2, 'days'),
        end: Moment(),
        label: 'Task 1',
    },
    {
        start: Moment().subtract(1, 'days'),
        end: Moment().add(1, 'days'),
        label: 'Task 2',
    },
    {
        start: Moment(),
        end: Moment().add(2, 'days'),
        label: 'Task 3',
    },
];

let viewStart = Moment().subtract(4, 'days');
let viewEnd = Moment().add(4, 'days');

return (
    <Timeline
        height={600}
        data={data}
        viewStart={viewStart}
        viewEnd={viewEnd}
    />
);

Screenshot