Frequently Asked Questions

The FAQ is broken up into logical sections according to functionality. If you cannot find the exact section below, please visit the sections that most closely match your query. If you are still unable to find an answer for your question, please email your question to technical support at techadmin @ scriptcalendar.com

How do I...

How do I put the calendar on my page?
This section describes how to place the calendar within your HTML. The installation of the calendar requires just 4 steps...

1) Upload the files contained with the zip file to your webserver. You must preserve the extact folder structure contained with the zip.

2) You must insert the the "iframe" tag / code into whatever page you wish to display the calendar on. You can simply cut and paste this code from below, the demo version or this website.


<iframe id="scIFrame" name="abc" src="scthemes/standard/scrptcal.htm" scrolling="no" frameborder="0" width="800" height="700" ></iframe>

3) You may change the "src" attribute relative path of the iframe to point to the location of the theme files of your choice.

4) Cut and paste your license key(s) into the "name" attribute of the iframe tag.

Step #1
The zip file of the software with the demo or full versions contains the following directory structure.

sccomponents
scimages
scthemes

You must preserve this exact folder structure, both when extracting files from the zip and when you upload files to the webserver. To extract the folder structure from the zip, use the "extract" command rather than drag and drop. This will create the correct folder structure. When uploading files to the webserver, you must create the right folders and upload the appropiate files for that folder. FTP software makes it easy to transfer entire folder structures with appropiate files.

Your HTML page where you want the calendar to appear is the starting point. Your HTML page where the calendar resides is the root folder. You should upload the other directories into the same folder with your HTML page.

Step #2
Your HTML page requires only the a single "iframe" tag to display the calendar. Simply place this tag in your HTML...


<iframe id="scIFrame" name="abc" src="scthemes/standard/scrptcal.htm" scrolling="no" frameborder="0" width="800" height="700" ></iframe>

Step #3
The "src" attribute of the "iframe" tag specifies what HTML will display within the "iframe". This is where you write the virtual path to the layout theme you want. The theme directory should be a subfolder of your HTML page, so the virtual path should be the same. In the example above, the standard theme is used. That's it. You have now put the scriptcalendar on your page.

Step #4
The "name" attribute of the "iframe" tag provides the license key for the software. The key attribute contains license key text. It may be a single key, for example name="abc". The attribute may multiple keys in a comma delimited string, for example name="abc,xyz". In the example above, the license key is "abc". Without the the proper license key, the calendar will only show events in the first ten days of the month.

More information on Using the License Key.

How do I use the different files?
This section describes the folder and files of the Scriptcalendar software.

The sccomponents directory is where the various javascript files for the scriptcalendar are kept. The javascript component files are...

file	required	editable	description
scrptcal.js	required	NO	The scriptcalendar engine that renders the calendar.
scevent.js	optional	yes	The script containing your custom events. You may use XML event data instead.
scevent.xml	optional	yes	The xml data file containing the events. You may use scevent.js file instead.
scspcevt.js	required	yes	The script containing special, recurring or holiday events.
scedit.htm	optional	no	The HTML event editor page. This is provided to help you create and maintain events in either format.
scedit.xsl	optional	no	The HTML event editor XSLT page. This is required if you include the editor.
scrptcal.xsl	optional	yes	The XSLT transform file used if you choose XML data events.

The scimages directory is where the common graphics files for the demo and full versions of the script calendar are stored. Graphics used exclusively by a theme are stored in the theme directory. You will probably have a similiar folder on your website, and you'll probably use those images in your calendar. Therefore, you can choose to omit this entire folder. Just make sure that when placing your graphic file in an event that the virtual path is correct.

The scthemes directory is where the various theme files for the scriptcalendar are kept. The theme files are...

file	required	editable	description
scrptcal.htm	required	yes	The file od the src attribute in the IFrame. This file includes the CSS file, the javascsript components and calls the calendar.
schandlr.js	required	yes	The script containing onMouseOver and onMouseOut handling functions.
scprint.css	required	yes	The CSS file used for printing the calendar.
scrptcal.css	required	yes	The CSS file used for displaying the calendar layout and colors.

There may also be various graphics files used by a theme stored in the theme folder.

Within the Theme folder, you'll find a "scrptcal.htm" file which is the source HTML for the IFrame. Inside the scrptcal.htm file you are able to set the various object oriented properties of the calendar. A complete list of the properties is available on this website.

