Calender Javascript

Javascripts > Javascript Calendars > Calender

Script Title: Calender

Description: It may seem to be quite a task, but creating a calendar on a Web page is not as hard as you might think. Below you can select any month and year of which to view.

Example: Available

S M T W T F S

Copy the following code into your <HEAD></HEAD> tags.

<SCRIPT LANGUAGE="JavaScript"> // (c) Copyright Chad Johnson, 2002 // http://www.coolnessdhtml.com/ // muska_10@hotmail.com // Length of months in days var monthLen = new Array(31,28,31,30,31,30,31,31,30,31,30,31); // Function to display selected month function DisplayMonth(yy, mm) { currentDate = new Date(yy-1, mm-1); firstDay = currentDate.getDay(1) + 1; // First day of the week in the month // Account for leap years if (mm == 2 && yy % 4 == 0) monthLen[1] = 29; else monthLen[1] = 28; if (mm > 2 && yy % 4 == 0) firstDay++; // Display each day of month for (i=1; i<=42; i++) { if (i > firstDay && ((i-firstDay) - 1 < monthLen[mm-1]) && firstDay != 7) // Write data to cell eval('cell' + i + '.innerText = ' + (i-firstDay)); else if (firstDay == 7 && (i - 1 < monthLen[mm-1])) // First day is on Sunday of first week eval('cell' + i + '.innerText = ' + i); else // Make cell empty if no data to write eval('cell' + i + '.innerText = " "'); } } // Display current year and month function init() { today = new Date(); curYear = today.getYear(); curMonth = today.getMonth() + 1; monthVal.options.selectedIndex = curMonth - 1; yearVal.value = curYear; DisplayMonth(curYear, curMonth); } window.onload = init; </SCRIPT>

Copy the following code between the <BODY></BODY> tags of your html page.

<TABLE BORDER=1 CELLSPACING=0 BGCOLOR="#ABABAB"> <TR> <TD ALIGN="center"> <SELECT ID="monthVal" onchange="DisplayMonth(yearVal.value, this.options(this.options.selectedIndex).value)"> <OPTION VALUE="1">January</OPTION> <OPTION VALUE="2">February</OPTION> <OPTION VALUE="3">March</OPTION> <OPTION VALUE="4">April</OPTION> <OPTION VALUE="5">May</OPTION> <OPTION VALUE="6">June</OPTION> <OPTION VALUE="7">July</OPTION> <OPTION VALUE="8">August</OPTION> <OPTION VALUE="9">September</OPTION> <OPTION VALUE="10">October</OPTION> <OPTION VALUE="11">November</OPTION> <OPTION VALUE="12">December</OPTION> </SELECT> </TD> <TD ALIGN="center"> <INPUT ID="yearVal" TYPE="text" SIZE=4 MAXLENGTH=4 onblur="DisplayMonth(this.value, monthVal.options(monthVal.options.selectedIndex).value)"> </TD> </TR> <TR> <TD COLSPAN=2 ALIGN="center"> <TABLE BORDER=1 CELLSPACING=0> <TH BGCOLOR="#004E98">S</TH> <TH BGCOLOR="#004E98">M</TH> <TH BGCOLOR="#004E98">T</TH> <TH BGCOLOR="#004E98">W</TH> <TH BGCOLOR="#004E98">T</TH> <TH BGCOLOR="#004E98">F</TH> <TH BGCOLOR="#004E98">S</TH> <TR> <TD ID="cell1" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell2" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell3" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell4" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell5" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell6" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell7" ALIGN="center" BGCOLOR="#EBEBEB"></TD> </TR> <TR> <TD ID="cell8" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell9" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell10" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell11" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell12" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell13" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell14" ALIGN="center" BGCOLOR="#CDCDCD"></TD> </TR> <TR> <TD ID="cell15" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell16" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell17" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell18" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell19" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell20" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell21" ALIGN="center" BGCOLOR="#EBEBEB"></TD> </TR> <TR> <TD ID="cell22" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell23" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell24" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell25" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell26" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell27" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell28" ALIGN="center" BGCOLOR="#CDCDCD"></TD> </TR> <TR> <TD ID="cell29" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell30" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell31" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell32" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell33" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell34" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell35" ALIGN="center" BGCOLOR="#EBEBEB"></TD> </TR> <TR> <TD ID="cell36" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell37" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell38" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell39" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell40" ALIGN="center" BGCOLOR="#CDCDCD"></TD> <TD ID="cell41" ALIGN="center" BGCOLOR="#EBEBEB"></TD> <TD ID="cell42" ALIGN="center" BGCOLOR="#CDCDCD"></TD> </TR> </TABLE> </TD> </TR> </TABLE>

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!