COPY - Insert Between Head Tags: <HEAD></HEAD>

body {
	background: #e0ffff;
}
#dayView, #weekView, #monthView {
	width: 600px;
	margin: 20px auto;
	border-collapse: collapse; 
	border: 2px #009 solid;
	background: #e0ffff;
}
#dayView td, #weekView td, #monthView td {
	width: 600px;
	font: normal 12px arial;
	color: #006;
	padding: 3px;
	border: 1px #ccc dashed;
}
a.rotatelink:link, a.rotatelink:visited, a.rotatelink:active {
	font: bold 12px arial;
	text-decoration: none;
	color: #000;
	padding: 0 2px;
	border: 1px buttonface solid;
}
a.rotatelink:hover {
	border: 1px #00c solid;
}
a.rotatelinkon:link, a.rotatelinkon:visited, a.rotatelinkon:active {
	font: bold 12px arial;
	text-decoration: none;
	color: #000;
	padding: 0 2px;
	border: 1px #000 solid;
}
a.rotatelinkon:hover {
	border: 1px #00c solid;
}

</style>
<script type="text/javascript">

function rotate(link, el_id)
{
	rotate.oldlink = rotate.oldlink || document.getElementById('startlink');
	var el, tbl_id, tbl_ids = [ 'dayView' , 'weekView', 'monthView' ];
	for (id in tbl_ids)
		if (el = document.getElementById(tbl_id = tbl_ids[id]))
        		el.style.display = (el_id != tbl_id) ? 'none' : '';
		link.className = 'rotatelinkon';
	if (rotate.oldlink != link)
	{
		rotate.oldlink.className = 'rotatelink';
		rotate.oldlink = link;
	}
	return false;
}

</script>

COPY - Insert Inside Body: <BODY></BODY>

<center>This script will display a list of scheduled activities on either a daily, weekly or monthly basis.</center><BR><BR>
<a id="startlink" class="rotatelinkon" href="#null" onclick="rotate(this,'dayView')">Day</a> | 
<a class="rotatelink" href="#null" onclick="rotate(this,'weekView')">Week</a> | 
<a class="rotatelink" href="#null" onclick="rotate(this,'monthView')">Month</a><br><br>
<table id="dayView"><tr><td>Day: This will display the events for today.</td></tr></table>
<table id="weekView" style="display:none;">
<tr><td>Week One:    Information for Week One</td></tr>
<tr><td>Week Two:    Information for Week Two</td></tr>
<tr><td>Week Three:    Information for Week Three</td></tr>
<tr><td>Week Four:    Information for Week Four</td></tr>
</table>
<table id="monthView" style="display:none;">
<tr><td>January:     Information for Month 1</td></tr>
<tr><td>February:      Information for Month 2</td></tr>
<tr><td>March:      Information for Month 3</td></tr>
<tr><td>April:      Information for Month 4</td></tr>
<tr><td>May:      Information for Month 5</td></tr>
<tr><td>June:      Information for Month 6</td></tr>
<tr><td>July:     Information for Month 7 </td></tr>
<tr><td>August:     Information for Month 8 </td></tr>
<tr><td>Spetember:      Information for Month 9</td></tr>
<tr><td>October:      Information for Month 10</td></tr>
<tr><td>November:      Information for Month 11</td></tr>
<tr><td>December:     Information for Month 12 </td></tr>
</table>

Uncle Jim's Javascript Designs

Display Tasks/Agenda Items