React-continuum NPM

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}
    />
);