How do I configure/ customize calendar?
The previous sections showed you how to get the calendar on your HTML page with a single "iframe" tag. They also listed the various folders and files that are part of the Scriptcalendar software. This section provides the basics of how the various files are used and what you can customize.

The calendar functions by placing the "/themes/(theme name)/scrptcal.htm" HTML within the in-line frame tag you place on your HTML page. This integrates the calendar within your page layout. The HTML for the scrptcal.htm performs several functions.

Imports the "scrptcal.css" file, which is the cascading style sheet
Includes the "../../components/scrptcal.js" file containing the Scriptcalendar engine
Includes the "../../components/scevent.js" file containing the standard events
Includes the "../../components/scspcevt.js" file containing the special events
Includes the "schandlr.js" file containing the onMouseOver handling functions
Creates an instance of the scriptcalendar object and stores the reference in the variable "objCal".
Sets the various properties using the "objCal" variable.
Renders the calendar by calling the "initialize" method of the "objCal" variable.

The first thing is to place the "iframe" tag in your HTML. In order to do that, you'll have to pick one of the themes.

Next you'll want to customize are the events contained in the "components/scevent.js" file. The Scriptcalendar provides an editing tool to help you configure the scEvent.js. The file is the "components/scedit.htm" and it's use covered in later section. Alternatively you may edit the scEvent.js by hand with a text editor, but the javascript syntax must be correct or it will cause errors.

You may want to edit the special events contained in the "components/scspcevt.js" file. These are holiday, recurring, and special events. This file is entirely javascript, and you must have some knowledge of javascript to use it. You may choose to leave the special events as they are.

Next, edit or add any calendar properties in the scrptcal.htm file. The scriptcalendar object has an object oriented design, and you can alter the behavior by setting the various properties. Add, modify or delete the properties as you see fit.

Finally you may want to adjust the colors and layouts of the various calendar elements in the "scrptcal.css" cascading style sheet. The various class names are described in a later section. In the CSS file, you can change background colors, foreground colors, fonts, borders, background images and so on. Some knowledge of CSS is needed to edit the CSS file. You may decide not to edit the file at all.

There is a seperate CSS used for printing. That's because many graphics and colors do not print well (especially on a black & white printer). Additionally, graphics and colors that good on the web can wind up creating a confusing print out. Therefore the scprint.css is a seperate CSS with the "media" of "print". This is very plain, but produces a nicely formatted printed page.

That's it, you have now configured the Scriptcalendar for your website.

How do I get events beyond the 10th to display (using the license key)?
The license key is stored in the "name" attribute of "iframe" tag of your HTML page. Setting the value of the "name" attribute establishes your license key. The "name" attribute may contain a single license key in the form of a text string. Additionally, it may contain several license keys in the form of a comma delimited string. Please see the examples below.

Single license key example


<iframe id="scIFrame" name="abc" src="scthemes/standard/scrptcal.htm" scrolling="no" frameborder="0" width="800" height="700" ></iframe>

Multiple license key example


<iframe id="scIFrame" name="abc,def,xyz" src="scthemes/standard/scrptcal.htm" scrolling="no" frameborder="0" width="800" height="700" ></iframe>

It is important that the "id" attribute of the "iframe" tag is the value "scIFrame". Don't change the value of the "id" attribute.

If no events beyond the 10th day of the month will appear your license key is mistyped or invalid. Please check your domain and your license key. To check your domain, open your HTML page with your browser and examine the URL in the Address bar. The domain portion of the URL starts after the "http://" and ends at the first forward slash "/". To check your license key, visit the License Manager on this website. If the license key in your HTML doesn't match the License Manager license key, then edit your HTML page to match the License Manager. If the domain of your HTML Page doesn't match the License Manager domain, email technical suppport at techadmin @ scriptcalendar.com.

Please note that it is possible for your browser to cache the HTML file. That means even if you edit the license key, the browser may continue to display events only up to the tenth. That is because the browser is using the cached version of the page without your edit. To clear the cache, use the browsers refresh button. So, every time you change the license key, make sure you use the refresh button on the browser.

The license key checking is done in javascript when the calendar loads. The license key check doesn't reference this website or any other website.

The only difference between the demo version and the full version is the license key. Adding the correct license key to the demo version of the software instantly upgrades it to the full version. You will be granted a license key during the purchase process by this website. You can immediately insert the license key into the demo version and it becomes the full version. Therefore, you can test and develope the demo version and only when you are satisfied do you need to come back for the license key.

