Full version: jsB@nk » Time » Calendar » Dynamic Calendar Dropdown Menu
URL: https://www.javascriptbank.com/dynamic-calendar-dropdown-menu-script.html
JavaScript calendars have existed for a long time now, but never have they looked pretty (literally), until DHTML came along. Check out Constantin's cool DHTML calendar, which not only looks handsome, but allows you to dynamically look up the calendar for any particular month/ year. Cool!
Full version: jsB@nk » Time » Calendar » Dynamic Calendar Dropdown Menu
URL: https://www.javascriptbank.com/dynamic-calendar-dropdown-menu-script.html
<SCRIPT LANGUAGE="JavaScript"><!-- Beginvar dDate = new Date();var dCurMonth = dDate.getMonth();var dCurDayOfMonth = dDate.getDate();var dCurYear = dDate.getFullYear();var objPrevElement = new Object();function fToggleColor(myElement) {var toggleColor = "#ff0000";if (myElement.id == "calDateText") {if (myElement.color == toggleColor) {myElement.color = "";} else {myElement.color = toggleColor; }} else if (myElement.id == "calCell") {for (var i in myElement.children) {if (myElement.children[i].id == "calDateText") {if (myElement.children[i].color == toggleColor) {myElement.children[i].color = "";} else {myElement.children[i].color = toggleColor; } } } }}function fSetSelectedDay(myElement){if (myElement.id == "calCell") {if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {myElement.bgColor = "#FF9900";objPrevElement.bgColor = "";document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);objPrevElement = myElement; } }}function fGetDaysInMonth(iMonth, iYear) {var dPrevDate = new Date(iYear, iMonth, 0);return dPrevDate.getDate();}function fBuildCal(iYear, iMonth, iDayStyle) {var aMonth = new Array();aMonth[0] = new Array(7);aMonth[1] = new Array(7);aMonth[2] = new Array(7);aMonth[3] = new Array(7);aMonth[4] = new Array(7);aMonth[5] = new Array(7);aMonth[6] = new Array(7);var dCalDate = new Date(iYear, iMonth-1, 1);var iDayOfFirst = dCalDate.getDay();var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);var iVarDate = 1;var i, d, w;if (iDayStyle == 2) {aMonth[0][0] = "Sunday";aMonth[0][1] = "Monday";aMonth[0][2] = "Tuesday";aMonth[0][3] = "Wednesday";aMonth[0][4] = "Thursday";aMonth[0][5] = "Friday";aMonth[0][6] = "Saturday";} else if (iDayStyle == 1) {aMonth[0][0] = "Sun";aMonth[0][1] = "Mon";aMonth[0][2] = "Tue";aMonth[0][3] = "Wed";aMonth[0][4] = "Thu";aMonth[0][5] = "Fri";aMonth[0][6] = "Sat";} else {aMonth[0][0] = "Su";aMonth[0][1] = "Mo";aMonth[0][2] = "Tu";aMonth[0][3] = "We";aMonth[0][4] = "Th";aMonth[0][5] = "Fr";aMonth[0][6] = "Sa";}for (d = iDayOfFirst; d < 7; d++) {aMonth[1][d] = iVarDate;iVarDate++;}for (w = 2; w < 7; w++) {for (d = 0; d < 7; d++) {if (iVarDate <= iDaysInMonth) {aMonth[w][d] = iVarDate;iVarDate++; } }}return aMonth;}function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {var myMonth;myMonth = fBuildCal(iYear, iMonth, iDayStyle);document.write("<table border='1' cellpadding=1 cellspacing=0>")document.write("<tr>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");document.write("</tr>");for (w = 1; w < 7; w++) {document.write("<tr>")for (d = 0; d < 7; d++) {document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");if (!isNaN(myMonth[w][d])) {document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");} else {document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");}document.write("</td>")}document.write("</tr>");}document.write("</table>")}function fUpdateCal(iYear, iMonth) {myMonth = fBuildCal(iYear, iMonth);objPrevElement.bgColor = "";document.all.calSelectedDate.value = "";for (w = 1; w < 7; w++) {for (d = 0; d < 7; d++) {if (!isNaN(myMonth[w][d])) {calDateText[((7*w)+d)-7].innerText = myMonth[w][d];} else {calDateText[((7*w)+d)-7].innerText = " "; } } }}// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript" for=window event=onload><!-- Beginvar dCurDate = new Date();frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())frmCalendarSample.tbSelYear.options[i].selected = true;// End --></script><form name="frmCalendarSample" method="post" action=""><input type="hidden" name="calSelectedDate" value=""><table border="1" cellspacing=0 cellpadding=2><tr><td><select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select> <select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option></select></td></tr><tr><td><script language="JavaScript">var dCurDate = new Date();fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);</script> </td></tr></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->