week-cal

by Emily Humphrey

HTML

<div class="calendar">
    <div class="cal-top">
        <a class="prev"></a><div class="last-month light-grey"></div><div class="current-month green"></div><div class="next-month"></div><a class="next light-grey"></a>
    </div>
    <div class="cal-days">
        <span class="sun">SUN</span>
        <span class="mon">MON</span>
        <span class="tue">TUE</span>
        <span class="wed">WED</span>
        <span class="thu">THU</span>
        <span class="fri">FRI</span>
        <span class="sat">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 d = new Date(),
    month = d.getMonth()+1,
    date = d.getDate(),
    day = d.getDay()+1,
    cutoff = date+2;

switch (month){
    case 1:
      month="January",
      month1="December",
      month2="February";
      break;
    case 2:
      month="February",
      month1="January",
      month2="March";
      break;
    case 3:
      month="March",
      month1="Febuary",
      month2="April";
      break;
    case 4:
      month="April",
      month1="March",
      month2="May";
      break;
    case 5:
      month="May",
      month1="April",
      month2="June";
      break;
    case 6:
      month="June",
      month1="May",
      month2="July";
      break;
    case 7:
      month="July",
      month1="June",
      month2="August";
      break;
    case 8:
      month="August",
      month1="July",
      month2="September";
      break;
    case 9:
      month="September",
      month1="August",
      month2="October";
      break;
    case 10:
      month="October",
      month1="September",
      month2="November";
      break;
    case 11:
      month="November",
      month1="Ocotober",
      month2="December";
      break;
    case 12:
      month="December",
      month1="November",
      month2="January";
      break;
}

$('.current-month').append(month),
$('.last-month').append(month1),
$('.next-month').append(month2);

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

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

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