Javascript Calendar

You have looked at installing the calendar. You have selected a theme, and learned how the calendar properties and the CSS control various features of the calendar.

The next sections will describe how to accomplish some common customization of the calendar.

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.

You change the weekday names that appear above each column in the calendar table. The names are stored in the "longDays" property. This property is an array of strings. Below is the default value of the longDays property.

You could easily change this to be full names instead of abbreviations. Simply set the property equal to a new array of string values.

Similarly, the month names are stored the property "longMonths". Below is the default value of the longMonths property.

The scriptcalendar can support any language you choose. There are only three places where text is displayed, and you change choose the language of that text.

The first place is the month names. As you have seen in the previous section, you can control this text using the "longMonths" property.

The second place is the weekday names. Just like the month names, you can control this text using the "longDays" property.

The final place is the event text. You control the event text in the scevent.js or scspcevt.js files. You create the events, and you decide what language the text of these events will be. Actually adding the events is covered later.

In some countries the week begins on Sunday. In other countries the week begins on Monday.

The Scriptcalendar allows you to control which day the week begins with using the "beginMonday" flag. This property accepts a boolean value. If the value is false, the week begins with Sunday. If it is true, the week begins on Monday. The property is false by default, meaning the week begins on Sunday.

Now, if you change the beginMonday property to true, you also need to adjust the weekday names to match. As you've seen, the weekday names are set in the "longDays" property. TO make the change to start the week on Monday, use this code.

The "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 list below.

By default all selectors are displayed, with the month and year as dropdowns. The default is equivalent to the code below.

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. These properties accept an integer value. You can set these properties to control what dates a user can see.

The "prevHtml" and "nextHtml" properties control what text is displayed in the previous and next month links. These properties accept string values. You may use HTML with the string, so you can use images tags as well as text. By default the values equivalent to the code below.

The previous and next month link style is controlled by the CSS file "scSelector" class. The HTML element for the links is a span. If you edit this class, you can change the font or colors of these links.

The scriptcalendar software is 100% javascript. Javascript has the built in limitation where it cannot read or write files on the server. This includes databases. There is no way to manage your events online with a javascript solution.

The scriptcalendar works by including the scevent.js and spspcevt.js files that conatin event data from the scrptcal.htm file. The main calendar engine scrptcal.js is also included. The scevent.js is a list of function calls. The function called is contained within the main engine. The scspcevt.js is itself a function, and it is called my the main engine.

The point is that these files containing the event data must exist on the server when the calendar is loaded. There is no way for the javascript solution to read data from a database or any other format.

You must manage your events somewhere else, probably in a text editor on your local machine. When you are ready to post updated events, you upload these files to the web server.

The event editor assists you with writing events. But it is still an offline tool. You manage your events, save them to a file, and then upload the file to server.

If you use the XML event format, the xml is loaded through an ajax-like process. But the xml event file must also exist before the calendar is loaded.

If you have server side scripting, like .NET or Java or PHP, you can generate the event data files from a database. A method of doing would be to change the include of the scevent.js to point to a page like scevent.aspx, scevent.jsp or scevent.php and have the events generated.

There is a example on the Scriptcalendar website of such a page in C#. The example uses the method above to generate the event file on demand by using scevent.aspx. There is also a page allowing you to manage the events online. You are free to download this code, study it and adapt to your needs. However, there is no method included with calendar to manage events online.

You add standard events to the calendar using the scevent.js file. A standard event is and event that occurs on a specific date. You simply want that event to appear in the calendar on that day.

The primary way of adding events is using the scevent.js file. This file is nothing more that a list of calls to a function of the Scriptcalendar engine. 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 to the file, you first need to open it for editing. Windows notepad is an simple text editor and works well. You can use whatever editor you like.

Simply add a new call to the fscEvent function to the file. The call must be correct javascript code. For example, to a new event for January 1st 2010, add this code.

You'll note that some of the parameters are missing. Since all the parameters after the EventText parameter were NULL, we just omitted them. This would be same as the call below.

To edit an event, locate it the file and change the fscEvent call as necessary.

To remove an event, locate it the file and delete the code for it.

When you are finished editing the scevent.js, you must upload it to your web server. Save the changes on your local machine, and then FTP it to the proper folder on your web server.

Again, the scevent.js file must be comprised of valid javascript code. It will cause a javacript error if the syntax is incorrect. There is an event editor tool described later on in this guide that will assist you constructing valid javascript.

