Events Calendar ~ Tested in IE6.0, Netscape7.02, Netscape8.0.3.3, Opera8.50 and Firefox1.0.6

A n Events Calendar script that, along with the current month calendar, displays important events for specific dates. Click on a relevant date, and a description of the event associated with it is shown. The events are stored in an external .js file.
[ Events Calendar ]

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.50, Netscape7.02 and Netscape8.0.3.3. This script worked well in all platforms with the exception of Opera8.50 where the calendar would only show the first fifteen (15) days of any month selected. Grab the below link to see a screen capture of how it does not work correctly in Opera8.50.
[ Screen Capture Of Events Calendar In Opera8.50 ]

T he entire script comes in a zip file with graphics (8), complete HTML document and an external .js file (events.js). The first thing you need to do is download the zipfile to somewhere on your computer that has easy access. We always download to our desktop. Then we extract all the files to a new folder on our desktop. Now is when the fun starts. First you need to upload all the graphics to your directory. The way the HTML document is setup, all the graphics would go into your /images directory. You can select a different directory but then you would have to reconfigure the path that all the images are being called from in two different parts of the script (both in the <HEAD> section of the code). "We Suggest" that you just upload the images into your /images directory because of all the reconfigurations you would have to do to change directories from where the images would be called.

First Part Where You Would Reconfigure

/* The path of images to be preloaded inside parenthesis: (Extend list as desired.) */
preloadimages
("images/PrevYrOff40x40.jpg","images/PrevYrOn40x40.jpg","images/PrevMoOff40x40.jpg", "images/PrevMoOn40x40.jpg","images/NextYrOff40x40.jpg","images/NextYrOn40x40.jpg", "images/NextMoOff40x40.jpg","images/NextMoOn40x40.jpg");

G rab the below link to see just how many more places within the <HEAD> section of the code you would have to reconfigure the different directory.
[ Second Part Where You Would Reconfigure ]

T he next thing you need to do is to upload the events.js file into your main, root or top directory. This you can change to any directory you want but then you have to reconfigure where it would be called from. We have our .js files in a separate directory called /jscripts. If you do not know howto or need a little refresher, see below:

* If you are going to upload the events.js into a different directory than where this effect will be, then you need to reconfigure the below part of the code to reflect where this external script needs to be called from. For example, if you upload this .js script into a directory called "jscsripts", then the below code would have to reflect this change. This reconfiguration is also in the <HEAD> section of the code just below the closing </style> tag.

Default

</style>

<script language="JavaScript" type="text/javascript" src="events.js"></script>

Reconfigured

</style>

<script language="JavaScript" type="text/javascript" src="jscripts/events.js"></script>

N ow lets explain the CSS* <style> </style> sheet also in the <HEAD> section of the HTML document. All this does is set your colors and font style/size for links and mouseovers within the script. These you need to play around (if you want) with if you want to change them to suit your site.

* Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

<title>Calendar of Events</title>
<style type="text/css">

#evtcal a:link {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400;
text-decoration: none;} /* unvisited link */
#evtcal a:visited {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400;
text-decoration: none;} /* visited link */
#evtcal a:hover {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400;
text-decoration: underline;} /* mouse over link */
#evtcal a:active {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400;
text-decoration: none;} /* selected link */

</style>

Note of Importance ~ Notice on the above <style> sheet the use of three (3) different font styles.("Arial", "Helvetica", "Sans Serif"). Reason being is quite simple. It is proper HTML coding to use three different styles because not all systems have the designated font style. This gives the system a choice to find the first style available.

* On the below link when you click on the HTML document (which by the way has an extention of htm), it will open to view the Events Calendar. Once this opens, now you need to get the source code to copy and paste into your document. (Top of browser window select "View", then select "Source"). The little icon will be called "evtcalendar HTML Document 17KB".

T he next thing we shall cover is the onload event handler that goes directly into the <BODY> tag. On the default HTML document, [ one of the files included in the zip file ]* you downloaded the <BODY> tag is possibly incomplete if you are going to have anything else on the page with it. See below:

T he way the above default <BODY> tag is configured, it has a lack of any color, link, text etc. This is fine if you want it as is with nothing else on the page. If you want text, links etc., then you must have a completely defined <BODY> tag. See below.

I n the above reconfigured <BODY> tag, you would replace the "?" with the prefix of # and a 6 digit HEX code. If you need a good color chart (it is the same one we use) grab the below link and you are there. This is a small(485 kb) "Freeware" program that works in Windows: 98/ME/NT/2000/XP.
[ Visual Color Picker ]

T here is one way in which you can have this effect so it does not interact with your entire page. That way is to just place this effect on a page by itself, and have a link calling the page. To achieve this in a very professional manner, you would need a javascript link (as opposed to a regular text hyperlink where the whole page opens) that you could adjust the size of the page that opens so it would not be so obtrusive when it opens. See below:
[ Events Calendar ]

T he below is the code you need to copy and paste into your document where you want it to appear.

N otice all the zero's (0) in the above code. This denotes that each of the attributes attached will "Not" be visible. If you change the zero to a one (1), it would make that attribute visible. See the below example where we have all attributes set to one 1.
[ Compare Events Calendar With Attributes Set To 1 ]

T he width=630 and height=500 are the size in pixels that the pop-up* window will be upon opening. The Path To Events Calendar and Link Name Here are basically self-explanatory.

* Since this little script is in essence a "Pop-up", many people do have a blocker for this sort of window. It may be advisable to add a little note that if the window does not open to press and hold the "ctrl" key while clicking on the link.
[ Events Calendar ]

I f you notice as you place your cursor over the above link, a little message appears to notify you about holding the ctrl key down while selecting the link. To add this into the little javascript pop-up window, see below:

<A HREF="javascript:void(0)" ONCLICK="open('Path To Your Events Calendar','myannouncer','toolbar=0,scrollbars=0,location=0,resizable=0,width=630, height=500')"title=" Your Message Here">Events Calendar</A>

I n other words, you are adding a title=" " attribute into the code. Be sure you place it exactly where we have it or the link(s) and the little message will "Not" work. Think of this little title=" " attribute as an "alt" tag for text links.

Note of Importance ~ This javascript makes use of both the single apostrophe (') and the quotation (") mark. Be sure not to change them from their original locations or it will again "Not" work.

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the effect "Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/eventscalendar.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/eventscalendar.html/

S elect the above links to see what we are explaining about the Correct and Incorrect URL address.

Note of Professionalism in reference to the pop up window. It elevates your site's level of professionalism by adding the little "Close Window" button or link on the linked-to page (If it is to open in a new browser window). It may not seem like much but little things such as this stick in people's minds as a little convenience not required but done anyway. Below are the codes for the link, button and a linkto another page for the effect of closing the page by clicking on a graphic. These codes are placed anywhere in the <BODY> section of your document you want it to appear.

CLOSE WINDOW FORM BUTTON

<form>
<input type=button value="Close Window" onClick="javascript:top.window.close();">
</form>

CLOSE WINDOW LINK

<a href="javascript:window.close();">Close Window</a>

[ Close Window ]

[ Linkto Close Window By Clicking Graphic ]

T he last thing we shall cover is that of reconfiguring the events.js external script. This can be done to add or delete any of the events already installed. We do have to advise you that the reconfiguration process for this is not for anyone who is not well heeled in javascript. It is not for a novice or someone who really does not have a good working knowledge of HTML and javascript. Right on the top of the .js script there is a warning from the author "// Please Edit with Care.". in all actuality, unless really necessary, you should just leave it as is.

I f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[ Get Code Here ] [ Rate This Page ]