Package Exports

react-timesheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-timesheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Time Sheet

Time Sheet Component for React. Modified from timesheet.js

Demo & Examples

Live demo: yuanyan.github.io/react-timesheet

To build the examples locally, run:

npm install
gulp dev

Then open localhost:9999 in a browser.

Installation

The easiest way to use react-timesheet is to install it from NPM and include it in your own React build process (using Browserify, etc).

You can also use the standalone build by including dist/react-timesheet.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-timesheet --save

Usage

var React = require('react');
var TimeSheet = require('react-timesheet');
var Example1 = React.createClass({
    data: [
        ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
        ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
        ['2003', 'Had very bad luck'],
        ['10/2003', '2006', 'At least had fun', 'dolor'],
        ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
        ['07/2005', '09/2005', 'Bad luck again', 'default'],
        ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
        ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
        ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
        ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
        ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
    ],
    render: function() {
        return (
            <TimeSheet data={this.data}/>
        );
    }
});

Properties

data: Your configure data.
min: Min year value.
max: Max year data.
theme: Custom theme name.