Clearskys.net Blog

Sample Calendar

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

The calendar below uses the standard Availability Calendar plugin with a modification to the standard Month Block and Month Title options. It uses the excellent CSS styles and layout demonstrated at Stu Nicholls CSSplay website.

Hover your mouse over the Month titles to see the calendar for that month.

#calendar {position:relative; width:350px; height:306px; border:1px solid #000; background:#fff; margin:0 auto;} #calendar h2 {position:absolute; width:240px; left:110px; top:150px; text-align:center; font-size:2em;} #year a {text-decoration:none; color:#000;} #year {padding:10px 0 0 0; margin:0; list-style-type:none; width:110px;} #year li {display:block; width:100px; height:17px; line-height:17px; padding-left:0px; background:transparent;} #year table {border-collapse:collapse; width:240px; height:270px;} #year table td {height:33px; width:35px; text-align:center; line-height:33px;} #year table tfoot td{width:240px; background:#919f67; height:46px;} #year table caption {color:#707a6a; height:32px; line-height:32px; padding:0; margin:0; background:#e1e5a6; font-size:1.5em;} #year table thead th {text-align:center; background:#6d8666; color:#fff; height: 20px;} #year li table {display:none;} #year li:hover {cursor:default; background:#7092bf; color:#fff;} #year li:hover table {display:block; position:absolute; left:110px; top:0; background:#7092bf;} #year td a {display:block; border:1px solid #000; margin:-1px; color:#fff;} #year td a:hover {display:block; background:#fff; color:#000;} #year td.booked { background: #FF0000;}

To generate the calendar on this page I used the style sheet from Stu Nicholls CSSplay website. and the following HTML for the main page:

My AvailabilityCalendar

I then modified the following two blocks in the options for the Availability Calendar plugin :
Month Block content:

 

{shorttitle}
{monthblock}

Month Title content:

  {title}

Finally, I set the start day for my weeks to Monday in the options (the default is Sunday), and modified the Week Header option to reflect this change, so it now looks like:

M
T
W
T
F
S
S