DATE TABLE

JQUERY GENERATED TABLE WITH DATES

by Tomasz

HTML

<div class="calendar">
    <div class="header">
        <table class="calendar">
            <thead>
                <tr id="months"></tr>
                <tr id="numbers"></tr>
                <tr id="days"></tr>
            </thead>
        </table>
    </div>
</div>
<div class="calendar2">
    <div class="header">
        <table class="calendar">
            <thead>
                <tr id="months2"></tr>
                <tr id="numbers2"></tr>
                <tr id="days2"></tr>
            </thead>
        </table>
    </div>
</div>

CSS

.ui-state-hover {
    border: 1px solid #d3d3d3
}
div.calendar {
    height: 100px;
    width: 600px;
    overflow: auto;
    border: 1px solid gray;
}
div.calendar div.header {
    height: 80px;
    width: 8000px;
}
div.big {
    height: 80px;
    width: 8000px;
}
table.calendar {
    table-layout: fixed;
    width:100%;
    height: 100%;
}
table.calendar tr {
    height: 20px;
    font-size: 10px;
    /*background-color: red;*/
}
table {
    background: #ffffff;
    border-collapse:collapse;
}
th, tr {
    height: 50px;
}
th, td {
    border: 1px solid black;
    text-align: center;
    font-variant:small-caps;
    min-width: 100px;
}

JavaScript

// `getDayOfYear` returns the day number for the year
Date.prototype.getDayOfYear = function () {
    var fd = new Date(this.getFullYear(), 0, 0);
    var sd = new Date(this.getFullYear(), this.getMonth(), this.getDate());
    return Math.ceil((sd - fd) / 86400000);
};

Date.prototype.getLastDayOfMonth = function () {
    var y = this.getFullYear();
    var m = this.getMonth();
    return new Date(y, m + 1, 0);
};

function dateDifference(d1, d2) {
    var fd = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate());
    var sd = new Date(d2.getFullYear(), d2.getMonth(), d2.getDate());
    return Math.ceil((sd - fd) / 86400000);
}

$(document).ready(function () {

    var startDate = new Date(2013, 0, 1);
    
    //alert(startDate.getDayOfYear());
    var endDate = new Date(2013, 1, 1);
    var dayDiff = dateDifference(startDate, endDate);

    var numbers2 = '';
    for (var ii = 0; ii < dayDiff; ii++) {
        numbers2 += '<td>' + (ii + 1) + '</td>';
    }
    $('tr#months2').html(numbers2);






    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var dayNames = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Sn"];
    var months = '';
    for (var i = 0; i < monthNames.length; i++) {
        months += '<td colspan="' + monthDays[i] + '">' + monthNames[i] + '</td>';
    }
    $('tr#months').html(months);

    var numbers = '';
    var counter = 1;
    var month = 0;
    for (i = 0; i < 365; i++) {
        numbers += '<td>' + counter + '</td>';
        counter++;
        if (counter > monthDays[month]) {
            month++;
            counter = 1;
        }
    }
    $('tr#numbers').html(numbers);

    var days = '';
    var day = 1;
    for (i = 0; i < 365; i++) {
        days += '<td' + (dayNames[day] == 'Nd' || dayNames[day] == 'So' ? ' class="weekend"' : '') + '>' + dayNames[day] + '</td>';
       ...