How do I use the theme CSS and adjust the colors and layout?
The scriptcalendar layout and colors are controlled almost entirely from the cascading style sheet. The different style sheets and their corresponding IFrame source HTML reside in the various theme directories. Basically, the HTML page just includes the necessary javascript components and renders the calendar using class names from the CSS file. You are free to edit the CSS files as you see fit. The class names (and their uses) in the CSS file are defined below.

class name	element type	description
standard classnames
body	body	The standard CSS body tag
A:link	hyperlink	The standard CSS A:link tag.
A:visited	hyperlink	The standard CSS A:visited tag.
A:hover	hyperlink	The standard CSS A:hover tag.
A:active	hyperlink	The standard CSS A:active tag.
main calendar classnames
.scCalendar	div	Applied to the main element of calendar.
.scHeader	div	Applied to the selectors and weekday header elements.
.scMonthDropdown	combobox	Applied to the month dropdown, used to control the width.
.scYearDropdown	combobox	Applied to the year dropdown, used to control the width.
.scSelector	span	Applied to the previous and next month hyperlink elements.
.scWeekNumber	div	Applied to the week numbers on the left side of the calendar.
.scWeekday	div	Applied to every date cell element of the calendar.
.scEvent	div	Applied to every event element of the calendar.
.scToday	div	Applied to "today" event defined in the scSpcEvt.js
past, present and future date classnames
.scDateDead	div	Applied to the dead cells of the calendar.
.scDatePast	div	Applied to the past cells of the calendar.
.scDateCurrent	div	Applied to the current cell of the calendar.
.scDateFuture	div	Applied to the future cells of the calendar.
event classnames
.scEventRed	div	Applied to event elements. Use in the scevent.js
.scEventOrange	div	Applied to event elements. Use in the scevent.js
.scEventYellow	div	Applied to event elements. Use in the scevent.js
.scEventGreen	div	Applied to event elements. Use in the scevent.js
.scEventBlue	div	Applied to event elements. Use in the scevent.js
.scEventPurple	div	Applied to event elements. Use in the scevent.js
.scEventBlack	div	Applied to event elements. Use in the scevent.js
day of the month classnames
.scNumber	div	Additional style applied to day of the month text.
event handler classnames
.scOnMouseOver	div	Applied to date cells of the calendar on the mouse over.
Popup DIV classnames
.scPopupContainer	div	Applied to the DIV that contains the DHTML popup iframe.
.scPopupIFrame	iframe	Applied to the IFrame of the DHTML popup.
Filter classnames
.scFilterContainer	div	Applied to the DIV that contains the DHTML popup iframe.
.scFilterContainer	span	Applied to a span around the checkbox.

You may add additional class names to be use in the scEvent.js, scSpcEvt.js or scHandlr.js files. These three files are the only places you control which class name styles are applied.

Adjust the different class names in the CSS to create your own custom themes, colors and layouts.

How do I print the calendar?
There are two CSS files in each theme folder. The "scrptcal.css" provides the styles for displaying the calendar in the browser. The "scprint.css" provides styles for printing the calendar. The classnames inside both style sheets are the same since they both refer to the same elements. A list of the classnames is provided in this FAQ page.

The "scprint.css" that is included in the zip displays most elements with a white background and black text. It also places a border around each weekday element. Please edit the file to print the calendar as you see fit.

Please note that the "scprint.css" will only format the scriptcalendar elements. It will not format any other elements above, below or surrounding the calendar.

How do I add a new event, modify an event or delete an event?
The scEvent.js is nothing more that a list of calls to the same function inside the scriptcalendar engine (scrptcal.js). The function is the "fscEvent" function. To create an event in the calendar, you simply make a call the fscEvent function. In order to call the function, you must know what parameters to use. Please see the table of the parameters below.

To add a new event, simply add a new call to the fscEvent function within the scEvent.js file. For example...

fscEvent( 1, 1, 2006, "January 1st 2006" );

adds a new event for January 1st 2006. You'll note we didn't use all the parameters. Since all the parameters after the Event Text were NULL, we just omitted them. This would be same as the call...

fscEvent( 1, 1, 2006, "January 1st 2006", null, null, null, null, null );

The arguments of the fscEvent function are...

