Calendar

by Emily Humphrey

HTML

<div class="calendar">
    <div class="cal-top">
        <a class="prev"></a><div class="last-month light-grey">October</div><div class="current-month green">November</div><div class="next-month">December</div><a class="next light-grey"></a>
    </div>
    <div class="cal-days">
        <span>SUN</span>
        <span>MON</span>
        <span>TUE</span>
        <span>WED</span>
        <span>THU</span>
        <span>FRI</span>
        <span>SAT</span>
    </div>
    <div class="cal-dates">
    </div>
</div>

CSS

body{background:#E6E2DB;color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto;padding:0;margin:0;}div#wrapper{display:block;width:940px;margin:20px auto 0;}div.boxes{display:block;margin-bottom:20px;position:relative;background:#fbfbfb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;float:left;}div.boxes:after{display:block;height:100%;width:100%;position:absolute;bottom:-4px;right:-4px;background:#323232;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;content:"";opacity:.05;z-index:-1;}div.boxes-4{width:220px;margin-right:20px;}div.boxes-3{width:300px;margin-right:20px;}div.boxes-2{width:460px;margin-right:20px;}div.boxes-1{width:940px;margin-right:0;}*{color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;}p{line-height:1.25em;}.larger{font-size:1.5em;}.large{font-size:1.25em;}.small{font-size:0.75em;}.smaller{font-size:0.5em;}.green{color:#79BE50;}.purple{color:#7D569F;}.bold{font-weight:700;}div.boxes-4 .contain{width:180px;padding:20px;}div.boxes-3 .contain{width:260px;padding:20px;}div.boxes-2 .contain{width:420px;padding:20px;}div.boxes-1 .contain{width:900px;padding:20px; overflow:hidden;}

.calendar{
    display:block;
    width:600px;
    background:#fbfbfb;
}
.cal-top{
    display:block;
    width:500px;
    padding:10px 0;
    margin:0 auto;
    overflow:hidden;
}
.cal-top div, .cal-top a{
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    padding:0 10px;
}
.prev,
.next{
    width:15px;
    font-size:.85em;
    font-weight:700;
}
.current-month{
    width:170px;
    font-size:1.5em;
    font-weight:800;
}
.last-month,
.next-month{
    width:100px;
    font-weight:bold;
    color:rgb(180,180,180);
}
.cal-days,
.cal-dates{
    display:block;
    width:560px;
    padding: 0 20px 10px;
    overflow:hidden;
}
.cal-days span,
.cal-dates a{
    display:block;
    width:20px;
   ...

JavaScript

var currentMonth = 'November';

for ( var date = 27; date < 32; date++ ) {
    $('.cal-dates').append('<a href="#" class="date date-'+ date +' inactive octo">' + date + '</a>');
}
for ( var date = 1; date < 31; date++ ) {
    $('.cal-dates').append('<a href="#" class="date date-'+ date +' nov">' + date + '</a>');
}
for ( var date = 1; date < 8; date++ ) {
    $('.cal-dates').append('<a href="#" class="date date-'+ date +' inactive dec">' + date + '</a>');
}

var today = $('a.date-12'),
    todate = 12;

for ( var i = 1; i < todate; i++ ) {
    $('a.date-'+ i).addClass('inactive');
}

$(today).addClass('today');