Timesheet for web page

Does anyone know if there is a javascript or flash/flex web component that I can use for simple selection of hours within a number of days. My browsing has so far not resulted in anything I like. There are plenty of date/time pickers but these don't quite suit my needs.

The attached picture shows a grid arranged as hours within a day for a number of days. Want I'd like is to be able to easily select cells either by clicking them or by holding down the mouse and selecting a block of cells.

Any ideas?
timesheet.JPG
PetroclusAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Frederick McIntyreProgrammerCommented:
You didn't say what you want to happen other than the cell for the date/hour turning green. Here is a sample page, with only a few dates and hours, with a script that turns the date/hour green and builds a named, nested array of which hours on which dates have been selected. Selected by clicking the hour. Deselect by clicking again.

You may prefer to use div rather than a table. This does not go so far as dragging across a block of cells to select them.

The javascript includes a funciton to loop through the selections just to demonstrate how you can access the list of selected hours/dates. You could send the selected hours to a script via AJAX, or do whatever you want with them.

You can see the script in action at http://achieversintlinc.com/hourpicker.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Hour Picker</title>
	<style type="text/css">
		.hour {
			background-color:#81837E;
			cursor:pointer;
		}
		.hourSel {
			background-color:#04FF00;
			cursor:pointer;
		}
		</style>
	<script type="text/javascript">
	<!--
		var hourDate = {};
		function hourSelect(date,hour) {
			if (typeof hourDate[date] == 'undefined') {
				hourDate[date] = {};
			}
			if (document.getElementById('h'+date+'-'+hour).className == 'hour') {
				document.getElementById('h'+date+'-'+hour).className = 'hourSel';
				hourDate[date][hour] = 1;
			} else {
				document.getElementById('h'+date+'-'+hour).className = 'hour';
				hourDate[date][hour] = 0;
			}
		}
		function showSelections() {
			for (var dt in hourDate) {
				for (var hr in hourDate[dt]) {
					if (hourDate[dt][hr] == 1) {
						alert('The hour '+hr+' on '+dt+' is selected.');
					}
				}
			}
		}
	//-->
	</script>

 </head>

 <body>
  <table cellpadding="3" cellspacing="5" border="0">
		<tr>
			<td>1/1/2000</td>
			<td id="h1-1-2000-0" class="hour" onclick="hourSelect('1-1-2000',0); return false;">0</td>
			<td id="h1-1-2000-1" class="hour" onclick="hourSelect('1-1-2000',1); return false;">1</td>
			<td id="h1-1-2000-2" class="hour" onclick="hourSelect('1-1-2000',2); return false;">2</td>
			<td id="h1-1-2000-3" class="hour" onclick="hourSelect('1-1-2000',3); return false;">3</td>
		</tr>
		<tr>
			<td>2/1/2000</td>
			<td id="h2-1-2000-0" class="hour" onclick="hourSelect('2-1-2000',0); return false;">0</td>
			<td id="h2-1-2000-1" class="hour" onclick="hourSelect('2-1-2000',1); return false;">1</td>
			<td id="h2-1-2000-2" class="hour" onclick="hourSelect('2-1-2000',2); return false;">2</td>
			<td id="h2-1-2000-3" class="hour" onclick="hourSelect('2-1-2000',3); return false;">3</td>
		</tr>
		<tr>
			<td>3/1/2000</td>
			<td id="h3-1-2000-0" class="hour" onclick="hourSelect('3-1-2000',0); return false;">0</td>
			<td id="h3-1-2000-1" class="hour" onclick="hourSelect('3-1-2000',1); return false;">1</td>
			<td id="h3-1-2000-2" class="hour" onclick="hourSelect('3-1-2000',2); return false;">2</td>
			<td id="h3-1-2000-3" class="hour" onclick="hourSelect('3-1-2000',3); return false;">3</td>
		</tr>
  </table>
	<a href="javascript:showSelections();">Show Selections</a>
 </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PetroclusAuthor Commented:
fredmc's suggestion is excellent and and I may be able to run with it. However, to make the control completely friendly to the user, I did want something that had a drag-select function (my fault for not emphasising this). My javascript skill is basic and I don't know if this can be done or how to do it.
0
PetroclusAuthor Commented:
No other solutions offered but this one got me part way.
0
Frederick McIntyreProgrammerCommented:
Petroclus, I would have replied sooner but I got infected with a bacteria and have been flat on my back in the hospital for the last 1 1/2 weeks.

Just dragging over the hour cells will cause stuff to be highlighted that you don't want. Just like dragging over text on a web page to select it.

