Hi there

I currently have each item in an inline iframe but because the key is on the far right of the display for multiple months, the iframe shows a horizontal scroll bar. I'd like to be able to reduce the size of the calendar (and add a 3 state key but it's not vital.)
In the css file "ac-contents" > "themes" > "default" > "css" > "avail-calendar.css" you need to find these lines and adjust the width so that it is just wide enough for one calendar:
- Code: Select all
#ac-wrapper{
width:670px;
margin:0px auto;
}
Once you have the width right that "should" remove the horizontal scroll from each iframe.
I'd also like the month to scroll for all 4 booking items but my scripting knowledge and experience is minimal.
I'm not quite sure what you mean by that

Do you want to have just one set of "arrows" to change the month in all of the items at the same time?
If this is the case this will require quite some Javascript (Mootools) coding as you need to somewhow include the arrows in the parent page code and add the JavsaScript code to instruct each of the iframe calendars to adjust. Not impossible but quite complicated

I have 18 more booking items to update and I need to decide how best to show availability for each of them. I'll look at how others have done it for inspiration!
Having so many items is going to be comlicated.... Seeing as you are only showing one month at a time you might consider completly changing the month design to show all the days on a single row.
Something like this:

This is actually something that I would like to add in a future version as an option but not something that I have had time to do yet.
The calendar dates are actually made up of an unordered list (<li>). The only reason they are split into lines of 7 days is because the width of the <ul> is defined in the css sheet. If this where extended, it is feasible that the dates could all be shown in a single line.
However, this solution would also require some php changes to show the date weekdays etc.
Chris