A Calendar

This script displays a calendar using the current date by default. It requires 3 files, one for extracting the date from the query string, another one containing the CSS and the last the function used to generate the calendar.

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

calendar.html

Here is the page launching the calendar - store the content inside an html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Calendar</title><meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javascript" src="calendar.js"></script><link href="calendar.css" type="text/css" rel="stylesheet" /></head><body><script type="text/javascript">var getvars = new Array();var queryvars = location.search.substr(1).split("&");for (var i=0; i< queryvars.length; i++){	var myvar = queryvars[i].split("=");	getvars[myvar[0]]=myvar[1];}//Check if there are query strings and if the fields are valid:if(getvars['day'] <= 31 &&  getvars['day'] > 0 && getvars['month'] <= 12 &&  getvars['month'] > 0 && getvars['year'] > 1970){	var month= getvars['month'];	var day= getvars['day'];	var year= getvars['year'];}else{	var thedate= new Date();	//The value returned by getMonth() is a number between 0 and 11	var month= thedate.getMonth()+1;	var day= thedate.getDate();	var year= thedate.getFullYear();}document.write(buildCalendar(month,year,day));</script></body></html>

download the file

calendar.js

The javascript code with the function - Store the content inside calendar.js

function buildCalendar(m, y, dda){	//You can change these data depending on your language...	var daysofweek= "sunmontuewedthufrisat";	var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];	var dim=[31,0,31,30,31,30,31,31,30,31,30,31];	m= parseInt(m);	y= parseInt(y);	dda= parseInt(dda);	var mmm= m + 1;	var amm= m - 1;	var yyy= y;	var ayy= y;	//Does the next month means a new year:	if(mmm == 13)	{		mmm=1		yyy=y+1;	}	if(amm == 0)	{		amm=12;		ayy=y-1;	}	//http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Date	var lastmonth = new Date(y, m-1, 1);	var lastmonthday=lastmonth.getDay()+1;	var todaydate=new Date();	var scanfortoday= (y == todaydate.getFullYear() && m == todaydate.getMonth()+1)?todaydate.getDate():0;	scanfortoday=dda;	// Leap year - http://en.wikipedia.org/wiki/Leap_year	dim[1]=(((lastmonth.getFullYear()%100 != 0) && (lastmonth.getFullYear()%4==0)) || (lastmonth.getFullYear()%400 == 0))?29:28;	//The designed calendar - look at the css file	var returnval='<div class="main"><table class="main" cols="7" cellpadding="0" border="0" cellspacing="1"><tr align="center">';	returnval+='<td colspan="7" align="center" class="month"><a href="?day=1&month=' + amm + '&year=' + ayy + '">&larr;</a> '+ mn[m-1]+ ' - ' + y + ' <a href="?day=1&month=' + mmm + '&year=' + yyy + '">&rarr;</a></td></tr><tr align="center">';	for(s=0;s<21;s+=3)	returnval+= '<td class="daysofweek">' + daysofweek.substr(s,3) + '</td>';	returnval+= '</tr><tr align="center">';	for(i=1;i<=42;i++)	{		var x=((i-lastmonthday>=0) && (i-lastmonthday<dim[m-1]))? i-lastmonthday+1 : '';		if (x == scanfortoday)		x='<span id="today">' + x + '</span>';		else		x='<a href="?day=' + x + '&month=' + m +'&year=' + y + '">' + x + '</a>';		returnval+= '<td class="days">' + x + '</td>';		if(((i)%7==0) && (i<36))		returnval+= '</tr><tr align="center">';	}	return returnval+='</tr></table></div>';}

download the file

calendar.css

The css code for the template - Store the content inside calendar.css

.main {font-size:14px;}.month {font-weight:bolder;color:#666666;}.daysofweek {font-weight:bolder;color:#666666;text-decoration:underline;width:20px}.days {color:#666666;border:1px solid #666666;}.days #today{font-weight:bold;background-color:#cccccc;width:20px}.days a{text-decoration:none;color:#666666;}

download the file

- You can apply a different template by modifying the css code;
- More information about the leap date here: Wikipedia;
- For date manipulations, you can refer to this site;

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

A Calendar

A Calendar

Webmaster Corner

Categories