| | |
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 |
Tag cloud for ASP
archive asp asp.net aspandmssqlserver2005 aspandmssqlserver2005connection aspconnection calendar changeable connection current database databaseconnection diagnostics dreamweaver excel fso html iis microsoft msmsql mssql2005 mssqlserver2005 mssqlserver2005andasp mssqlserverandasp opentextfile record searchbox selectoption server single specfic sqlserver sqlserverconnection toolkit web webserver windows7





