| | |
Pop-Up Calendar for ASP
Please support our ASP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jul 2005
Posts: 483
Reputation:
Solved Threads: 19
here,
save this in a file called pc.js
here is an example of how to use it
save this in a file called pc.js
ASP Syntax (Toggle Plain Text)
var calWindow; var targetField; var today = new Date(); var dayofmonth = today.getDate(); var startDate; var selectDate; var prevMonth; var prevYear; var currMonth; var currYear; var nextMonth; var nextYear; var days = new Array('Sun','Mon','Tue','Wed','Thr','Fri','Sat'); var months = new makeArray(12); function makeArray(arrayLength) { // create empty array this.length = arrayLength; for (var i = 1; i <= arrayLength; i++) this[i] = 0; return this; } function month(name, length, index) { // create month object // properties this.name = name; this.length = length; this.index = index; // method this.getFirstMonthDay = getFirstMonthDay; } function makeMonthArray() { // create array of 12 month objects months[1] = new month("January", 31, 0); months[2] = new month("February", 28, 1); months[3] = new month("March", 31, 2); months[4] = new month("April", 30, 3); months[5] = new month("May", 31, 4); months[6] = new month("June", 30, 5); months[7] = new month("July", 31, 6); months[8] = new month("August", 31, 7); months[9] = new month("September", 30, 8); months[10] = new month("October", 31, 9); months[11] = new month("November", 30, 10); months[12] = new month("December", 31, 11); } function initCalendar() { makeMonthArray(); // startDate='9/9/2002'; if (selectDate == "") { if (startDate == "") { currMonth = today.getMonth() - 0 + 1; currYear = today.getFullYear(); selectDate = currMonth + "/" + dayofmonth + "/" + currYear; } else selectDate = startDate; } if (startDate == "") startDate = selectDate; curDat = new Date(startDate); if (isNaN(curDat)){curDat = new Date();} // if startDate not a valid date, set to current date currMonth = curDat.getMonth() - 0 + 1; currYear = curDat.getFullYear(); // currMonth = startDate.substring(0, startDate.indexOf("/")); // currYear = startDate.substring(startDate.lastIndexOf("/")+1, startDate.length); if (currYear<1950) {currYear = currYear + 100;} // if (currYear < 51) {currYear = 20 + currYear;} // else {currYear = 19 + currYear;} } //Determines previous month and year for Prev button on calendar prevMonth = currMonth - 1; if (prevMonth == 0) { prevMonth = 12; prevYear = currYear - 1; } else // set month to prev month prevYear = currYear; //Determines next month and year for Next button on calendar nextMonth = currMonth - 0 + 1; if (nextMonth == 13) { nextMonth = 1; nextYear = currYear - 0 + 1; } else // set month to next month nextYear = currYear; } function getFirstMonthDay(theYear) { // get week-day of first day of month var firstDay = new Date(theYear, this.index, 1); return firstDay.getDay(); } function getNumFebDays(theYear) { // calc num days in February if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0) return 29; else return 28; } function calendarHref(direction) { var m; var y; switch (direction){ case -1: m = prevMonth; y = prevYear; break; case 1: m = nextMonth; y = nextYear; break; } retVal = "javascript:window.opener.popupCalendar('"+targetField+"','"+m+"/1/"+y+"','"+selectDate+"');" return retVal } function drawCalendar() { // draw day numbers in cal table var theYear = currYear; var month = currMonth; if (month == 2) months[2].length = getNumFebDays(theYear - 1900); var firstMonthDay = months[month].getFirstMonthDay(theYear); var numMonthDays = months[month].length; // to keep count of how many days we have displayed in each month var daycounter = 1; // style sheet calWindow.document.write("<STYLE type=text/css>"); calWindow.document.write(".TABLEHEAD {BACKGROUND-COLOR: #6666FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}"); calWindow.document.write(".DAYS {BACKGROUND-COLOR: #9999FF; COLOR: #000099; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}"); calWindow.document.write(".SELECTED {BACKGROUND-COLOR: #CCCCFF; COLOR: #0000FF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}"); calWindow.document.write(".ANOTHERMONTH {BACKGROUND-COLOR: #EEEEFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}"); calWindow.document.write(".TODAY {BACKGROUND-COLOR: #CCCCFF; COLOR: #FF0000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}"); calWindow.document.write(".CURRENTMONTH {BACKGROUND-COLOR: #CCCCFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}"); calWindow.document.write(".INPUT {BACKGROUND-COLOR: #3333FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}"); calWindow.document.write("</STYLE>"); // basic table html calWindow.document.write( "<TABLE border=1 borderColor=#ffffff cellPadding=4 cellSpacing=0"); // writes a Prev link, month and year, and Next Link calWindow.document.write("<TR align=center>"); calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(-1) + "><<</a></td>"); calWindow.document.write("<TD align=center colspan=5 CLASS=TABLEHEAD><B>" + months[month].name + " " + currYear + "</B></TD>"); calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(1) + ">>></a></td>"); calWindow.document.write("</TR>"); // writes the days of the week calWindow.document.write("<TR align=center bgcolor=#EEEEEE>"); for(var d=0;d<7;d++) calWindow.document.write("<TD width=14% CLASS=DAYS><SMALL><B> " + days[d] + " </B></SMALL></TD>"); calWindow.document.write("</TR>"); // allows month to possibly span over 6 weeks for(var i=0; i<6; i++) { calWindow.document.write("<TR align=center>"); // display each day of the week for(var j=0;j<7;j++) { var tMonth, tDay, tYear, tDate; // if we are not displaying the current month if( (i==0 && j<firstMonthDay) || daycounter>months[month].length ) { if (daycounter>months[month].length) { tMonth = nextMonth; tDay = daycounter-months[month].length; tYear = nextYear; daycounter++; } else { tMonth = prevMonth; tDay = months[prevMonth].length-firstMonthDay+1+j; tYear = prevYear; } tDate = tMonth + "/" + tDay + "/" + tYear; tClass = "ANOTHERMONTH"; //if we are displaying the current date } else if((daycounter==today.getDate()) && (currMonth==today.getMonth()-0+1) && (currYear==today.getYear())) { tDay = daycounter; tDate = currMonth + "/" + daycounter + "/" + currYear; tClass = "TODAY"; daycounter++; // if we are displaying the current month } else { tDay = daycounter; tDate = currMonth + "/" + daycounter + "/" + currYear; tClass = "CURRENTMONTH"; daycounter++; } if (selectDate == tDate) tClass = "SELECTED"; calWindow.document.write("<TD width=14% CLASS=" + tClass + "><A CLASS=" + tClass + " HREF=" + "javascript:window.opener.document."+targetField+".value='"+tDate+"';window.close();" + ">" + tDay + "</A></TD>"); } calWindow.document.write("</TR>"); } calWindow.document.write("</TABLE>"); } function popupCalendar(target, start, select) { targetField = target; startDate = start; selectDate = select; var w=250; var h=230; var t; var l; if (navigator.appName=="Microsoft Internet Explorer"){ t = (document.calimg.offsetTop + window.screenTop) -60; l = (document.calimg.offsetLeft + window.screenLeft) -10; } else { t = (document.calimg.offsetTop + screenY)-400; l = (document.calimg.offsetLeft + screenX); } calWindow = window.open("", "Calendar", "width="+w+",height="+h+",status=yes,resizable=no,top="+t+",left="+l); calWindow.opener = self; calWindow.focus(); calWindow.document.close(); initCalendar(); drawCalendar(); }
here is an example of how to use it
ASP Syntax (Toggle Plain Text)
<html> <head> <script language=JavaScript src="pc.js"></script> </head> <body> <form name="FormName"> <td valign=top width=100>From: <a href="javascript:popupCalendar('FormName.txtBegDate', 'document.FormName.txtBegDate.value','');" onmouseover="window.status='Popup Calendar';return true;" onmouseout="window.status='';return true;"><img name='calimg' src='cal.gif' width=16 height=16 border=0></a><br><input type=text name='txtBegDate' size=6 maxlength=10 value='5/1/2006'></td> </form> </body> <html>
the calendar / popup page
how to use:
***** goes right at the bottom or where the scripts thing goes in the page*****
on my codeing i always put the calendar pages in a "calender" folder... so the above popup page is called cal.asp in the calender folder.
the calendar giff is just an image. the "insertdate" part is what i called the form input field.
i managed to modify this code a bit to pull records from the db using a recordset. so for instance it can show important dates etc. the other persons post is cleaner though
ASP Syntax (Toggle Plain Text)
<%@ Language=VBScript %> <%Option Explicit%> <% Dim m_dtCurrentDate 'Currently selected date/time Dim m_lDayofFirst 'The day of the week that the first of the current month falls on Dim m_lDaysInMonth 'Number of days in the selected month Dim m_dtBegin 'Beginning date of the selected month Dim m_dtEnd 'Ending date of the selected month Dim m_lYear 'Currently selected Year Dim m_lMonth 'Currently selected Month Dim m_lDay 'Currently selected Day of the month Dim m_sInputName 'Name of the input field from the parent page Dim m_dtPassedInDate m_sInputName = Request.QueryString("N") 'Build the date/time from individual parts if there has been a post back. 'Otherwise, just get the current date/time. If Request.QueryString("A") <> "" Then m_lYear = Request.Form("fldYear") m_lMonth = Request.Form("fldMonth") m_lDay = Request.Form("fldDay") 'Fix the day of the month if we switch from a month that has less days in the month 'than the previously selected month and the day selected is not on the newly selected 'month (ie - going from March 31st and then selecting February which does not have a 31st.) m_dtBegin = m_lMonth & "/1/" & m_lYear m_dtEnd = DateAdd("m", 1, m_dtBegin) m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd) If CLng(m_lDay) > CLng(m_lDaysInMonth) Then m_lDay = m_lDaysInMonth 'Build the Date m_dtCurrentDate = m_lMonth & "/" & m_lDay & "/" & m_lYear Dim formatofdate formatofdate = m_lDay&" "&MonthName(m_lMonth)&" "&m_lYear 'If the date is not valid after all this then use the current date. If IsDate(m_dtCurrentDate) Then m_dtCurrentDate = CDate(m_dtCurrentDate) Else m_dtCurrentDate = Now() End If Else m_dtPassedInDate = Request.QueryString("DT") If CStr(m_dtPassedInDate) <> "" Then If IsDate(m_dtPassedInDate) Then m_dtCurrentDate = CDate(m_dtPassedInDate) Else m_dtCurrentDate = Date() End If Else m_dtCurrentDate = Date() End If End If 'Break out certain parts of the currently selected date/time. m_lYear = DatePart("yyyy", m_dtCurrentDate) m_lMonth = DatePart("m", m_dtCurrentDate) m_lDay = DatePart("d", m_dtCurrentDate) m_dtBegin = CDate(DatePart("m", m_dtCurrentDate) & "/1/" & DatePart("yyyy", m_dtCurrentDate)) m_dtEnd = DateAdd("m", 1, m_dtBegin) m_lDayofFirst = DatePart("w", m_dtBegin) m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd) %> <HTML> <HEAD> <TITLE>Choose a date/time</TITLE> <LINK rel="stylesheet" type="text/css" href="Calendar.css"> </HEAD> <BODY bgcolor="#D4D0C8"> <FORM method=post action="?A=1&N=<%=m_sInputName%>" id=Form1 name=Form1> <table class=overall cellpadding=0 cellspacing=10> <tr> <td> <%DisplayCalendar%> </td> <td valign=top> <table> <tr> <td class="Title"> Month:<BR> </td> <td class="Title"> Year:<BR> </td> </tr> <tr> <td> <SELECT id=fldMonth name=fldMonth onchange="javascript:document.Form1.submit();"> <%DisplayMonths%> </SELECT> </td> <td> <INPUT type="text" id=fldYear name=fldYear value="<%=m_lYear%>" size=3 maxlength=4 onblur="javascript:document.Form1.submit();"><BR> </td> </tr> <tr> <td colspan=2 class="Title"> </td> </tr> <tr> <td colspan=2> </td> </tr> </table> <p><BR> <table width="100%" border="0" cellpadding="0" cellspacing="0" > <tr> <td><input type="button" value="OK" id=cmdOK name=cmdOK class=Button onClick="javascript:SetDateOnParent();"></td> <td><input type="button" value="Cancel" id=cmdCancel name=cmdCancel class=Button onClick="javascript:window.close();"></td> </tr> </table> <p> </td> </tr> </table> </FORM> </BODY> </HTML> <% Sub DisplayMonths Dim arrMonths 'An array of months starting with January Dim i 'counter arrMonths = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December") For i = 0 To UBound(arrMonths) If CLng(i) = (CLng(m_lMonth) - 1) Then Response.Write "<OPTION value=" & i + 1 & " SELECTED>" & arrMonths(i) & "</OPTION>" Else Response.Write "<OPTION value=" & i + 1 & ">" & arrMonths(i) & "</OPTION>" End If Next End Sub Sub DisplayCalendar Dim arrDays 'An array of days starting with Sunday Dim i 'counter Dim lColumnCount 'Column Count Dim lNumber 'For building the calendar Dim bFinished 'For building the calendar Dim bStart 'For building the calendar arrDays = Array("S", "M", "T", "W", "T", "F", "S") Response.Write "<table width=100 class='Calendar' cellpadding=4 cellspacing=0><tr class=Header>" For i = 0 to Ubound(arrDays) Response.write "<td>" & arrDays(i) & "</td>" Next lNumber = 1 bFinished = False bStart = False Do Response.Write "<tr>" For lColumnCount = 1 to 7 If CLng(lColumnCount) = CLng(m_lDayofFirst) Then bStart = True End If If CLng(m_lDay) = CLng(lNumber) AND CBool(bStart) Then Response.Write "<td class=SelectedDay>" Response.Write "<input name=fldDay type=hidden value=" & lNumber & ">" Else Response.Write "<td class=NormalDay>" End If If NOT CBool(bFinished) AND CBool(bStart) Then If CLng(m_lDay) <> CLng(lNumber) Then Response.Write "<A href='javascript:ChangeDay(" & lNumber & ");'>" End If Response.Write lNumber If CLng(m_lDay) <> CLng(lNumber) Then Response.Write "</A>" End If lNumber = lNumber + 1 If CLng(lNumber) > CLng(m_lDaysInMonth) Then bFinished = True End If Else Response.Write " " End If Response.Write "</td>" Next Response.Write "</tr>" Loop Until CBool(bFinished) Response.Write "</tr></table>" End Sub %> <script language="javascript"> function ChangeDay(v_lDay) { document.Form1.fldDay.value = v_lDay; document.Form1.submit(); } function SetDateOnParent() { var sRetDateTime; sRetDateTime = '<%=formatofdate%> ' window.opener.eval('<%=m_sInputName%>').value = sRetDateTime; window.close(); } window.onload = function () { document.focus() } </script>
how to use:
***** goes right at the bottom or where the scripts thing goes in the page*****
ASP Syntax (Toggle Plain Text)
<script language="javascript"> function CalPop(sInputName) { window.open('calendar/Cal.asp?N=' + escape(sInputName) + '&DT=' + escape(window.eval(sInputName).value), 'CalPop', 'toolbar=0,width=378,height=225'); } </script>
on my codeing i always put the calendar pages in a "calender" folder... so the above popup page is called cal.asp in the calender folder.
ASP Syntax (Toggle Plain Text)
<input name="insertdate" type="text" id="insertdate" value="" > <a href="javascript:CalPop('document.formname.insertdate');"><img src="calendar/icon_Cal.gif" border="0" width="18" height="18" /></a>
the calendar giff is just an image. the "insertdate" part is what i called the form input field.
i managed to modify this code a bit to pull records from the db using a recordset. so for instance it can show important dates etc. the other persons post is cleaner though
![]() |
Similar Threads
- DOB field-how to use text field and pop out calendar same time? (ASP)
- I want to Edit Calendar Class in ASP.NET (ASP.NET)
- Edit Calendar (ASP.NET)
- Error message when running ASP email script (ASP)
Other Threads in the ASP Forum
- Previous Thread: Javascript: Connecting to database
- Next Thread: VBScript: Focusing on a form control
| Thread Tools | Search this Thread |
archive asp asp.net aspandmssqlserver2005 aspandmssqlserver2005connection aspconnection connection database databaseconnection dreamweaver excel fso iis msmsql mssql2005 mssqlserver2005 mssqlserver2005andasp mssqlserverandasp opentextfile record searchbox selectoption single specfic sqlserver sqlserverconnection windows7





