My implementation of AAC

It would be great to see the calendar in action. Post your links here (preferably direct to the calendar). I may well add these links to a page in the actual Ajax Availability Calendar website if I consider them to be interesting implementations (ie due to the styling or for actual use)

My implementation of AAC

Postby krejt » Mon Apr 05, 2010 9:52 pm

My implementation of AAC for our holiday house 'Elzenhof' on Ameland can be seen here:

I made a few modifications to the default installation.
The default installation of AAC starts with all days of the year (and the future) set to "Available". But our house is not for rent for a significant part of the year (winter), and we don't accept bookings too far in the future. So a somewhat different default booking state was needed to fit our particular situation. I decided to rename the default "Available" setting to "Not yet known". By coincidence that state nicely matches the default color of 'available'; Grey.

This means I have defined four 'full color' Booking States:

    Not yet known - Grey
    Offer (Available) - Green
    Provisional - Orange
    Booked - Red
I added all color combinations to the list of Booking States. This means I have twelve 'half color' Booking States:
  • the usual Booked, Provisional and Offer (Available) states, in AM and PM versions;
  • the states Booked/Provisional, Provisional/Booked, Booked/Offer, Offer/Booked, Provisional/Offer, Offer/Provisional;
  • I also added a red Booked/Booked state with a small diagonal line. I think that is a nice way to show Change Over Days in a fully booked period.
    (Thanks to rcph for this idea.) Consistancy would require the addition of a green Offer/Offer state, but since I don't want to define certain Change Over Days I decided not to add that state (nor Provisional/Provisional).
I extended the background image (bg_days.png; the image with the half days) to contain all possible color combinations of the four booking states I use. This is my bg_days.png image:


This is the set of required changes/additions to the avail-calendar.css:

Code: Select all
/* define background image for special states - I use one single image that holds all the colors */
.cal_month ul li.booked_am,
.cal_month ul li.booked_pm,
.cal_month ul li.booked_pr_am,
.cal_month ul li.booked_pr_pm,
.cal_month ul li.offer_am,
.cal_month ul li.offer_pm,
.cal_month ul li.offer_am_booked_pr_pm,
.cal_month ul li.booked_pr_am_offer_pm,
.cal_month ul li.booked_pr_am_booked_pm,
.cal_month ul li.booked_am_booked_pr_pm,
.cal_month ul li.offer_am_booked_pm,
.cal_month ul li.booked_am_offer_pm,
.cal_month ul li.booked_am_booked_pm      {   background-image:url("/beschikbaarheid/ac-contents/themes/default/images/bg_days.png");}   

/* define complete day colors */
.cal_month ul li.booked         {   background-color: #FF0000;   }      /* complete day booked */
.cal_month ul li.booked_pr      {   background-color: #ff9700;   }      /* complete day provisionally booked */
.cal_month ul li.offer         {   background-color: #00CC00;   }      /* complete day on offer */
/* position background image for each state - adjust to your image */
.cal_month ul li.booked_am      {   background-position: 200px top;   }
.cal_month ul li.booked_pm      {   background-position: 230px top;   }
.cal_month ul li.booked_pr_am      {   background-position: 140px top;   }
.cal_month ul li.booked_pr_pm      {   background-position: 170px top;   }
.cal_month ul li.offer_am      {   background-position: 20px top;   }
.cal_month ul li.offer_pm      {   background-position: 50px top;   }

.cal_month ul li.offer_am_booked_pr_pm   {   background-position: 440px top;   }
.cal_month ul li.booked_pr_am_offer_pm   {   background-position: 470px top;   }
.cal_month ul li.booked_pr_am_booked_pm   {   background-position: 380px top;   }
.cal_month ul li.booked_am_booked_pr_pm   {   background-position: 410px top;   }
.cal_month ul li.offer_am_booked_pm   {   background-position: 260px top;   }
.cal_month ul li.booked_am_offer_pm   {   background-position: 290px top;   }
.cal_month ul li.booked_am_booked_pm   {   background-position: 350px top;   }

The resulting availablility calendar (in a somewhat default view) can be seen here: As you see the key grew way too large to fit to my website. That's why I stuck to a simple image with the three(!) most important colors on my website. I also included a blank 'change over day' to the key. That seems enough to explain all the diagonal half days to my visitors!


Some day I will replace this image with a automagically created key with the same content.

Other changes/hacks

  • I added an extra user and allowed him to administer bookings in my calendar with help of the hack Chris kindly provided here;
  • I added a Dutch and German translation. (I'll provide the translations later!);
  • A few more thingies....

Well, what do you think?
Posts: 14
Joined: Sun Mar 28, 2010 12:54 am

Return to Live Sites

Who is online

Users browsing this forum: No registered users and 1 guest