Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources



Over 2000+ free Javascript
at JavaScriptBank.com Website
Sampled by JavaScriptBank.com This script can be used to create simple calendars on your page like this:

Installation:

  1. First, copy and paste the following line of code in the <HEAD> section of your page:

    <script language="javascript" src="calender.js"></script>

  2. Next, you need to make the script write out the HTML to make the calendar(s). The way they look is based on stylesheets so there aren't too many parameters to pass to the actual calendar creating function. The example at the top of the page was created with the following code:

    <script language="javascript">
    document.write(buildCal(4,2003,"main","month","daysofweek","days",0,1,''));
    </script>

    You set up a set of Javascript tags wherever you want the calender to appear and then put the code to create the calendar inside the document.write() javascript function. This is a little more complex than it needs to be, but it allows a little more flexibility, as I will show later on.

    The highlighted parameters in the example code are explained below:

    4 The month number you want to display; in this case, April.
    2003 The year you want to display; in this case 2003.
    "main" The CSS classname which controls the calendar's size mostly. You can add other items but NS4 may not reflect the settings the way you want.
    "month" The classname which controls how the centered month & year looks.
    "daysofweek" The classname which controls how the day letters look.
    "days" The classname which controls how the day numbers look.
    0 The thickness of the border between all cells. 0=no border.
    1 The starting day of the week. This is so you can set a beginning day other than Sunday. The values are: 1=Sun, 2=Mon, 3=Tue, 4=Wed, 5=Thu, 6=Fri, 7=Sat.
    '' Optional function name. When set to a value other than an empty string, this setting is the arbitrary name of a user-designed function to process the results of clicking the date. The arguments passed to this function are the month, day, and year on the day clicked (in that order). It is up to the user to create a working function. An example of this is found later on in the page. You can use this to update a form element, navigate to a different page, etc. If this value is not required, simply set this to an empty string.

  3. Then, you define four different CSS rules for each section of the calendar and assign them arbitrary (but meaningful) classnames. Below are the CSS classnames and values I used in the example at the top of the page:

    .main {
    width:150px;
    border:1px solid black;
    }     		.month {
    background-color:black;
    font:bold 11px verdana;
    color:white;
    }     		.daysofweek {
    background-color:gray;
    font:bold 10px verdana;
    color:white;
    }     		.days {
    font-size:9px;
    font-family:verdana;
    color:black;
    cursor:default;
    background-color:lightgrey;
    }

    You can pretty much tell what classname goes with which part of the calendar. I suggest you do the same to make it easy for yourself. Just play with the values to get the look you want. Be warned: due to NS4's lackluster CSS support, you may find you can't use some values and have the same look as in IE or NS6. Keep it simple unless you do not care about the people who still use NS4.


More Examples & Advanced Functions



These relatively complex examples were just to show a couple of things you could do with this script if you wanted. The output of the calendar creator is quite modular and was designed for this reason.