Hey Folks,
I am working on a calendar using javascript to make it a little more fun. Right now it does everything I want, when you mouse over a date the background color of the td element changes color, and when you mouseout the td background color returns to wat it was orginally. And if you click on a certain date it changes the background-color to a different color.
Here is what I need help with. If I click on say the 10th and then click on the 15th I want the days 10- 15 to all be the same background color. Let me know if I am explaining this properly.
Here is my code so far:
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta name="keywords" content="Test"/>
<meta name="description" content="Test"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.normal { color:#660000; padding:10px }
.highlight { color:#660000; padding:10px; background-color:#dddddd }
.selected { color:#eeeeee; background-color:#676767; }
</style>
<script type="text/javascript">
/* <![CDATA[*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
function highlightCell() {
if(!document.getElementsByTagName) return false;
var tbodies = document.getElementsByTagName("table");
for (var j=0; j<tbodies.length; j++) {
var rows = tbodies[j].getElementsByTagName("td");
for (var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className;
rows[i].onmouseover = function() {
if( this.className.indexOf("selected") == -1)
addClass(this,"highlight");
}
rows[i].onmouseout = function() {
if( this.className.indexOf("selected") == -1)
this.className = this.oldClassName
}
}
}
}
function clickDate() {
if(!document.getElementsByTagName) return false;
var tbodies = document.getElementsByTagName("table");
for (var j=0; j<tbodies.length; j++) {
var rows = tbodies[j].getElementsByTagName("td");
for (var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className
rows[i].onclick = function() {
if( this.className.indexOf("selected") != -1) {
this.className = this.oldClassName;
} else {
addClass(this,"selected");
//now we also need to highlight anyother cells if we have two clicked cells
}
}
}
}
}
/*]]>*/
addLoadEvent(highlightCell);
addLoadEvent(clickDate);
</script>
</head>
<body>
<table style="border-collapse:collapse; font-size:16px; padding:10px; cursor:pointer"><tr style="font-weight:bold; background-color:#333333; color:#ffffff; padding:10px"><th >Sun</th><th >Mon</th><th >Tues</th><th >Wed</th><th >Thu</th><th >Fri</th><th >Sat</th></tr>
<tr style="background-color:#eeeeee"><td id="skbetd1" class="normal">1</td><td id="skbetd2" class="normal">2</td><td id="skbetd3" class="normal">3</td><td id="skbetd4" class="normal">4</td><td id="skbetd5" class="normal">5</td><td id="skbetd6" class="normal">6</td><td id="skbetd7" class="normal">7</td></tr>
<tr ><td id="skbetd8" class="normal">8</td><td id="skbetd9" class="normal">9</td><td id="skbetd10" class="normal">10</td><td id="skbetd11" class="normal">11</td><td id="skbetd12" class="normal">12</td><td id="skbetd13" class="normal">13</td><td id="skbetd14" class="normal">14</td></tr>
<tr style="background-color:#eeeeee"><td id="skbetd15" class="normal">15</td><td id="skbetd16" class="normal">16</td><td id="skbetd17" class="normal">17</td><td id="skbetd18" class="normal">18</td><td id="skbetd19" class="normal">19</td><td id="skbetd20" class="normal">20</td><td id="skbetd21" class="normal">21</td></tr>
<tr ><td id="skbetd22" class="normal">22</td><td id="skbetd23" class="normal">23</td><td id="skbetd24" class="normal">24</td><td id="skbetd25" class="normal">25</td><td id="skbetd26" class="normal">26</td><td id="skbetd27" class="normal">27</td><td id="skbetd28" class="normal">28</td></tr>
<tr style="background-color:#eeeeee"><td id="skbetd29" class="normal">29</td><td id="skbetd30" class="normal">30</td><td id="skbetd31" class="normal">31</td><td colspan='4'> </td>
</tr></table></body>
</html>
Any guidance would be much appreciated, thanks!