Clearskys.net Blog

Styling your calendar

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

By default the calendar produced by the Booking management and availability calendar plugin is a bit plain. This is by design, as we did not want to impose any styles or layout on users websites, but wanted to make the output of the plugin as flexible as possible.

Basic calendar styling

If you are using the default options and layout for the availability calendar, then the first thing you should do is to add a style (to either the availability calendar page, or for the entire site) that highlights the booked dates.

This style will make give the booked dates a red background:

td.booked {
    background: #FF0000;
}

Next we should look at some spacing for the individual days. Add a DIV statement surrounding the calendar with a ID of calendar, and then add a bit of padding for each day.

#calendar td.booked {
    background: #FF0000;
}
#calendar td, #calendar th {
    padding: 5px;
}

Now lets put a border around each month, and get them to line up next to each other (rather than being placed one directly under the other).

#calendar td.booked {
    background: #FF0000;
}
#calendar table {
    border: 1px solid #BBB;
    margin: 5px;
    padding: 5px;
    float: left;
    position: relative;
}
#calendar td, #calendar th {
    padding: 5px;
}

Finally, lets make the background of each month a light cream colour, and each day (that isn’t booked) have a slightly lighter colour. We will also make each months heading bold.

#calendar table {
     border: 1px solid #BBB;
     margin: 5px;
     padding: 2px;
     float: left;
     background: #FFFF99;
     position: relative;
}
#calendar td, #calendar th {
     padding: 3px;
     background: #FFFFFF;
     border: 1px solid #FFFF99;
}
#calendar td.booked {
    background: #FF0000;
}
#calendar table caption {
    font-weight: bold;
}

And this is what it should look like:

#calendar table { border: 1px solid #BBB; margin: 5px; padding: 2px; float: left; background: #FFFF99; position: relative;} #calendar td, #calendar th { padding: 3px; background: #FFFFFF; border: 1px solid #FFFF99; margin: 2px; } #calendar td.booked { background: #FF0000; } #calendar table caption { font-weight: bold; }

Confession time: The above calendar was cut and pasted from another site running the plugin. This is because the layout settings in the options panel needed to be different for the sample calendar on this site, and the plugin currently only allows one set of layout settings per site.

Using the Availability Widget style.
Instructions on using the Availability Widget style on your calendar are available here.

Feeling generous? Why not sponsor my 100km run and send a donation to Oxfam.