« »
This JavaScript displays a month calender on your webpages with current time and event (if have).
Label: Calendar of Events

Demo
Enlarge
Reload
New window
Code
HTML
Print
Copy All x2
<BODY onload=startclock()>
<SCRIPT language=javascript>
<!--

// Calendar variables
var table_bg_color="";
var row_bg_color="";
var cell_bg_color="#99FFFF";
var no_date_cell_color="#99FFFF";
var todays_cell_color="#00FFFF";
var todays_text_color="#0000FF";
var event_text_color="#000066";
var title_text_color="#0000FF";
var days_text_color="#000066";
var date_text_color="#000066";
var table_width="700"
var cell_width="100";
var cell_height="85";

// Calendar events
var c_event = new Array()
	// January
	c_event[1] = new Array("New Year's Day" ,"","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// February
	c_event[2] = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// March
	c_event[3] = new Array("","","","","","","","","","","","","","","","","","","","","","Spring Begins","","","","","","","","","");
	// April
	c_event[4] = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// May
	c_event[5] = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// June
	c_event[6] = new Array("","","","","","","","","","","","","","","","","","","","","Summer Begins","","","","","","","","","");
	// July
	c_event[7] = new Array("","","","United States Independence Day","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// August
	c_event[8] = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
	// September
	c_event[9] = new Array("","","","","","","","","","","","","","","","","","","","","","Autumn Begins","","","","","","","","");
	// October
	c_event[10] = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","Halloween");
	// November
	c_event[11] = new Array("","","","","","","","","","","Veterans Day","","","","","","","","","","","","","","","","","","","");
	// December
	c_event[12] = new Array("","","","","","","","","","","","","","","","","","","","","Winter Begins","","","","Christmas","","","","","","");

function go_back(test_month,test_year)
	{
		location.href="calendar.html?" + test_month + "," + (test_year-1);
	}

function go_forward(test_month,test_year)
	{
		location.href="calendar.html?" + test_month + "," + (test_year+1);
	}

<!--  Clock -->
var timerID = null
var timerRunning = false

function startclock(){
    stopclock()
    showtime()
}

function stopclock(){
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function showtime(){
    var now = new Date()
    var hours = now.getHours()
    var minutes = now.getMinutes()
//    var seconds = now.getSeconds()
    var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
    timeValue  += ((minutes < 10) ? ":0" : ":") + minutes
//    timeValue  += ((seconds < 10) ? ":0" : ":") + seconds
    timeValue  += (hours >= 12) ? " p.m." : " a.m."
    document.clock.face.value = timeValue 
    timerID = setTimeout("showtime()",1000)
    timerRunning = true
}

var test_it=location.search.substring(1);
var info = test_it.split(",");
var data_month=parseInt(info[0],10);
var data_year=parseInt(info[1],10);

var months=new Array("January","Feburary","March","April","May","June","July","August","September","October","November","December");
var the_date= new Date();
var the_month=the_date.getMonth();
var the_date_number=the_date.getDate();
var the_year=the_date.getFullYear();
var the_day=the_date.getDay();

if (location.search.length >0)
	{
		var the_month=data_month;
		var the_year=data_year;
	}

var first_day= new Date(the_year,the_month,1);
var first_day=first_day.getDay();
var short_year=new String(the_year);
var short_year=short_year.slice(2,4);

var day_in_month=31;
if (the_month == 3 || the_month == 5 || the_month == 8 || the_month == 10) { 
	var day_in_month=30;
}

if (the_month == 1) {
	var day_in_month=28;
}

if ( the_month == 1 && ( ((the_year % 4 == 0) && (the_year % 100 != 0)) || (the_year % 400 == 0) ) ) {
	var day_in_month=29;
}	

var day_counter=1;

document.write("<table bgcolor='"+table_bg_color+"' align='center' border='0' width='"+table_width+"' cellpadding='5' cellspacing='1'>");
document.write("<tr height='25'><td colspan='7'>");
document.write("<table bgcolor='"+table_bg_color+"' align='center' border='0' width='"+table_width+"' cellpadding='3' cellspacing='1'><tr bgcolor='"+row_bg_color+"' align='center' valign='top'>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a href='javascript:go_back(" + the_month + "," + (the_year-9) + ")'><font size='-2' face='MS Sans Serif,Arial'>bkwd 10 years</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a href='javascript:go_back(" + the_month + "," + the_year + ")'><font size='-2' face='MS Sans Serif,Arial'>bkwd 1 year</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(00,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial,Arial'>JAN</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(01,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>FEB</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(02,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>MAR</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(03,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>APR</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(04,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>MAY</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(05,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>JUN</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(06,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>JUL</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(07,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>AUG</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(08,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>SEP</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(09,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>OCT</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(10,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>NOV</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a style='text-decoration:none' href='javascript:go_back(11,[the_year+1])'><font size='-2' face='MS Sans Serif,Arial'>DEC</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a href='javascript:go_forward(" + the_month + "," + the_year + ")'><font size='-2' face='MS Sans Serif,Arial'>frwd 1 year</font></a></td>");
document.write("<td bgcolor='"+cell_bg_color+"' align='center' valign='middle'><a href='javascript:go_back(" + the_month + "," + (the_year+11) + ")'><font size='-2' face='MS Sans Serif,Arial'>frwd 10 years</font></a></td>");
document.write("</tr></table></td></tr>");
document.write("<tr height='25'><td bgcolor='"+cell_bg_color+"' align='center' colspan='7'><font size='+2' color='"+title_text_color+"'><b><i>" + months[the_month] + " " + the_year + "</i></b></font></td></tr>");

document.write("<tr height='25'><td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Sunday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Monday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Tuesday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Wednesday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Thursday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Friday</font></td>");
document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='middle'><font color='"+days_text_color+"' size='-2'>Saturday</font></td></tr>");
document.write("<tr height='"+cell_height+"'>");
for (i=0;i<(first_day);i++)
	{
		document.write("<td bgcolor='"+no_date_cell_color+"' width='"+cell_width+"'>&nbsp;</td>");
	}
for (i=first_day;i<7;i++)
	{
		var two_digit_year=new String(the_year);
		var two_digit_year=two_digit_year.slice(2,4);
		var the_date_string = new String(the_month+1) + "/" + new String(day_counter) + "/" + two_digit_year ;

		if (day_counter == the_date_number && the_date.getMonth() == the_month && the_date.getFullYear() == the_year)
			{
				document.write("<td bgcolor='"+todays_cell_color+"' width='"+cell_width+"' align='left' valign='top'><div align='right'><form name='clock' onSubmit='0'><input type='text' name='face' size=5 value=' Initializing...'><font size='-2' color='"+todays_text_color+"'><b>" + ' ' + day_counter + "</b></font></div><br><font color='"+event_text_color+"' size='-2'>" + c_event[the_month+1][day_counter-1] + "</font></td>");
				}

		else
			{
				document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='top'><div align='right'><font color='"+date_text_color+"' size='-2'><b>" + day_counter + "</b></font></div><br><font color='"+event_text_color+"' size='-2'>" + c_event[the_month+1][day_counter-1] + "</font></td>");
				}	
		var day_counter=day_counter + 1;
	}
document.write("</tr>");


for (a=1;a<6;a++)
	{
		document.write("<tr height='"+cell_height+"'>");
		for (b=0;b<7;b++)
			{
				var two_digit_year=new String(the_year);
				var two_digit_year=two_digit_year.slice(2,4);
				var the_date_string = new String(the_month+1) + "/" + new String(day_counter) + "/" + two_digit_year ;

				if (day_counter == the_date_number && the_date.getMonth() == the_month && the_date.getFullYear() == the_year)
					{
				document.write("<td bgcolor='"+todays_cell_color+"' width='"+cell_width+"' align='left' valign='top'><div align='right'><form name='clock' onSubmit='0'><input type='text' name='face' size=5 value=' Initializing...'><font size='-2' color='"+todays_text_color+"'><b>" + ' ' + day_counter + "</b></font></div><br><font color='"+event_text_color+"' size='-2'>" + c_event[the_month+1][day_counter-1] + "</font></td>");
					}

				else
					{
				document.write("<td bgcolor='"+cell_bg_color+"' width='"+cell_width+"' align='center' valign='top'><div align='right'><font color='"+date_text_color+"' size='-2'><b>" + day_counter + "</b></font></div><br><font color='"+event_text_color+"' size='-2'>" + c_event[the_month+1][day_counter-1] + "</font></td>");
					}

				if (day_counter >= day_in_month)
					{
					for (i=b;i<6;i++)
						{
							document.write("<td bgcolor='"+no_date_cell_color+"' width='"+cell_width+"'>&nbsp;</td>");
						}

					var b=7;
					var a=5;
					}

				var day_counter=day_counter + 1;

			}

		document.write("</tr>");	
	}
document.write("</table>");

// -->
</SCRIPT>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->