Here is a version that will allow you to select hours by moving the mouse over them. Click on the first hour you want selected ,then just move the mouse - without any button being helod dow - over all the others you want selected. Then click again on the last one. Note that mousing over an hour toggles its selected state. So, if you want to drag over hours that are separated by hours you do not want to change, you must click to stop the "select" state, then click again on the next on you want selected.

You can see this one at http://achieversintlinc.com/hourdragger.html. Hope it helps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Hour Picker</title>
	<style type="text/css">
		.hour {
			background-color:#81837E;
			cursor:pointer;
		}
		.hourSel {
			background-color:#04FF00;
			cursor:pointer;
		}
		</style>
	<script type="text/javascript">
	<!--
		var hourDate = {};
		var mousedown = false;
		function hourSelect(date,hour) {
			if (typeof hourDate[date] == 'undefined') {
				hourDate[date] = {};
			}
			if (document.getElementById('h'+date+'-'+hour).className == 'hour' && mousedown) {
				document.getElementById('h'+date+'-'+hour).className = 'hourSel';
				hourDate[date][hour] = 1;
			} else if (mousedown) {
				document.getElementById('h'+date+'-'+hour).className = 'hour';
				hourDate[date][hour] = 0;
			}
		}
		function mouseState(date,hour) {
			if (mousedown) {
				mousedown = false;
			} else {
				mousedown = true;
				hourSelect(date,hour);
			}
		}
		function showSelections() {
			var sel ='';
			for (var dt in hourDate) {
				for (var hr in hourDate[dt]) {
					if (hourDate[dt][hr] == 1) {
						sel = sel+'The hour '+hr+' on '+dt+' is selected.\n';
					}
				}
			}
			if (sel == '') {
				sel = 'No hours have been selected.';
			}
			alert(sel);
		}
	//-->
	</script>

 </head>

 <body>
 Click on first hour to select, then mouse over all you want selected or deselected, then click on the last one.
  <table cellpadding="3" cellspacing="5" border="0">
		<tr>
			<td>1/1/2000</td>
			<td id="h1-1-2000-0" class="hour" onmousedown="mouseState('1-1-2000',0)" onmouseover="hourSelect('1-1-2000',0)">0</td>
			<td id="h1-1-2000-1" class="hour" onmousedown="mouseState('1-1-2000',1)" onmouseover="hourSelect('1-1-2000',1)">1</td>
			<td id="h1-1-2000-2" class="hour" onmousedown="mouseState('1-1-2000',2)" onmouseover="hourSelect('1-1-2000',2)">2</td>
			<td id="h1-1-2000-3" class="hour" onmousedown="mouseState('1-1-2000',3)" onmouseover="hourSelect('1-1-2000',3)">3</td>
		</tr>
		<tr>
			<td>2/1/2000</td>
			<td id="h2-1-2000-0" class="hour" onmousedown="mouseState('2-1-2000',0)" onmouseover="hourSelect('2-1-2000',0)">0</td>
			<td id="h2-1-2000-1" class="hour" onmousedown="mouseState('2-1-2000',1)" onmouseover="hourSelect('2-1-2000',1)">1</td>
			<td id="h2-1-2000-2" class="hour" onmousedown="mouseState('2-1-2000',2)" onmouseover="hourSelect('2-1-2000',2)">2</td>
			<td id="h2-1-2000-3" class="hour" onmousedown="mouseState('2-1-2000',3)" onmouseover="hourSelect('2-1-2000',3)">3</td>
		</tr>
		<tr>
			<td>3/1/2000</td>
			<td id="h3-1-2000-0" class="hour" onmousedown="mouseState('3-1-2000',0)" onmouseover="hourSelect('3-1-2000',0)">0</td>
			<td id="h3-1-2000-1" class="hour" onmousedown="mouseState('3-1-2000',1)" onmouseover="hourSelect('3-1-2000',1)">1</td>
			<td id="h3-1-2000-2" class="hour" onmousedown="mouseState('3-1-2000',2)" onmouseover="hourSelect('3-1-2000',2)">2</td>
			<td id="h3-1-2000-3" class="hour" onmousedown="mouseState('3-1-2000',3)" onmouseover="hourSelect('3-1-2000',3)">3</td>
		</tr>
  </table>
	<a href="javascript:showSelections();">Show Selections</a>
 </body>
</html>

Open in new window

0
PetroclusAuthor Commented:
Thanks fredmc - I was struggling with my preferred select mechanism but your solution has clarified things for me. Thanks again.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.