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