parameter	type	required	description
month	number	no	The numeric month (1-12) of the date of the event.
day	number	yes	The numeric day (1-31) of the date of the event.
year	number	no	The 4 digit numeric year of the date of the event.
text	string	no	The text you want to appear in a date cell. It may include HTML.
popuplink	string	no	An url you want to popup in a new window when the event text is clicked.
style	string	no	A class name of a CSS class that you want applied to the event.
tooltip	string	no	A message that appears when the mouse hovers over an event.
script	string	no	Javascript to be executed during "onMouseDown" in the date cell.
filter	string	no	Keyword to allow users to filter events.

To modify an event, simply locate the specific event in the scEvent.js and edit it as you wish.

To delete an event, locate the specific event in the scEvent.js and delete it.

The Scriptcalendar includes an event editor to assist you in managing events. It provides an easy way to Add, Modify and Delete events. The editor is covered in the next section.

How do I use the event editor event?
The event editor is an HTML page included along with the ScriptCalendar software. It provides an easy way to add, modify and delete events. The page is located in the "components" folder and is named "scEdit.htm". The page must reside in the same folder as the scEvent.js. This is necessary because it reads the events from the scEvent.js. To begin using the editor, simply open the scEdit.htm page.

The event editor may be used with MSIE 6+ and Firefox browsers. It may work in other browsers as well, but it is only certified in those two browser.

Please note that the editor cannot be used online. Javascript has a built in limitation that it cannot read or write from the server. So, the editor cannot update your scevent.js on the server. Instead, it displays the appropiate scevent.js file on screen. Then, you must manually...

copy the formatted output from the page,

paste the new code into the scevent.js file,

save the new file to your harddrive, and

upload it to you webserver. This makes the editor an offline tool.

To have calendar that you can have users add, update and delete events from you must...

have server-side scripting software such as asp, java or php and

you must code a page to interact with the scevent.js or scevent.xml.

There is a Interactive Example page written in C#.

Insert an Event

Locate the blue form containing data inputs at the bottom right of the page.
Enter the date, text and other data for your event. You may leave some fields blank.
Click the Insert Record button. The new event is added to the table of events.

Update an Event

Click on the appropiate event in the table of events.
Locate the blue form containing data inputs at the bottom right of the page.
Edit the date, text and other data for your event. You may leave some fields blank.
Click the Update Record button. The event changes in the table of events.

Delete an Event

Click on the appropiate event in the table of events.
Locate the blue form containing data inputs at the bottom right of the page.
Click the Delete Record button. The event is removed table of events.

Get the scevent.js output

Locate the blue form containing data inputs at the bottom right of the page.
Click the View Output button.
Copy Output textarea with the formatted output to the clipboard.
Paste the output from the clipboard into your scevent.js file.

Unfortunately, javascript has a built in security limitation that prevents it from writing to a file. Therefore, it will be necessary for you to copy the output of the editor from the page and paste it into your scevent.js or xml file.

How do I get multiple events in a date cell?
You may define more that one event for a specific date. The calendar will display the events as they are ordered in the scEvent.js file. Then it will display Special Events you have defined beneath the last scEvent.js event. For example...

fscEvent( 1, 1, 2006, "event 1" );
fscEvent( 1, 1, 2006, "event 2" );
fscEvent( 1, 1, 2006, "event 3" );

Will place three events in the January 1st 2006 date.

Please note that if you have many events defined in a single day, the calendar may truncate the display based on the cellHeight and expandCellHeight property. If your events are being cut off, you need more space to display them. In that case, increase the cellWidth and cellHeight properties to enlarge the individual date cells. Alternatively, you can set the expandCellHeight which allows the date cell to grow to show all the events. This property is covered in depth in a later section.

How do I get a event to appear every other Sunday or on Holidays?
The scSpcEvt.js is used for displaying recurring events, holidays, or an event that cannot easily be coded in the scEvent.js. The scSpcEvt.js use javascript code to perform date calculations and generate events. For each date displayed on the calendar, the "scSpecialEvent" in this file is called, checking for events to add. There are several variables available to you inside the scSpcEvt.js.

variable	type	description
y	number	the 4-digit year (ex. 2006)
m	number	the month (1=jan, 2=feb,... 12=dec)
d	number	the day
dte	date	the specific javascript date variable
intWeekday	number	day of the week (0=sun; 1=mon; 2=tue, ..., 6=sat)
intWeekOfYear	number	week number of the year
intWeekOfMonth	number	week number of month (1st Sunday, 2nd Sunday, ...)
blnLast	boolean	is this the last weekday of the month?
dteEaster	date	javascript date variable for Easter of the year
dteMardiGras	date	javascript date variable for Mardi Gras of the year
dteAshWednesday	date	javascript date variable for Ash Wednesday of the year
dteGoodFriday	date	javascript date variable for Good Friday of the year

