<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery TimeSheet Plugin Demo</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
body{
font-size:12px;
color:#777777;
}
label{
width:80px;
display:inline-block;
}
</style>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Table-Based-jQuery-Calendar-Schedule-Plugin-TimeSheet/css/TimeSheet.css" type="text/css" media="screen">
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/time-clock/Table-Based-jQuery-Calendar-Schedule-Plugin-TimeSheet.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul><h1><a href="https://plnkr.co/plunk/FUeFIbTJsgSjAwEl" target="thebest">latest the best version is here</a></h1>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin:150px auto 30px auto;">jQuery TimeSheet Plugin Demo</h1>
<div style="padding:15px 0 10px;">
<button class="J_sheetControl" id="J_timingDisable">Disable</button>
<button class="J_sheetControl" id="J_timingEnable">Enable</button>
<button class="J_sheetControl" id="J_timingClean">Clean</button>
<button class="J_sheetControl" id="J_timingSubmit">Submit</button>
<button class="J_sheetControl" id="J_timingIsFull">IsFull</button>
<div style="padding:15px 0 5px;">
<input type="text" placeholder="0,0" id="J_cellIndex" value="0,0"/> <button class="J_sheetControl" id="J_timingGetCell">GetCell</button>
</div>
<div style="padding:10px 0;">
<input type="number" placeholder="0" id="J_rowIndex" value="0"/> <button class="J_sheetControl" id="J_timingGetRow">GetRow</button>
</div>
</div>
<div id="J_calenderWrapper">
<table>
<thead></thead>
<tbody id="J_timedSheet">
</tbody>
</table>
</div>
<p id="J_dataDisplay" style="color:#aaaaaa;font-family: 'Arial';">
</p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/Table-Based-jQuery-Calendar-Schedule-Plugin-TimeSheet/js/TimeSheet.js"></script>
<script type="text/javascript">
var dimensions = [12,24];
var dayList = [
{name:"2015-09-01"},{name:"2015-09-02"},{name:"2015-09-03"},{name:"2015-09-04"},{name:"2015-09-05"},
{name:"2015-09-06"},{name:"2015-09-07"},{name:"2015-09-08"},{name:"2015-09-09"},{name:"2015-09-10"},
{name:"2015-09-11"},{name:"2015-09-12"}
];
var hourList = [
{name:"00",title:"00:00-01:00"},{name:"01",title:"01:00-02:00"},{name:"02",title:"02:00-03:00"},{name:"03",title:"03:00-04:00"},
{name:"04",title:"04:00-05:00"},{name:"05",title:"05:00-06:00"},{name:"06",title:"06:00-07:00"},{name:"07",title:"07:00-08:00"},
{name:"08",title:"08:00-09:00"},{name:"09",title:"09:00-10:00"},{name:"10",title:"10:00-11:00"},{name:"11",title:"11:00-12:00"},
{name:"12",title:"12:00-13:00"},{name:"13",title:"13:00-14:00"},{name:"14",title:"14:00-15:00"},{name:"15",title:"15:00-16:00"},
{name:"16",title:"16:00-17:00"},{name:"17",title:"17:00-18:00"},{name:"18",title:"18:00-19:00"},{name:"19",title:"19:00-20:00"},
{name:"20",title:"20:00-21:00"},{name:"21",title:"21:00-22:00"},{name:"22",title:"22:00-23:00"},{name:"23",title:"23:00-00:00"}
];
var sheetData = [
[1,1,1,0,1,0,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,1,0,0,1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,1,0,0,1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,1,0,1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,0,0,0,0],
[1,0,0,0,1,0,1,0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0],
[1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,0,1,0,0,0,0,0,0],
[0,0,1,0,1,0,1,0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0],
[1,1,1,0,1,0,1,0,1,1,1,0,1,1,1,0,0,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1]
];
var updateRemark = function(sheet){
var sheetStates = sheet.getSheetStates();
var rowsCount = dimensions[0];
var colsCount = dimensions[1];
var rowRemark = [];
var rowRemarkLen = 0;
var remarkHTML = '';
for(var row= 0, rowStates=[]; row<rowsCount; ++row){
rowRemark = [];
rowStates = sheetStates[row];
for(var col=0; col<colsCount; ++col){
if(rowStates[col]===0 && rowStates[col-1]===1){
rowRemark[rowRemarkLen-1] += (col<=10?'0':'')+col+':00';
}else if(rowStates[col]===1 && (rowStates[col-1]===0 || rowStates[col-1]===undefined)){
rowRemarkLen = rowRemark.push((col<=10?'0':'')+col+':00-');
}
if(rowStates[col]===1 && col===colsCount-1){
rowRemark[rowRemarkLen-1] += '00:00';
}
}
remarkHTML = rowRemark.join("，");
sheet.setRemark(row,remarkHTML==='' ? sheet.getDefaultRemark() : remarkHTML);
}
};
$(document).ready(function(){
var sheet = $("#J_timedSheet").TimeSheet({
data: {
dimensions : dimensions,
colHead : hourList,
rowHead : dayList,
sheetHead : {name:"Date\\Time"},
sheetData : sheetData
},
remarks : {
title : "Description",
default : "N/A"
},
end : function(ev,selectedArea){
updateRemark(sheet);
}
});
updateRemark(sheet);
$("#J_timingDisable").click(function(ev){
sheet.disable();
});
$("#J_timingEnable").click(function(ev){
sheet.enable();
});
$("#J_timingClean").click(function(ev){
sheet.clean();
});
$("#J_timingSubmit").click(function(ev){
var sheetStates = sheet.getSheetStates();
var rowsCount = dimensions[0];
var $submitDataDisplay = $("#J_dataDisplay") ;
$submitDataDisplay.html("<b>Raw Data Submitted:</b><br/>[<br/>");
for(var row= 0, rowStates=[]; row<rowsCount; ++row){
rowStates = sheetStates[row];
$submitDataDisplay.append(' [ '+rowStates+' ]'+(row==rowsCount-1?'':',')+'<br/>');
}
$submitDataDisplay.append(']');
});
$("#J_timingIsFull").click(function(ev){
alert(sheet.isFull());
});
$("#J_timingGetCell").click(function(ev){
var cellIndex = $("#J_cellIndex").val().split(',');
var cellData = sheet.getCellState(cellIndex);
var $dataDisplay = $("#J_dataDisplay") ;
$dataDisplay.html("<b>Cell Data At ["+cellIndex+"] : </b>"+cellData);
});
$("#J_timingGetRow").click(function(ev){
var rowIndex = $("#J_rowIndex").val();
var rowData = sheet.getRowStates(rowIndex);
var $dataDisplay = $("#J_dataDisplay") ;
$dataDisplay.html("<b>Row Data At "+rowIndex+" : </b>[ "+rowData+" ]");
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
/* Add your styles here */
// Add your code here