Here is a example of an entire, short scevent.js file. It only has events in January 2010.

// ********* ********* ********* ********* ********* ********* ********* ********* *********
// Define Events
// call the fscEvent function
// 
// #  PARMS		DATA TYPE	DESCRIPTION
// 1  m			number		2 digit month (1=jan, 2=feb, 3=mar,... 12=dec)
// 2  d			number		2 digit day
// 3  y			number		4 digit year
// 4  text		string		HTML event text
// 5  link		string		URL for popup window
// 6  style		string		CSS class for the event (in-line style is invalid)
// 7  tooltip		string		text for hover over tooltip
// 8  script		string		javascript to execute during onMouseDown
// 9  filter		string		keyword to allow users to filter events
// ********* ********* ********* ********* ********* ********* ********* ********* *********
			
	
fscEvent( 1, 19, 2010, "Custom color event example", null, "scEventRed", null, null );
		
fscEvent( 1, 20, 2010, "Custom color event example", null, "scEventOrange", null, null );
	
fscEvent( 1, 28, 2010, "multiple events", null, "scEventRed", null, null );
fscEvent( 1, 28, 2010, "multiple events", null, "scEventOrange", null, null );
fscEvent( 1, 28, 2010, "multiple events", null, "scEventYellow", null, null );
fscEvent( 1, 28, 2010, "multiple events", null, "scEventGreen", null, null );
fscEvent( 1, 28, 2010, "multiple events", null, "scEventBlue", null, null );
fscEvent( 1, 28, 2010, "multiple events", null, "scEventPurple", null, null );
		

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. For example...

Will place three events in the January 1st 2010 date. They will appear in the order above.

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 properties.

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. Please see the section on control the calendar size for more details.

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.

You may demonstrate an event spaning several days by coding an event for each day. Using a color to unify the event helps identify it as spanning multiple days.

For example, the code creates an event on each day between 1/1/2010 and 1/3/2010. the style parameter and the scEventRed class name are used to provide a unifying color.

Monthly events are events that occur on the same day each month. Yearly events are events that occur on the same day each year. Events that occur on these regular schedules can be represented in the scevent.js file

A good example of a yearly event is Christmas day. It occurs on December 25th each year. Other examples are New Years day, the Fourth of July and your birthday.

You can write an event to occur year by passing the year parameter of the fscEvent call as null. For example, the event below occurs every Christmas.

An event that occurs every month can also be represented by passing the month parameter as null. For example, imagine you have a business where the end of the month processing occurs the 3rd day of each new month. You could write an event like the code below.

Many times it is better to write holidays and reocurring event as special events, which are discussed later. The reason is you can't use this method to represent Thanksgiving, which changes each year.

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 below.

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.

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

The 6th parameter of the fscEvent function is an optional string containing a CSS Class Name. This parameter is called the style parameter. 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, see the event below.

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.

Follow these steps to add new event with custom colors.

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

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

The 4th parameter of the fscEvent function is a string of text to appear in the specific date cell. This is called the EventText parameter. The string value may contain HTML tags.

For example, to place an image in the date cell for January 1st 2010, use the following code.

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 tags can be used. For example, to place a hyperlink in the date cell for January 1st, 2010, use the following code.

The 5th parameter of the fscEvent function the popupLink parameter. It 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 1, 2 or 3. Setting this property controls the popup type of all the events, so you can't mix the behavior.

The value of 1 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 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.

Adding a tooltip is great way way to display extra information to your visitors. It's also a good way to make an event stand out against a busy calendar.

There are two types of tooltips. Type one is the standard "title" attribute tooltip of a div tag. This is a very plain tooltip. You cannot control the colors, font sizes, use html or determine how long it is visible.

The second type is a div tooltip. This is a tooltip added by the third party javascript library overlib.js. With this type of tooltip, you control the colors and fonts in the scrptcal.css. You can use html. The tooltip is visible as long as the mouse hovers over the event.

The type is controlled by the tooltipType property. The default type is type two, the overlib.js tooltip.

You can specify exactly what you want to appear in the tooltip of every event by using the 7th argument of the fscEvent call. This is the tooltip argument. If you use type 2 tooltips, you can put html in the text argument and it will be used on the tooltips. If you use type 1, use only plain text in the arugment.

