Easily Booked Holiday

Hassle-free holiday-let booking system

Adding an availability calendar/booking form to a WordPress site

Not everyone can be web-savvy and out of those few can afford the professional fees charged by numerous site design and maintenance companies. Fortunately we understand that you're looking for a cheap way to add an availability calendar and booking form to your web site and we can provide you with some very simple instructions.

First it's worth being clear what service you're looking for before deciding who you should partner with. Do you want:

It's up to you how you want your bookings managed. Easily-booked can provide extensive functionality all included as part of our per-booking fee, but this article will just cover the raw mechanics of adding a calendar and booking form to your web site, so even if you don't want to use our services, this article will hopefully help you understand what to do.

Integrating a Calendar with WordPress

The vast majority of availability calendars and booking forms are hosted by your chosen provide and not on your web server. The aim is to integrate the calendar you chose into your web site in such a way as to appear to the holiday maker that they've never left your site. There are a few ways this can be accomplished, all of it requires copying and pasting a little snippet of HTML (the language which tells a web browser how to present your page) into your site.

In order to do this in WordPress you will need to:

  1. Create a new page, or edit and existing page where you want your calendar to appear.
  2. Click on the "Text" tab of the page editor (top right of the editing area). This will display the contents of the page as raw HTML.
  3. Place the cursor in the editing area at the position you'd like the calendar to appear
  4. Copy the HTML code provided by your calendar provider and paste into the WordPress editor*
  5. Switch back to "Visual" mode (the "Visual" tab is right next to the "Text" tab you clicked before)
  6. Your calendar may not appear as a calendar, but you should now be able to include other page text, pricing table etc. around where the calendar was put
  7. Publish the page and check on your web site that it has appeared

* For WordPress we strongly recommend you use the 'iframe' integration code. For Easily-Booked it'd look something like this:

<iframe src="https://booking.apps.conker-it.uk/xxxxxxxx" scrolling="no" width="900" height="560" frameborder="0">View Availability Calendar</iframe>

Note that xxxxxxxx would be different for your property; you can get the exact code by logging in to the Easily-Booked portal, clicking "Settings" next to the property you wish to show the calendar for and scrolling to the bottom of the page, where you can find the complete code.

Is width and height important?

Ok, you've spotted the width and the height attributes in the above - this is important because it tells the web browser how big to make the "hole" in your web page to view the calendar. If it's made too small then the visitor will be unnecessarily scrolling left and right, up and down to view the whole calendar. However, Easily-Booked is rolling out automatic resizing code to automatically adjust the size and layout for small form factor (phone) and tablet screens - perfect for a reflexive web site!

What about the frame border?

In the above example it's set to '0' to indicate no border should be used - this makes it appear as though the calendar is really part of your web site. If you don't want this, and you'd prefer people to know they were looking at another site, you could either change this to '1' or you could instead supply a link to your calendar on the supplier's web site (if supported - it is for Easily-Booked!)

What about the style of the calendar?

That's entirely down to the capability of the chosen calendar provider. With Easily-Booked you can customize a number of different aspects of the calendar, so if the out-of-the-box colours don't compliment your web site, simply log in to the Easily-Booked portal and change them! You can even set up a number of different colours schemes and select in the iframe code which to use.

Isn't there a WordPress plugin that I could use

Silly question - there's a plugin for virtually everything and you could investigate these on your own. However, we're confident that just because it's a WordPress plugin in no way makes up for any lack of features and the brilliant pricing model of Easily-Booked. We'll even lend our Support staff's time to help you integrate the Easily-Booked calendar into your web site for free. Features, price and support should always come first in your decision of 3rd party tools.


If anything in this article doesn't make sense, or you have any questions what-so-ever, please contact us. We'll respond quickly and help you make sense of all this.