Ideally you would have a jQuery selector you could use to identify the
rows/cells that can be selected (by binding onmousedown, onmouseup). Taking
a look at your html, you've got classes on the TDs in your left columns of
rows (.minute, .hour). The TDs in the right column of rows only have ids
(incidentally, your ids are invalid as they must begin with a letter. Also
while the colon ':' is valid it has to be escaped in jQuery selectors, so
it's better to avoid if possible).
So the first step (if you want the user to be able to click and drag a
selection of rows in the right column) is give all of those TDs a class. Ex.
'selectable' or 'time-slot'
Next we use that selector and bind the events:
$(".time-slot").mousedown(function() {
$(this).addClass("time-slot-selected");
}).mouseup(function() {
$(this).addClass("time-slot-selected");
});
If time-slot-selected has a different background color, this will highlight
the slots at each end of your selection. Now to get the ones in-between. One
option is to get the index (n-th child of parent) of each of these two and
then create a selector to give you all the ones with an index in that range,
then add the same class. Another option - walk all "time-slots" (using
each() - $(".time-slot").each(function(i) { ... }); ). After you pass up a
selected one, keep adding the selected class to each slot until you hit
another selected one. Of course, this assumes the user mouseup'd on a
different slot than down.
Depending on how you want it to work, you may consider clearing a previous
selection on mousedown. Something like:
$(".time-slot-selected").removeClass("time-slot-selected");
Also don't forget to make the table and cells unselectable to prevent text
selection while dragging. Hopefully this will get you started. Let me know
if you get stuck again.
- Richard
On 7/28/07, PeterKl <[EMAIL PROTECTED]> wrote:
>
>
> 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
>
>
