Availability calendar hidden features
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
When we released the current version (version 1.0) of our WordPress Availability calendar plugin, we added quite a few new features as well as improving the overall speed and functionality of the code.
Unfortunately due to our work load at the time, we never got around to detailing all of the extra bits in the documentation. Prior to completing the documentation for our much anticipated (well by us anyway) new version, I have decided to highlight a few of the more useful features here.
Highlighting Changeover days
The highlighting of changeover days on the calendar was one of our most requested features and ended up being one of the trickiest to implement. When we finally managed to work out all the nitty gritty and found a fantastically elegant solution, we were so proud of it that, we promptly forgot to tell anyone.
For those of you starting with a fresh version 1.0 installation, the changeover days are marked on your calendar by default. You just can’t see them.
For everyone who upgraded from an earlier version of the plugin, you need to make a couple of changes in your options page before you can start to play with them.
Switching on changeover day highlighting.
Login to the administration system of your WordPress blog, and go to the Options -> Bookings page. In the Calendar options section you should see two options labeled “First Booked Date” and “Last Booked Date“. These two fields should have the following settings:
First Booked Date:
{day}
Last Booked Date:
{day}
If they are different or blank, then enter the settings above and then save your changes by clicking on the Update Settings button.
This will ensure that the calendar is correctly marking the start and end days for our bookings. Now we need to change how they are displayed on our web site.
This next step requires us to edit the CSS style sheet for our calendar. Assuming you have added the styles for your calendar to the main style.css style sheet for your web sites theme (or the calendar CSS style sheet is stored in the same theme directory), we need to add the following lines:
td.booked {
background: #FF0000;
color: #fff;
}
td.startday {
background: #FF0000 url(../../plugins/clearskys/includes/images/startday.png) no-repear scroll right top;
color: #333;
}
td.endday {
background: #FF0000 url(../../plugins/clearskys/includes/images/endday.png) no-repeat scroll right top;
color: #333;
}
I have included the td.booked style in the above section of code to highlight the fact that the background colour of the start and end dates should be the same as that of the booked dates.
Save (and upload) your modified style sheet and refresh the calendar page in your browser. You should now see the start and end days of your bookings highlighted like the image below:
Adding line breaks after a set number of months
A major shortcoming of the earlier versions of the Availability calendar plugin was the inability (without a lot of messing with style sheets) to display your calendar in rows of 2 or 3 months.
The current version of the plugin has a setting in the options page to allow you to do just that.
Again, login to the adminstration pages of your WordPress site and go to the Options -> Bookings page. In the Calendar options section you will see a setting labeled “Use the code below:“. with the following default settings next to it:
To have your calendar display in rows of 2 months, change the option which shows never in the image above to the option labeled after every 2nd month. Next, enter the following into the large text box underneath:
Save your settings, and you are done. The plugin will now insert the entered line of HTML after every second month and enforce a line break.
Highlighting the current (or other) month in a different way
Sometimes you want to draw attention to the current month on your calendar, or maybe you are offering a special deal in March and April and wish to draw your visitors attention towards those months. With a simple change to your calendar settings, both of these are easily achievable.
The first step, as with all of the examples so far, is to login to your WordPress administration site and go to the Options -> Bookings page.
To add month highlighting we need to change the settings in the text box labeled “Month Block“. For the purposes of this example, I shall assume you are using the default settings and your Month Block code looks like this:
Change the above section of code to the following (or add the extra sections to your own Month Block settings) and then save your changes by clicking on the Update settings button.
What do these extra parts do?
When each month of your calendar is displayed on your web site the {lowertitle} tag is changed to display the lowercase month and year of that month. The {monthblock] tag is changed to highlight if the month is the current month and if it is in the current year or the next year.
Let’s go through a couple of examples to help explain these tags. If we assume, for the moment, that the current month and year is December 2007. When the current month is generated and displayed by the Availability calendar plugin, it will start with the following HTML:
September 27th, 2007 at 5:58 pm
There seems to be a little bug in the plugin: when you change the start of the week to monday, the calendar is not correct — it’s one day ahead… I guess the table headings with the day of the week are not updated correctly… but otherwise, your plugins are excellent! Especially the integration with the enquiry form. I’ve just installed the plugins on my father’s web site and he loves them!
September 27th, 2007 at 8:35 pm
Hi Joe, The date headings are actually by design. You need to change the Week Header settings in the Options - Bookings menu to show the correct day headings for the days.
I left it like this so that it was easy to change from single character day headings to double character headings (and also to change languages)
Barry