Change Calendar Size

Help with installation and general calendar setttings

Change Calendar Size

Postby derbrit » Sun Apr 25, 2010 7:28 pm

I've partially implemented the calendar on my site but want to show a single month for 4 booking items. 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.) I'd also like the month to scroll for all 4 booking items but my scripting knowledge and experience is minimal. You can take a look what I have so far at http://www.kapilana.net/html/bh_availability.html. 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!

Great job, by the way from a fellow expat (check my username)!
derbrit
 
Posts: 8
Joined: Mon Apr 19, 2010 9:08 pm

Re: Change Calendar Size

Postby chris » Sun Apr 25, 2010 8:14 pm

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:
Image
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
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Change Calendar Size

Postby derbrit » Sun Apr 25, 2010 9:30 pm

Thanks, Chris. I might actually try your idea of showing the days horizontally for the same class of booking item. The other 18 units each have their own page so I'll probably show availability for them on their own pages but they do fall into 3 separate classes (bedrooms and bathrooms) so I could build an "availability page" for each class. The maximum number of items in one class is 7 so I could have 7 horizontal rows on one page. Your suggestions have given me options. As for changing the month in all the items, I was hoping there would be a global variable that could be changed in any of the booking items that would then change it in all of them. If it's not possible to do it simply, I'll live with having to change each month in each frame.
derbrit
 
Posts: 8
Joined: Mon Apr 19, 2010 9:08 pm

Re: Change Calendar Size

Postby derbrit » Wed Mar 14, 2012 3:19 pm

I definitely need to implement the ability to show availability of multiple items on a page but as it's been a couple of years since I looked at this code, I'm struggling to remember how it's put together. Which module defines the unordered list and is where in the css file is the size (<ul>) defined? Are you aware of any of your calendars out there that do this so I can see how it might be done?
derbrit
 
Posts: 8
Joined: Mon Apr 19, 2010 9:08 pm

Re: Change Calendar Size

Postby chris » Wed Mar 14, 2012 3:45 pm

Hi,
The unordered list is defined in the ac-includes > functions.inc.php file
To show the dates in a row the *only* thing that you will need to modify there is the weekday titles.
However you will also need to modify the code to loop through all the calendar items.

The <ul> width is defined in the css file, If you make this wider the days will flow into the width.

I have done custom work on a couple of sites that have the calendar this way.
However I can't remember the urls right now (it was some time ago)

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Change Calendar Size

Postby derbrit » Sat Mar 17, 2012 3:27 pm

Thanks, Chris. I'll take a look at that.

I've tried the "Cypriano Hack" but the call to draw_mycal in calendar.ajax.php is failing to find the function. Not sure why as I just did a cut and paste. Need to look at it again but real work (plumbing, painting, marketing ETC.) is getting in the way!
derbrit
 
Posts: 8
Joined: Mon Apr 19, 2010 9:08 pm


Return to Support

Who is online

Users browsing this forum: No registered users and 5 guests

cron