Take a look at the scSpcEvt.js. It has several holidays and special events are coded. It easiest to learn by looking at a few of these examples.

// first and third Sunday
if (intWeekday==0 && (intWeekOfMonth==1 || intWeekOfMonth==3) ) {
   objEvent = new EventObj(m,d,y, "1st & 3rd saturday", null, "scEventRed");
   arrEvents[arrEvents.length] = objEvent;
};

// Memorial Day, Last Monday in May. 
if (m==5 && intWeekday==1 && blnLast==true) {
   objEvent = new EventObj(m,d,y, "Memorial Day", null, "scEventRed");
   arrEvents[arrEvents.length] = objEvent;
};

// Thanksgiving Day, fourth Thursday in November. 
if (m==11 && intWeekday==4 && intWeekOfMonth==4) {
   objEvent = new EventObj(m,d,y, "Thanksgiving", null, "scEventRed");
   arrEvents[arrEvents.length] = objEvent;
};

// Easter Sunday 
if ( dte.equalsTo(dteEaster)) {
   objEvent = new EventObj(m,d,y, "Easter Sunday", null, "scEventGreen");
   arrEvents[arrEvents.length] = objEvent;
};

When adding events with the scSpcEvt.js file, the parameters for the "EventObj" are exactly the same as those used in a scEvent.js "fscEvent" call. There is just a difference in making the call itself.

How do I get an event to appear every month or every year?
Another way to do recurring events is by using a "null" month or "null" year event. When you call the fscEvent function, you can pass "null" in place of the year to get an event to appear in every year the calendar is displayed. This is particularly useful for holidays. For example...

fscEvent( 12, 25, null, "Christmas Day");
fscEvent( 3, 17, null, "Saint Patricks Day");
fscEvent( 10, 31, null, "Halloween night");

Of course, these holidays are already defined in the scSpcEvt.js. It is better to use the scSpcEvt.js file if you can. Using scSpcEvt.js reduces the number of Event Objects that must be checked when an event is displayed.

How do I get a hyperlink in a date cell?
The 4th argument of the fscEvent function is a string of text to appear in the specific date cell. This string may contain HTML tags, such as <a href...>. For example, to place a hyperlink in the date cell for January 1st, 2006, use the following code...

fscEvent( 1, 1, 2006, "This event is a <a href='mylink.htm'>hyperlink</a>.");

Please note that the linked file must be enclosed with single quotes. Double quotes are already used to enclose the text string itself.

Any HTML tag can be used. For instance, <center> tags could also be used.

How do I get a background image, background color, foreground color or font in an event?
The 6th parameter of the fscEvent function is an optional string containing a CSS Class Name. If the argument does in fact contain as string (not NULL), then the event is display using the corresponding style from the CSS file stylesheet. For example...

fscEvent( 1, 1, 2006, "event with style", null, "scEventRed");

Will display an event on January 1st 2006 with the scEventRed class. This class name is present in the CSS file and contain attributes for controlling the colors of the background and text. Some knowledge of CSS is required to edit the CSS file, so if you don't want to edit the CSS file, you can use the class names provided.

In-line styles are not supported. All styles must referenced by class name and should be placed in the CSS file.

So how do you add new event with custom colors? Follow these steps.

(1) In appropiate scrptcal.css file, create new classnames and styles that you desire. Example...

