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>
<div class="time-picker">
    <div class="pick-empty">
        <p>Pick a date in the calendar!</p>
    </div>
    <div class="pick-picked">
        <div class="time-head"></div>
        <p>Pick a date in the calendar!</p>
    </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;}

.black{
    background:black;
}
.calendar{
    display:block;
    width:600px;
    background:#fbfbfb;
    float:left;
}
.time-picker{
    display:block;
    width:300px;
    background:#fbfbfb;
    float:left;
}
.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{
   ...

JavaScript

var d = new Date(),
    month = d.getMonth() + 1,
    date = d.getDate();

for (var d = 27; d < 32; d++) {
    $('.cal-dates').append('<a href="#" class="date ' + 'm-' + month + ' day-' + d + ' inactive" data-appt="' + month + '-' + d + '">' + d + '</a>');
}
for (var d = 1; d < 31; d++) {
    $('.cal-dates').append('<a href="#" class="date ' + 'm-' + month + ' day-' + d + '" data-month="' + month + '-' + d + '">' + d + '</a>');
}

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

// When active date is clicked

$('a.date').each(function () {
    if ($(this).hasClass('inactive')) {
        $(this).click(function () {
            return false;
        });
    } else {
        $(this).click(function () {
            var month = $(this).attr("data-month");
            $('body').toggleClass('black');
            $('a.date').removeClass('selected');
            $(this).addClass('selected');
            $('.pick-picked').empty();
            $('.pick-picked').append(month);
            return false;
        });
    }
});