Faq-O-Matic Faq-O-Matic : Trash : Playground :
javascript calendar howto
CENTER/CENTER <script language="JavaScript"> <!-- Hide from view Months = new Array(12); Months[0] = "January"; Months[1] = "February"; Months[2] = "March"; Months[3] = "April"; Months[4] = "May"; Months[5] = "June"; Months[6] = "July"; Months[7] = "August"; Months[8] = "September"; Months[9] = "October"; Months[10] = "November"; Months[11] = "December"; function PadSpaces(TheString) { var Spaces = " "; len = Math.round((9 - TheString.length)/2); return Spaces.substring(0,len) + TheString; } function NumLeapYears(StartYear, EndYear) { var LeapYears, i; if (EndYear >= StartYear){ for(LeapYears = 0; StartYear <= EndYear; StartYear++) if (IsLeapYear(StartYear)) LeapYears++; }else{ for(LeapYears = 0; EndYear <= StartYear; EndYear++) if (IsLeapYear(EndYear)) LeapYears++; } return LeapYears; } function IsLeapYear(Year) { if(Math.round(Year/4) == Year/4){ if(Math.round(Year/100) == Year/100){ if(Math.round(Year/400) == Year/400) return true; else return false; }else return true; } return false; } function Trim(TheString) { var len; len = TheString.length; while(TheString.substring(0,1) == " "){ //trim left TheString = TheString.substring(1, len); len = TheString.length; } while(TheString.substring(len-1, len) == " "){ //trim right TheString = TheString.substring(0, len-1); len = TheString.length; } return TheString; } function DetermineMonthIdx() { var i, month, month_s, len; month = Trim(document.calform.elements[4].value); len = month.length; for( i = 0; i <12; i++){ month_s = Months[i].substring(0,len); if (month_s.toUpperCase() == month.toUpperCase()) return (i); } return -1; } function FindNewYearStartingDay(Year) { var LeapYears, Years, Day; LeapYears = NumLeapYears(1995, Year); if (Year >=1995) Years = (Year -1995)+LeapYears; else Years = (Year -1995)-LeapYears; if (Year >=1995) Day = Math.round(((Years/7 - Math.floor(Years/7))*7)+.1); else Day = Math.round(((Years/7 - Math.ceil(Years/7))*7)-.1); if (Year >=1995){ if(IsLeapYear(Year)) Day--; }else Day += 7; if(Day < 0) Day = 6; if(Day > 6) Day = 0; return Day; } function FindNumDaysInMonth(Year, Month) { if(Month == 1){ if(IsLeapYear(Year)) return 29; else return 28; }else{ if(Month >6) Month++; if(Month/2 == Math.round(Month/2)) return 31; } return 30; } function FindMonthStartDay(NewYearDay, Year, Month) { var MonthStartDay; AddArray = new Array(12); AddArray[0]=0;AddArray[1]=3;AddArray[2]=3;AddArray[3]=6; AddArray[4]=1;AddArray[5]=4;AddArray[6]=6;AddArray[7]=2; AddArray[8]=5;AddArray[9]=0;AddArray[10]=3;AddArray[11]=5; MonthStartDay = NewYearDay + AddArray[Month]; if(IsLeapYear(Year) && (Month ) > 1) MonthStartDay ++; if (MonthStartDay > 6) MonthStartDay -= 7; return MonthStartDay; } function FillCalendar() { var Year, Month, Midx, NewYearDay, MonthStartDay; var NumDaysInMonth, i, t; Year = parseFloat(document.calform.elements[1].value); Month = document.calform.elements[4].value; Midx = DetermineMonthIdx(); if (Midx == -1){ alert ("Can't recognize that month"); return; } NewYearDay = FindNewYearStartingDay(Year); MonthStartDay = FindMonthStartDay(NewYearDay, Year, Midx); NumDaysInMonth = FindNumDaysInMonth(Year, Midx); for(i = 6; i < 43; i++){ t = i-5-MonthStartDay; if ( t >= 1 && t <= NumDaysInMonth) document.calform.elements[i].value =t; else document.calform.elements[i].value = ""; } } function IncDecYear(val) { var valNum = parseInt(val); var valNum2 = parseInt(document.calform.elements[1].value) document.calform.elements[1].value = valNum2 + valNum; FillCalendar() } function IncDecMonth(val) { var valNum = parseInt(val); var Midx = DetermineMonthIdx(); Midx += valNum; if(Midx > 11) Midx = 0; if(Midx < 0) Midx = 11; document.calform.elements[4].value = PadSpaces(Months[Midx]); FillCalendar() } // --> /script <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="PURPLE" ALINK="PURPLE"> center <table border=1 bgcolor="#000000" cellpadding=1 cellspacing=1>tr<td align=center> <table border=0 cellpadding=0 cellspacing=0> <form name="calform"> tr <td align=center cellpadding=0 cellspacing=0 bgcolor="#000000"> <input type=button value="<<" onClick="IncDecYear(-1)">/td <th cellpadding=0 cellspacing=0 bgcolor="#aaaaaa" colspan=5 align=center> <input size=4 type=text value="1993">/th <td align=center cellpadding=0 cellspacing=0 bgcolor="#000000"> <input type=button value=">>" onClick="IncDecYear(1)">/td /tr tr <td align=center bgcolor="#000000"> <input type=button value="<"onClick="IncDecMonth(-1)"/td <th bgcolor="#aaaaaa" colspan=5 align=center> <input size=9 type=text value=" January ">/th <td align=center bgcolor="#000000"> <input type=button value=">>"onClick="IncDecMonth(1)">/td /tr tr <th bgcolor="#ffcccc">S/td <th bgcolor="#ccccff">M/td <th bgcolor="#ccccff">T/td <th bgcolor="#ccccff">W/td <th bgcolor="#ccccff">T/td <th bgcolor="#ccccff">F/td <th bgcolor="#ccccff">S/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#ccccff" ><input type=text size=2>/td /tr tr <td bgcolor="#ffcccc"><input type=text size=2>/td <td bgcolor="#ccccff"><input type=text size=2>/td <td bgcolor="#aaaaaa" colspan=5><input type=text>/td /tr /form /table /td/tr/table /center <script language="JavaScript"> <!-- //include this script segment if you want to set the calendar to today's date. //this MUST come after the tabled form which contains the calendar //set calendar to today's date myDate = new Date(); var Month = parseInt(myDate.getMonth()); document.calform.elements[1].value = 0 + myDate.getYear(); document.calform.elements[4].value = PadSpaces(Months[Month]); document.calform.elements[43].value = "Today: " + Months[Month].substring(0,3) + " " + myDate.getDate() + ", " + (0 + myDate.getYear()); FillCalendar(); // --> /script
New Item