Adjust calendar overall size

Help with installation and general calendar setttings

Adjust calendar overall size

Postby crusty181 » Mon Sep 13, 2010 2:15 pm

Hi Chris

Your script is fantastic in so many ways, even ignoring the fact you provided it and the support of it for free.

I feel a little guilty asking to much of your time, but here I go again.

Is there a simple way to scale down the calendar overall ie. to fit the visible view into a smaller iframe for example.

Cheers

Ross
crusty181
 
Posts: 7
Joined: Sun Sep 05, 2010 9:42 am

Re: Adjust calendar overall size

Postby chris » Mon Sep 13, 2010 2:36 pm

You just need to play around with the values in the css style sheet.
There is one master layer that holds the whole calendar and then inner layers for each month etc.
The best way to find out is to play with the css code ;)

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

Re: Adjust calendar overall size

Postby crusty181 » Thu Sep 16, 2010 12:35 am

This might be of use to some users.

As suggested by Chris I blindly played with the CSS file and managed to reduce the scale calendar slightly whilst leaving it legible.

my calendar www.frasergroup.org/peninsula/book1.htm

File edited ... ac-contents/themes/default/css/avail-calendar.css

calendar month styles
***************************/
.cal_month{
/* month div*/
width:140px;
border:1px solid #006699;
background:#FFFFEE;
line-height:14px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding-bottom:4px;
float:left;
margin-right:4px;
margin-bottom:4px;
min-height:160px;
color:#666;
}
crusty181
 
Posts: 7
Joined: Sun Sep 05, 2010 9:42 am

Re: Adjust calendar overall size

Postby nootkan » Sun Sep 26, 2010 11:29 pm

I've tried everything I can think of and still cannot get the calendar to fit inside my 670 wide content area without showing the bottom scroll bar. Is there anyway to remove the white space after the key table once it is floated left? I'm using the iframe method as my limited to non existent php skills won't allow me to use the embedded method yet. I'd give you the url but the site is still in the development stages and I don't want anyone browsing it just yet.
nootkan
 
Posts: 18
Joined: Sun Sep 19, 2010 1:41 am

Re: Adjust calendar overall size

Postby chris » Mon Sep 27, 2010 9:32 am

Hi,
Playing around with the widths of these classes in the style sheet should get fit it in:
Code: Select all
#cal_wrapper
#the_months{

If it fits in but you are still getting the horizontal scroll you can tell the iframe to not show horizontal scrolls by adding the style overflow-x: hidden; to it something like this:
Code: Select all
<iframe width="670px" height="400px" src="/calendar/index.php" style="overflow-x: hidden;"></iframe>


I hope that helps you out :)

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

Re: Adjust calendar overall size

Postby nootkan » Mon Sep 27, 2010 6:52 pm

Thanks Chris, the iframe changes made everything work fine in firefox but not the useless IE. Wish they'd get their act together and join the rest of the good browser world. :x
nootkan
 
Posts: 18
Joined: Sun Sep 19, 2010 1:41 am

Re: Adjust calendar overall size

Postby keyboarder » Wed Oct 20, 2010 7:40 pm

[quote="crusty181"]This might be of use to some users.

As suggested by Chris I blindly played with the CSS file and managed to reduce the scale calendar slightly whilst leaving it legible.

File edited ... ac-contents/themes/default/css/avail-calendar.css

You must have edited more than that...
If you edit from line 86 up to and incl. line 133 - it would look like this, to fit in your calendar:

calendar month styles
***************************/
.cal_month{
/* month div*/
width:140px;
border:1px solid #9B6B3A;
background:#E1D08C;
line-height:14px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding-bottom:4px;
float:left;
margin-right:4px;
margin-bottom:4px;
min-height:160px;
color:#666;
}
#key .cal_title,
.cal_month .cal_title{
border-bottom: 1px solid #CCC;
background:#E1D08C;
padding:2px;
text-align:center;
color:#000;
}
.cal_month ul{
clear:both;
list-style:none;
margin:0px;
padding:4px;
margin:auto;
width:148px;
color:#FFF;
}
.cal_month ul li{
float:left;
width:16px;
height:16px;
border:1px solid #CCC;
margin-right:1px;
margin-bottom:1px;
text-align:center;
background-color:#DDD;
color:#000;
font-size:90%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

Attention: I changed the background colors, to fit my own design OK?
keyboarder
 
Posts: 11
Joined: Tue Oct 19, 2010 3:21 pm


Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron