How to create a simple dynamic calendar

1) Copy the whole script 1( on below) and paste it between <meta> to </body> on your main html (via your text editor).

2) Copy the whole script 2( under script 1) to your text or html editor and save as 'simplecalendar.js'.

3) Save the 'simplecalendar.js' to the same path as your main html. ( or you can save it on your own path/directory)

4) You are done!

Script 1 (paste the whole code between <meta> to </body> in your main html)
<style type="text/css"><br /><br />.main {<br />width:200px;<br />border:1px solid black;<br />}<br /><br />.month {<br />background-color:#333333;<br />font:bold 11px verdana;<br />color:white;<br />}<br /><br />.daysofweek {<br />background-color:gray;<br />font:bold 12px verdana;<br />color:white;<br />}<br /><br />.days {<br />font-size: 12px;<br />font-family:arial;<br />color:black;<br />background-color: #ffffff;<br />padding: 2px;<br />}<br /><br />.days #today{<br />font-weight: bold;<br />color: red;<br />}<br /><br /></style><br /><br /><br /><script type="text/javascript" src="js/basiccalendar.js"><br /><br /></script> <br /><br /><br /><br /><table width="60%" border="0" cellspacing="0" cellpadding="0"><br /> <caption><br /> Calendar<br /> </caption><br /> <tr><br /> <td><form><br /><select onchange="updatecalendar(this.options)"><br /><script type="text/javascript"><br /><br />var themonths=['January','February','March','April','May','June',<br />'July','August','September','October','November','December']<br /><br />var todaydate=new Date()<br />var curmonth=todaydate.getMonth()+1 //get current month (1-12)<br />var curyear=todaydate.getFullYear() //get current year<br /><br />function updatecalendar(theselection){<br />var themonth=parseInt(theselection[theselection.selectedIndex].value)+1<br />var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)<br />if (document.getElementById)<br />document.getElementById("calendarspace").innerHTML=calendarstr<br />}<br /><br />document.write('<option value="'+(curmonth-1)+'" selected="yes">Current Month</option>')<br />for (i=0; i<12; value="'+i+'">'+themonths[i]+' '+curyear+'</option>')<br /><br /><br /></script><br /></select><br /><br /><br /><div id="calendarspace"><br /><script><br />//write out current month's calendar to start<br />document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))<br /></script><br /></div><br /><br /><br /></form></td><br /> </tr><br /></table><br />

Script 2 (simplecalendar.js)
function buildCal(m, y, cM, cH, cDW, cD, brdr){<br />var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];<br />var dim=[31,0,31,30,31,30,31,31,30,31,30,31];<br /><br />var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st<br />oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st<br /><br />var todaydate=new Date() //DD added<br />var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added<br /><br />dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;<br />var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';<br />t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';<br />for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';<br />t+='</tr><tr align="center">';<br />for(i=1;i<=42;i++){ var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? x="=" x="'<span" id="today">'+x+'</span>' //DD added<br />t+='<td class="'+cD+'">'+x+'</td>';<br />if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';<br />}<br />return t+='</tr></table></div>';<br />}<br /><br />