Akoonah Byron Bay Accommodation website

The folks at Akoonah Byron Bay Accommodation were ready to update the look of their website and have it be mobile responsive, involving custom blocks and a new availability calendar.

Custom Availability System

The availability calendar was originally embedded in an iframe from a 3rd party service, with limited control over styles and markup. To replace it I developed a custom Dashboard page to manage bookings, and displayed them on the site with the CLNDR jQuery calendar plugin.

Having full control over the styles and markup meant we could give the calendar the same design elements as the rest of the site. In addition to making the calendar responsive, I tweaked the calendar generation to display an appropriate amount of months depending on the users device width.

On smaller devices only a single month is displayed at a time as it would be pointless to display a full year which requires frequent scrolling; users can cycle through each month using the navigation buttons. Larger screens are able to display 12 months at a time, with the navigation buttons cycling through a whole year.

Custom 'Rates' Block

Each property has a 'Rates' section which details the prices at different times of the year. Creating a custom block for these rates ensured the data remains consistent, as well as being easy to input.

Frequently used snippets of text are able to be inserted to speed up filling in the fields and keep the data consist between each block.