A Calendar

javascript - A Calendar

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.

Copy and paste the following codes into your editor and run it (code comments are included).
If you want to see the live result, try it here (new window).

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>

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 + '">←</a> '+ mn[m-1]+ ' - ' + y + ' <a href="?day=1&month=' + mmm + '&year=' + yyy + '">→</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>'; }

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; }

Notes:
- 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;

Comments

You are welcome to post comments onto this Webmaster forum - javascript