[jQuery] My calendar
I want create my own calendar with jQuery, but I have small problem:
My source (for now):
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
td {
font-align: right;
padding: 2px;
}
.hour {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #0000FF;
float: right;
width: 10px;
font-weight: bold;
text-align: right;
}
.minute {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#0066FF;
float: right;
width: 23px;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<table width="195" border="1">
<tr>
<td> </td>
<td>Ponedeljek</td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">0</div>
<div style="clear:both;"></div></td>
<td width="129" id="0:00"> </td>
</tr>
<tr>
<td id="0:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">1</div>
<div style="clear:both;"></div></td>
<td id="1:00"> </td>
</tr>
<tr>
<td id="1:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">2</div>
<div style="clear:both;"></div></td>
<td id="2:00"> </td>
</tr>
<tr>
<td id="2:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">3</div>
<div style="clear:both;"></div></td>
<td id="3:00"> </td>
</tr>
<tr>
<td id="3:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">4</div>
<div style="clear:both;"></div></td>
<td id="4:00"> </td>
</tr>
<tr>
<td id="4:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">5</div>
<div style="clear:both;"></div></td>
<td id="5:00"> </td>
</tr>
<tr>
<td id="5:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">6</div>
<div style="clear:both;"></div></td>
<td id="6:00"> </td>
</tr>
<tr>
<td id="6:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">7</div>
<div style="clear:both;"></div></td>
<td id="7:00"> </td>
</tr>
<tr>
<td id="7:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">8</div>
<div style="clear:both;"></div></td>
<td id="8:00"> </td>
</tr>
<tr>
<td id="8:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">9</div>
<div style="clear:both;"></div></td>
<td id="9:00"> </td>
</tr>
<tr>
<td id="9:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">10</div>
<div style="clear:both;"></div></td>
<td id="10:00"> </td>
</tr>
<tr>
<td id="10:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">11</div>
<div style="clear:both;"></div></td>
<td id="11:00"> </td>
</tr>
<tr>
<td id="11:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">12</div>
<div style="clear:both;"></div></td>
<td id="12:00"> </td>
</tr>
<tr>
<td id="12:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">13</div>
<div style="clear:both;"></div></td>
<td id="13:00"> </td>
</tr>
<tr>
<td id="13:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">14</div>
<div style="clear:both;"></div></td>
<td id="14:00"> </td>
</tr>
<tr>
<td id="14:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">15</div>
<div style="clear:both;"></div></td>
<td id="15:00"> </td>
</tr>
<tr>
<td id="15:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">16</div>
<div style="clear:both;"></div></td>
<td id="16:00"> </td>
</tr>
<tr>
<td id="16:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">17</div>
<div style="clear:both;"></div></td>
<td id="17:00"> </td>
</tr>
<tr>
<td id="17:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">18</div>
<div style="clear:both;"></div></td>
<td id="18:00"> </td>
</tr>
<tr>
<td id="18:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">19</div>
<div style="clear:both;"></div></td>
<td id="19:00"> </td>
</tr>
<tr>
<td id="19:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">20</div>
<div style="clear:both;"></div></td>
<td id="20:00"> </td>
</tr>
<tr>
<td id="20:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">21</div>
<div style="clear:both;"></div></td>
<td id="21:00"> </td>
</tr>
<tr>
<td id="21:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">22</div>
<div style="clear:both;"></div></td>
<td id="22:00"> </td>
</tr>
<tr>
<td id="22:30"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">23</div>
<div style="clear:both;"></div></td>
<td id="23:00"> </td>
</tr>
<tr>
<td id="23:30"> </td>
</tr>
</table>
</body>
</html>
My problem is:
How can I use jQuery in this HTML table with option onmousedown and
onmouseup -> I want colored the rows, witch is selected by user (user
is select them with mouse).
(example what I want is Google Calendar)
Thx,
PeterKl
Topic Participants
peter.klevze
Richard Worth