Live Demo

Default Theme Time Sheet

​x
 
1
var TimeSheet = require('react-timesheet');
2
var Example = React.createClass({
3
    data: [
4
        ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
5
        ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
6
        ['2003', 'Had very bad luck'],
7
        ['10/2003', '2006', 'At least had fun', 'dolor'],
8
        ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
9
        ['07/2005', '09/2005', 'Bad luck again', 'default'],
10
        ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
11
        ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
12
        ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
13
        ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
14
        ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
15
    ],
16
    render: function() {
17
​
18
        return (
19
            <TimeSheet min={2002} max={2013} data={this.data}/>
20
        );
21
    }
22
​
23
});
24
return <Example/>
25
  
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
  • 2002-09/2002A freaking awesome time
  • 06/2002-09/2003Some great memories
  • 2003Had very bad luck
  • 10/2003-2006At least had fun
  • 02/2005-05/2006Enjoyed those times as well
  • 07/2005-09/2005Bad luck again
  • 10/2005-2008For a long time nothing happened
  • 01/2008-05/2009LOST Season #4
  • 01/2009-05/2009LOST Season #4
  • 02/2010-05/2010LOST Season #5
  • 09/2008-06/2010FRINGE #1 & #2

White Theme Time Sheet

xxxxxxxxxx
25
 
1
var TimeSheet = require('react-timesheet');
2
var Example = React.createClass({
3
    data: [
4
        ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
5
        ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
6
        ['2003', 'Had very bad luck'],
7
        ['10/2003', '2006', 'At least had fun', 'dolor'],
8
        ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
9
        ['07/2005', '09/2005', 'Bad luck again', 'default'],
10
        ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
11
        ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
12
        ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
13
        ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
14
        ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
15
    ],
16
    render: function() {
17
​
18
        return (
19
            <TimeSheet min={2002} max={2013} theme={"white"} data={this.data}/>
20
        );
21
    }
22
​
23
});
24
return <Example/>
25
  
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
  • 2002-09/2002A freaking awesome time
  • 06/2002-09/2003Some great memories
  • 2003Had very bad luck
  • 10/2003-2006At least had fun
  • 02/2005-05/2006Enjoyed those times as well
  • 07/2005-09/2005Bad luck again
  • 10/2005-2008For a long time nothing happened
  • 01/2008-05/2009LOST Season #4
  • 01/2009-05/2009LOST Season #4
  • 02/2010-05/2010LOST Season #5
  • 09/2008-06/2010FRINGE #1 & #2