» Table Of Contents
Changing the Calendar Size
Section 2.4.1
When using the iframe design of the calendar, the height or width must be changed in two places. First, set the height and width in the cellHeight and cellWidth properties of the "scrptcal.htm" file. Second, adjust the height and width attributes of the "iframe" tag in your HTML.
The cellHeight and cellWidth determine the size of the table cells representing individual dates. These properties are the number of pixels tall and wide the date table cells will be. There are 7 days in a week, which means there are 7 columns. There are 4 to 6 weeks in a month, so 4 to 6 rows. Changing the size date table cells affects the overal size of the calendar.
You must comprise between the amount of event text and how big your calendar can be to fit on screen. Date table cell heights of 80 pixels and widths of 80 pixels produce a compact calendar. 100 pixels by 100 pixels produces a larger calendar, while still fitting to a single page.
One tip is to use a small amount of event text to summarize your event, and then having a link or a popup to more detailed information. There is more on adding hyperlinks and popups to events when events themselves are discussed.
The second adjustments is the iframe. Now that you have changed the size of the calendar, you must adjust the iframe. The iframe height and width control how much real estate on your page you will give to the calendar. A larger calendar must be accounted for within height and width of the iframe. Otherwise the iframe will truncate portions of the calendar.
Determining the correct value of the iframe height attribute is done through trial and error. A good starting point is for a cellHeight of 100, set the iframe height to 800. For a cellHeight of 150 set the iframe height to 1050.
Also note that the calendar may have six weeks and not just five. Check a month and year that will give you the six weeks display. A good example and good date to test is January 2005.
The iframe height will need to be larger than most months of the calendar, considering some months can have 6 weeks. The calendar itself will adjust depending on the month, but the iframe height is fixed.
You can blend the calendar with your page by setting the "body" class of the scrptcal.css to the same background as you page. The "body" class is the body of the scrptcal.htm file (which is loaded in the iframe). You can still have a border around the calendar using the "scCalendar" class in the same CSS. This is a class for a DIV tag that wraps the calendar. It will grow and shrink with the calendar height.
» Table Of Contents