.CustomColor1 { background-color: #fc9c9c; color: #ffffff; }

(2) Use the new classnames in the 6th parameter of the fscEvent call. Example...

fscEvent( 8, 1, 2005, "my event", null, "CustomColor1" );

How do I get a pop-up window link in a date cell?
The 5th parameter of the fscEvent function is an optional string containing a URL. If the argument does in fact contain as string (not NULL), the event text will be displayed as a hyperlink and destination will be the URL specified. Clicking the link will open the destination URL.

How the destination URL is opened is set by the popupType property. This property is a numeric property. It's value can be one, two, or three. Setting this property controls the popup type of all the events, so you can't mix the behavior.

value	description
1	The URL is opened in a popup, new browser window.
2	The URL is opened in a DIV element, circumventing popup blocking software.
3	The URL is opened as a regular hyperlink in the main browser.

The value of one is the default. This opens the destination URL in a new browser window as a popup. Some aggresive popup blocking software may interpret the popup as an advertisement an prevent it from displaying. The attributes of the popup window are set in the calendar popupProperties property.

To circumvent popup block software, use the value of two to display the destination URL in a DIV tag. The style of the DIV tag is controlled in the CSS file.

Alternatively, you can write javascript in the "text" or "script" parameters of the fscEvent function to do custom popups.

How do I get an image in a date cell?
The 4th parameter of the fscEvent function is a string of text to appear in the specific date cell. This string may contain HTML tags, such as <img src...>. For example, to place an image in the date cell for January 1st 2006,use the following code...

fscEvent( 1, 1, 2006, "<center>preceeding text <img src='myimage.gif'></center>");

Please note that the linked file must be enclosed with single quotes. Double quotes are already used to enclose the text string itself.

Any HTML tag can be used. For instance, <center> tags could also be used.

How do I get get customized text into the "dead" date cells?
The "dead" date cells are the cells of the calendar belonging to previous or next month. By default, nothing is displayed in these cells. In many of the themes provided, the cells themselves are not even displayed. In order to see the "dead" cells, please examine the "original" theme.

What displays in the "dead" cells is determined by the deadCellType property. The property is a numeric value designed for bitwise operations. That means that are three basic types of behavior for the dead cells that you can use and combine. The basic values are...

value	description
1	The Date Number is displayed.
2	The special, non-standard event dates are displayed.
4	The events for the previous and next month are displayed.

You can combine these values to create combinations. For instance, if you set the property to the value of 1+2 or 3, then the Date Number and the non-standard event dates are displayed. A value of 1+2+4 or 7 will display all three things.

A non-standard event date is an event in the scEvent.js that is not a valid date. In the scEvent.js you could have the following event.

fscEvent( 6, 0, 2006, "One day until June 1st.");

Which is not a valid date since 6/0/2006 is not valid. The calendar will interpret this as "one day before before the first of June 2006". If a dead cell is available, this event will display in the date 5/31/2006 for the month of June. It will not appear in May. Thus, a "dead" date cell in June can display information meant only for the month of June. The day value of "-1" will correspond to the date 5/30/2006 and so on. Dates beyond the last day of the month behave the same way, so a day value of "31" for June 2006 will display in the July 1st dead cell for the June month only.

How do I control the month drop-down, the year drop-down, or the previous & next links?
The is a dateSelector property controls the display of the month and year dropdowns as well as the previous and next month links. The property is a numeric value designed for bitwise operations. The values are...

value	description
1	The month drop-down is displayed.
2	The month drop-down is displayed.
4	The previous month link is displayed.
8	The next month link is displayed.
16	The month is displayed as text only.
32	The year is displayed as text only.

By default all selectors are displayed. You can choose to display only the month drop-down by setting the property to the value of 1. You can combine these values to create combinations. You can choose to display both dropdowns by using the value 1+2 or 3. You can choose to display only the previous and next month links by using the value 4+8 or 12. If you'd like the month and year displayed as text, use the value 16+32.

The dateRangeStart and dateRangeEnd control the minimum and maximum values of the year drop-down. You can set these properties to control what dates a user can see.

The prevHtml and nextHtml control what text is displayed in the previous and next month links. These properties accept HTML, so you can use images tags as well as text.

The previous and next month link style is controlled by the CSS file "scSelector" class. The element for the links is a span, so the color and font attributes are the attributes that effect the display.

How do I get the days of the week to begin on Monday?
There is a boolean calendar property beginMonday. The default value of this variable is "false" meaning Sunday will be the first day of the week. If you set this variable to "true", Monday will be the first day of the week.

Please note that the weekday headers are stored in the longDays array property. If you change "beginMonday" to true, you'll also need to change "longDays" array so that Monday will be the first day of the week.

How do I get the week number to appear?
There is a boolean calendar property displayWeekNumber. The default value of this variable is "false" meaning that no week numbers will display. If you can the value to "true", the week numbers are displayed down the left hand side of the calendar. The week number is calculated off of the first day displayed.

The CSS file class "scWeekNumber" controls the style of the week number DIV elements.

How do I change the height or width of the date cells/ calendar?
When using the iframe design of the calendar, the height must be changed in two places. First, set the height in the cellHeight property of the "scrptcal.htm" file. Second, adjust the height attribute of the "iframe" tag in your HTML.

Alternatively, you can control the width using the cellWidth property of the "scrptcal.htm" file. Then adjust the width of the iframe.

The height and width properties of the iframe tag sets exactly how much screen real estate you will give the calendar. If you increase the cellHeight or cellWidth properties the calendar display will become larger. You must account for this in the 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.

You can come up with a rough estimate simply by multipling the 6 rows x 100px cell height = 600px. But then we need to add a little extra for the date selectors, weekday headers and so on. Add 200px to come up with 800px.

How do I get the date cell to expand in order to show all events and event text?
The recommended solution to display all events and event text is to adjust the cellHeight. This was covered in a previous section.

The expandCellHeight property is alternative to this method. Setting this boolean property to True allows the date cell to expand as needed to include all the events. The online demo shows off this property if you check the "standard" and "original" themes.

There are some variations in the way browsers render the calendar with the property set to True. MSIE and Firefox render the calendar properly as expected. Opera and Netscape browsers may not expand the last event style to cover the entire cell. Please be aware of this variation if you use this property.

It is recommended that if you use expandCellHeight that you turn off expandEventStyle. With expandEventStyle set to false, the calendar will not attempt to expand the events, and you should get a consitent look across all browsers.

Note: The expandCellHeight property will not work in MSIE with a DocType declaration tag. DocType declaration tags are used to indicate if the browser should render strict/ w3c compliant css, or if it should render in the browsers own particular flavor of css. The expandCellHeight only works in MSIE in loose CSS mode, and when not rendered as xhtml. So, the only DocType tag that will work is DocType tag that is equivalent to not having a DocType tag at all. That tag is...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

How do I determine what date the calendar is displaying?
You may find it necessary to know what date the user has selected and the calendar is displaying. This is particularly useful when you are using server side scripting to return data to the calendar.

Every time the user selects a new month or new year, the calendar refreshes within the IFrame with a parameter named "scDate". This parameter is a date representing the month and year displayed. The date is in a forward slash notation, for example "10/01/2005" (URL encoded of course, but that is transparent to you). The date always uses the first of the month, since the user can't select a day of the month.

You may add code to the "scrptcal.htm" file (in your choosen theme folder) to react to the "scDate" parameter. For example, you could use this date to only pull back the event data required for that month.

You may also use this to establish an initial date for the calendar. If the Scriptcalendar IFrame tag "src" attribute contains a URL that includes the "scDate" parameter, the calendar will display that date. You can use the "scDate" parameter to display a specific month and year. Please note that the parameter should be URL Encoded.

How do I use the filters?
The concept of the filter is to allow you or your users to display subsets of the events on the calendar. First you define a set of keywords, and these keywords appear as checkboxes along the top of the calendar. When you or a user checks a keyword, the calendar is refreshed and the events corresponding to that keyword are displayed. Conversely, when a keyword is unchecked the events are removed. This is accomplished by using a QueryString parameter "scFilter".

To use the filter on your calendar, you must follow a few steps. One, use the filterNames properties to define keywords as a comma delimited string. For example, the line below creates three keywords.

objCal.filterNames = "weekends,holidays,special";

Two, you must add the keywords to individual events. Each event may only have one keyword. You add a keyword by using the 9th parameter of the fscEvent function. If you do not add a filter keyword to an event, that event will always appear regardless of the filters selected.

Three, you will probably want to have some filtered events showing when the page first displays. Since the filter is accomplished through the QueryString parameter "scFilter", you must edit the iframe url to accomplish the default. Now, the "scFilter" parameter is comma delimited string. Keywords contained with string will display events, those omitted will hide events. Let's look at an example url for the iframe tag (using the keywords above).

scthemes/standard/scrptcal.htm?scFilter=weekends%2Cholidays

This url will have the "weekends" and "holidays" filter events appearing, and the "special" filter events will not appear. You'll note that url must be encoded. When a url is encoded, a comma character is translated into "%2C". Therefore, you when you create the default url, you want to use "%2C" to delimit keywords.

Bear in mind that a space also gets encoded. It is recommended that you choose keywords without spaces or simply remove the spaces from your keywords. This will make it easier to create the url to default the filters.

You can control the style of the filter checkboxes in the CSS. The CSS Section covers the classnames in the CSS and describes what classes control the filter display.

How do I use XML event data or an XSLT transform? Please refer to the XML documentation for information regrading the use of XML data or an XLST Tranform.