WTS - Calendar Selection

by Paulo Ávila

HTML

<div class="months">
    <div class="month">
        <h3>November 2012</h3>

        <table class="week-days">
            <tbody>
                <tr>
                    <td>M</td>
                    <td>T</td>
                    <td>W</td>
                    <td>R</td>
                    <td>F</td>
                    <td>S</td>
                    <td>U</td>
                </tr>
            </tbody>
        </table>

        <table class="month-days">
            <tbody>
                <tr>
                    <td><div></div></td>
                    <td><div></div></td>
                    <td><div></div></td>
                    <td class="past"><div>1</div></td>
                    <td class="past"><div>2</div></td>
                    <td class="past"><div>3</div></td>
                    <td class="past"><div>4</div></td>
                </tr>
                <tr>
                    <td class="past"><div>5</div></td>
                    <td class="past"><div>6</div></td>
                    <td class="past"><div>7</div></td>
                    <td class="past"><div>8</div></td>
                    <td class="past"><div>9</div></td>
                    <td class="past"><div>10</div></td>
                    <td class="past"><div>11</div></td>
                </tr>
                <tr>
                    <td class="past"><div>12</div></td>
                    <td class="past"><div>13</div></td>
                    <td class="past"><div>14</div></td>
                    <td class="past"><div>15</div></td>
                    <td class="past"><div>16</div></td>
                    <td class="past"><div>17</div></td>
                    <td class="past"><div>18</div></td>
                </tr>
                <tr>
                    <td class="past"><div>19</div></td>
                    <td class="past"><div>20</div></td>
                    <td class="past"><div>21</div></td>
                    <td class="past"><div>22</div></td>
                ...

CSS

body { font: 12px Arial; }
h3 { font-weight: bold; font-size: 14px; text-align: center; }

.months { margin: 0 auto; }
.month { float: left; margin: 0 15px 0 0; }

.week-days { border-spacing: 0; border-collapse: collapse; font-weight: bold; }
.week-days td { padding: 0; text-align: center; vertical-align: middle; border: 1px solid transparent; width: 25px; }

.month-days { border-spacing: 0; border-collapse: collapse; }
.month-days td { padding: 0; text-align: center; vertical-align: middle; border: 1px solid #888; width: 25px; height: 25px; }
.month-days td div { height: 25px; line-height: 25px; cursor: default; }




/*FROM THIS POINT ON IS THE STYLES FROM WTS*/
.month-days td,
.month-days td div { background-image:...

JavaScript

var begin, end;

$(document).delegate('.month-days div', 'mousedown', function (evt) {
    begin = $(this);

    evt.preventDefault();

    // if .selected exists
        // if this is before .selected .first
        // if this is after .selected .last
        // else
    
    console.log(begin);
    $(this).parent().addClass('selected first');
});

$(document).delegate('.month-days div', 'mouseup', function (evt) {
    end = $(this);

    if ($(this).parent().hasClass('selected first')) {
        $(this).parent().removeClass('selected first');
    } else {
        $(this).parent().addClass('selected last');
    }
    
});

$(document).delegate('.month-days div', 'mouseover', function (evt) {
    var currentElementIndex = 0;
    console.log(evt.target);

    // if is holding the mousedown
    if (1) {
        console.log('hi');
    }
    
    /*
    $.each('.month-days div', function () {
        ++currentElementIndex;
        console.log($(this));
        if ($(this) === evt.target) {
            return;
        }
    });
    */

    //console.log(currentElementIndex);
    //console.log($.index($(this)));
    
    //http://api.jquery.com/index/
});

console.log($('.month-days div'));