When you use type 2 tooltips, you can configure the events to reuse the event text in the tooltip when the tooltip argument is empty. Every event will have a tooltip. Events with a tooltip argument will use the tooltip argument html. Events without tooltip arguments will use the the event text for the tooltip. You can control this the property tooltipUseEventText which is a boolean value.

You can control the fonts and colors of the type 2 tooltip in the scrptcal.css. There are classes beginning with "scTooltip" that are used to configure the tooltip div. The .scDivTooltipBackground and .scDivTooltipForeground are table elements. The .scDivTooltipFont is the inner div of the tooltip. This class is where you should put most of your styles.

The overLIB is a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around your website. It can be used to provide the user with information about what will happen when they click on a link as well as navigational help. Not to mention that it looks cool, is stable, and has an active developer community to boot!

The overlib.js homepage http://www.bosrup.com/web/overlib/

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 editor constructs the proper javascript syntax for the scevent.js file. When you use the editor, you will always have valid javascript for your 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...

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

Insert an Event

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

Update an Event

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

Delete an Event

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

Get the scevent.js output

1. Locate the blue form containing data inputs at the bottom right of the page.
2. Click the View Output button.
3. Copy Output textarea with the formatted output to the clipboard.
4. 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.

You may have events that reoccur every week. You may also have holiday events that don't fall on a specific date, like Easter or Thanksgiving. For these events, you would want to use the special event file, the spspcevt.js

The spspcevt.js is a javascript function that gets called when a date is rendered in the calendar. This gives you a chance to programmaticly add events as the calendar renders. You can harness the full power of javascript to create reoccuring or holiday events.

To write code to insert an event, you are going to need to know which date is being rendered. The main calendar engine passes in the date as each date is rendered. The function then constructs several local variables to assist you writing events. Those variables are below.

Now that you have the information on what date is being rendered, you can construct events. Below is an example of a single event being rendered in a single date. Normally, you would do a simple event like this in the scevent.js, so this is illustrative only. More complex examples will follow.

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.

Thanksgiving, Memorial day and Easter are difficult to code in the scevent.js file. These holidays don't happen on the same day every year like Christmas. The best way to handle these holidays in the spspcevt.js file.

Thanksgiving occurs on the 4th Thursday in November. In order to represent it, we must check for three things.

• The month is November
• It is the 4th week of the month
• The weekday is Thursday

You perform all of these checks using the code below. The code relies on the variables provided within the spspcevt.js that are based on the date being rendered.

Memorial Day is the last Monday in May. You can perform a similar check for it. Below is the code for a Memorial day event.

A much trickier holiday is the Easter holiday. To make it easier, the Scriptcalendar will provide the Easter holiday date in the variable dteEaster with the spspcevt.js. The variable gets the data from the calendar engine in a function named fscEaster. The year is passed into this function.

When you know the Easter holiday, you can also determine a date for Mardi Gras and Ash Wednesday.

Another use for the scspcevt.js is to code reoccuring events. For example, you could have an event that happens the 2nd Monday of every month. The following is an example of how to write such an event.

The code relies on the variables with the scspcevt.js function that are based on the date being rendered.

Another example is an event that occurs on the 1st and 3rd Sunday of each month.

You may have a need to write an event that spans two months or several months. The reoccuring code already presented is inadequate for such events.

Instead, you need to turn to a concept called a "ymd" date. Ymd stands for year-month-day. It means that instead of writing a date like 01/01/2010, you write it year first, follwed by the month and finally the day. The same date becomes 2010-01-01. Last, we can remove the dashes to have the number 20100101.

When you write dates in this ymd format, you can do numeric comparisons. Like 12/31/2008 is less than 01/01/2009 ( 20081231 < 20090101) or 5/1/2009 is less than 9/20/2009 (20090501 < 20090920).

You change the date being rendered to the ymd numeric date in the spspcevt.js. The date passed to the scspcevt.js is the "dte" variable. To translate this javascript date into a ymd numeric value, you can call a method on date values. This method is added by the Scriptcalendar engine. Please see the the code below.

Now you can use this ymd numeric to your advantage. Imagine you need an event from 5/1/2009 through 9/20/2009. We can translate these values in ymd numeric values. They become 20090501 and 20090920 respectively. To check if we are in the range, we just compare the numeric values.

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 scriptcalendar will often run only when there is no DocType at all. Please use the loose DocType if you must have one.