react-timesheet
Version:
Time Sheet Component for React
123 lines (114 loc) • 3.79 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="codemirror.css">
<link rel="stylesheet" href="timesheet.css">
<link rel="stylesheet" href="timesheet-white.css">
<script type="text" id="code1">
var TimeSheet = require('react-timesheet');
var Example = 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 min={2002} max={2013} data={this.data}/>
);
}
});
return <Example/>
</script>
<script type="text" id="code2">
var TimeSheet = require('react-timesheet');
var Example = 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 min={2002} max={2013} theme={"white"} data={this.data}/>
);
}
});
return <Example/>
</script>
<style>
body {
width: 1024px;
margin:0 auto
}
.example {
margin-bottom: 20px;
}
.playground:after {
content: "";
display: table;
clear: both;
}
.playground-tab {
border-bottom: none ;
border-radius: 3px 3px 0 0;
padding: 6px 8px;
font-size: 12px;
font-weight: bold;
color: #C2C0BC;
background-color: #F1EDE4;
display: inline-block;
cursor: pointer;
}
.playgroundCode, .playground-tab, .playgroundPreview {
border: 1px solid rgba(16, 16, 16, 0.1);
}
.playgroundCode {
border-radius: 0 3px 3px 3px;
display: inline-block;
overflow: hidden;
margin: 10px;
width: 600px;
}
.playgroundPreview {
margin: 10px;
background-color: #FFF;
border-radius: 3px;
display: inline-block;
padding: 15px 20px;
}
</style>
</head>
<body>
<h1>Live Demo</h1>
<h2>Default Theme Time Sheet</h2>
<div class="example" id="example1"></div>
<h2>White Theme Time Sheet</h2>
<div class="example" id="example2"></div>
<script src="codemirror.js"></script>
<!--<script src="foldcode.js"></script>-->
<script src="javascript.js"></script>
<script src="JSXTransformer.js"></script>
<script src="common.js"></script>
<script src="bundle.js"></script>
<script src="app.js"></script>
</body>
</html>