jQuery Calendar

HTML

<div class="calendar">
    <table>
        <thead>
            <tr class="cal-header">
                <th><button class="cal-prevMonth"><</button></th>
                <th class="cal-month" colspan="5"></th>
                <th><button class="cal-nextMonth">></button></th>
            </tr>
            <tr class="cal-weekdays">
                <td>Lu</td>
                <td>Ma</td>
                <td>Me</td>
                <td>Je</td>
                <td>Ve</td>
                <td>Sa</td>
                <td>Di</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

CSS

body {
    background-color: silver;
}

.calendar {
    padding: 10px;
    width: 280px;
    background-color: white;
    font-family: calibri;
    border-radius: 5px;
    box-shadow: 5px 5px rgba(0,0,0,.25);
}

.calendar table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}
.calendar th, .calendar td {
    padding: 0;
    height: 40px;
}

.cal-header button {
    width: 80%; height: 80%;
    border: 0;
    border-radius: 5px;
    background-color: steelblue;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.cal-header button:focus {
    outline: 0;
}

.cal-row {
    color: white;
    background-color: steelblue;
}

.cal-row td.today {
    color: steelblue;
    font-weight: bold;
    background: white;
}
.cal-row td.faded {
    color: steelblue;
    background-color: lightsteelblue;
}

JavaScript

var cal_month;
var cal_year;

function getMonthName(m) {
    var months = [ 'Janvier', 'Février', 'Mars', 'Avril', 
                  'Mai', 'Juin', 'Juillet', 'Août', 
                  'Septembre', 'Octobre', 'Novembre', 'Décembre' ];
    return months[m];
}

function daysInMonth(m, y) {
    return new Date(y, m, 0).getDate();
}

function firstDay(m, y) {
    return new Date(y, m, 0).getDay();
}

function build() {
    $('.calendar .cal-month').html(getMonthName(cal_month) + ' ' + cal_year);
    
    var nbDays = daysInMonth(cal_month+1, cal_year);
    var nbDaysLastMonth = daysInMonth(cal_month, cal_year);
    var offset = firstDay(cal_month, cal_year);
    var today = new Date();

    var nbRows = 0;
    var perLine = 0;
    var i = 1-offset;
    
    var html = '<tr class="cal-row">';  
    while(perLine!=7 && nbRows<6) {
        
        if(i<1) 
            html += '<td class="faded"> ' + (i+nbDaysLastMonth) + '</td>';
        else if(i>nbDays) 
            html += '<td class="faded">' + (i-nbDays) + '</td>';
        else if(i==today.getDate() && cal_month==today.getMonth() && cal_year==today.getFullYear()) 
            html += '<td class="today"><a href="#">' + i + '</a></td>';
        else 
            html += '<td><a href="#">' + i + '</a></td>';
        
        perLine++;
        i++;
        
        if(perLine>0 && perLine%7==0) {
            html += '</tr><tr class="cal-row">';
            perLine = 0;
            nbRows++;
        }
    }
    html += '</tr>';
    
    $('.calendar table tbody').html(html);
}

function init() {
    var today = new Date();
    cal_month = today.getMonth();
    cal_year = today.getFullYear();
    build();
}

init();

$('.cal-prevMonth').click(function() {
    if(cal_month > 0) cal_month--;
    else {
        cal_month = 11;
        cal_year--;
    }
    build();
});
$('.cal-nextMonth').click(function() {
    if(cal_month < 11) cal_month++;
    else {
        cal_month = 0;
        cal_year++;
    }
    build();
});