Cut & Paste Any Month calendar

Home / Free JavaScripts / Clocks, Calendars, And Timers / Here

Cut & Paste Any Month calendar

Description: This unique calendar, constructed using a textarea, enables you to look up the calendar for any month of any year! Use the drop-down menu to select the desired month. Quite exceptional.

Example:

Select-A-Month

Directions

Step 1: Insert the below script into the <HEAD> section of your page:

<SCRIPT LANGUAGE="JavaScript"> /* Any-Month calendar script- Rob Patrick (rpatrick@mit.edu) Script featured on and available at: http://www.javascriptkit.com/ */ function setToday() { var now = new Date(); var day = now.getDate(); var month = now.getMonth(); var year = now.getYear(); if (year < 2000) // Y2K Fix, Isaac Powell year = year + 1900; // http://onyx.idbsu.edu/~ipowell this.focusDay = day; document.calControl.month.selectedIndex = month; document.calControl.year.value = year; displayCalendar(month, year); } function isFourDigitYear(year) { if (year.length != 4) { alert ("Sorry, the year must be four-digits in length."); document.calControl.year.select(); document.calControl.year.focus(); } else { return true; } } function selectDate() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; displayCalendar(month, year); } } function setPreviousYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year--; document.calControl.year.value = year; displayCalendar(month, year); } } function setPreviousMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 0) { month = 11; if (year > 1000) { year--; document.calControl.year.value = year; } } else { month--; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 11) { month = 0; year++; document.calControl.year.value = year; } else { month++; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year++; document.calControl.year.value = year; displayCalendar(month, year); } } function displayCalendar(month, year) { month = parseInt(month); year = parseInt(year); var i = 0; var days = getDaysInMonth(month+1,year); var firstOfMonth = new Date (year, month, 1); var startingPos = firstOfMonth.getDay(); days += startingPos; document.calButtons.calPage.value = " Su Mo Tu We Th Fr Sa"; document.calButtons.calPage.value += "\n --------------------"; for (i = 0; i < startingPos; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; document.calButtons.calPage.value += " "; } for (i = startingPos; i < days; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; if (i-startingPos+1 < 10) document.calButtons.calPage.value += "0"; document.calButtons.calPage.value += i-startingPos+1; document.calButtons.calPage.value += " "; } for (i=days; i<42; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; document.calButtons.calPage.value += " "; } document.calControl.Go.focus(); } function getDaysInMonth(month,year) { var days; if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31; else if (month==4 || month==6 || month==9 || month==11) days=30; else if (month==2) { if (isLeapYear(year)) { days=29; } else { days=28; } } return (days); } function isLeapYear (Year) { if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); } } // End --> </SCRIPT>

Step 2: Add the below code to the <BODY> section of your page:

<big>Select-A-Month</big> <FORM NAME="calControl" onSubmit="return false;" method="post"> <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0> <TR><TD COLSPAN=7> <SELECT NAME="month" onChange="selectDate()"> <OPTION>January</OPTION> <OPTION>February</OPTION> <OPTION>March</OPTION> <OPTION>April</OPTION> <OPTION>May</OPTION> <OPTION>June</OPTION> <OPTION>July</OPTION> <OPTION>August</OPTION> <OPTION>September</OPTION> <OPTION>October</OPTION> <OPTION>November</OPTION> <OPTION>December</OPTION> </SELECT> <INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4> <INPUT TYPE="button" NAME="Go" value="Build!" onClick="selectDate()"> </TD> </TR> </FORM> <FORM NAME="calButtons" method="post"> <TR><TD><textarea FONT="Courier" NAME="calPage" WRAP=no ROWS=8 COLS=22></textarea></TD><TR><TD> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" << " onClick="setPreviousYear()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" < " onClick="setPreviousMonth()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE="Today" onClick="setToday()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" > " onClick="setNextMonth()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" >> " onClick="setNextYear()"> </TD></TR> </TABLE></FORM></FONT> <p align="center">This free script provided by<br /> <a href="http://javascriptkit.com">JavaScript Kit</a></p>

Step 3: Finally, add the below onLoad event handler into the <BODY> tag itself:

Enjoy!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info