944,004 Members | Top Members by Rank

Ad:
  • ASP Discussion Thread
  • Unsolved
  • Views: 11739
  • ASP RSS
Jun 2nd, 2006
0

Pop-Up Calendar for ASP

Expand Post »
Good afternoon, does anyone know of a free web component which can display a pop-up calendar upon clicking a button, and allow the developer to capture the date chosen by the user?

Thanks for your time...
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
SeekAnswers is offline Offline
20 posts
since Mar 2006
Jun 2nd, 2006
0

Re: Pop-Up Calendar for ASP

here,
save this in a file called pc.js
ASP Syntax (Toggle Plain Text)
  1. var calWindow;
  2. var targetField;
  3. var today = new Date();
  4. var dayofmonth = today.getDate();
  5. var startDate;
  6. var selectDate;
  7. var prevMonth;
  8. var prevYear;
  9. var currMonth;
  10. var currYear;
  11. var nextMonth;
  12. var nextYear;
  13. var days = new Array('Sun','Mon','Tue','Wed','Thr','Fri','Sat');
  14. var months = new makeArray(12);
  15.  
  16. function makeArray(arrayLength) { // create empty array
  17. this.length = arrayLength;
  18.  
  19. for (var i = 1; i <= arrayLength; i++)
  20. this[i] = 0;
  21.  
  22. return this;
  23. }
  24.  
  25. function month(name, length, index) { // create month object
  26. // properties
  27. this.name = name;
  28. this.length = length;
  29. this.index = index;
  30.  
  31. // method
  32. this.getFirstMonthDay = getFirstMonthDay;
  33. }
  34.  
  35. function makeMonthArray() { // create array of 12 month objects
  36. months[1] = new month("January", 31, 0);
  37. months[2] = new month("February", 28, 1);
  38. months[3] = new month("March", 31, 2);
  39. months[4] = new month("April", 30, 3);
  40. months[5] = new month("May", 31, 4);
  41. months[6] = new month("June", 30, 5);
  42. months[7] = new month("July", 31, 6);
  43. months[8] = new month("August", 31, 7);
  44. months[9] = new month("September", 30, 8);
  45. months[10] = new month("October", 31, 9);
  46. months[11] = new month("November", 30, 10);
  47. months[12] = new month("December", 31, 11);
  48. }
  49.  
  50. function initCalendar() {
  51. makeMonthArray();
  52. // startDate='9/9/2002';
  53. if (selectDate == "") {
  54. if (startDate == "") {
  55. currMonth = today.getMonth() - 0 + 1;
  56. currYear = today.getFullYear();
  57.  
  58. selectDate = currMonth + "/" + dayofmonth + "/" + currYear;
  59. }
  60. else
  61. selectDate = startDate;
  62. }
  63.  
  64. if (startDate == "")
  65. startDate = selectDate;
  66. curDat = new Date(startDate);
  67. if (isNaN(curDat)){curDat = new Date();} // if startDate not a valid date, set to current date
  68.  
  69. currMonth = curDat.getMonth() - 0 + 1;
  70. currYear = curDat.getFullYear();
  71. // currMonth = startDate.substring(0, startDate.indexOf("/"));
  72. // currYear = startDate.substring(startDate.lastIndexOf("/")+1, startDate.length);
  73. if (currYear<1950) {currYear = currYear + 100;}
  74. // if (currYear < 51) {currYear = 20 + currYear;}
  75. // else {currYear = 19 + currYear;} }
  76.  
  77. //Determines previous month and year for Prev button on calendar
  78. prevMonth = currMonth - 1;
  79. if (prevMonth == 0) {
  80. prevMonth = 12;
  81. prevYear = currYear - 1;
  82. }
  83. else // set month to prev month
  84. prevYear = currYear;
  85.  
  86. //Determines next month and year for Next button on calendar
  87. nextMonth = currMonth - 0 + 1;
  88. if (nextMonth == 13) {
  89. nextMonth = 1;
  90. nextYear = currYear - 0 + 1;
  91. }
  92. else // set month to next month
  93. nextYear = currYear;
  94. }
  95.  
  96. function getFirstMonthDay(theYear) { // get week-day of first day of month
  97. var firstDay = new Date(theYear, this.index, 1);
  98. return firstDay.getDay();
  99. }
  100.  
  101. function getNumFebDays(theYear) { // calc num days in February
  102. if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0)
  103. return 29;
  104. else
  105. return 28;
  106. }
  107.  
  108. function calendarHref(direction) {
  109. var m;
  110. var y;
  111.  
  112. switch (direction){
  113. case -1:
  114. m = prevMonth;
  115. y = prevYear;
  116. break;
  117. case 1:
  118. m = nextMonth;
  119. y = nextYear;
  120. break;
  121. }
  122. retVal = "javascript:window.opener.popupCalendar('"+targetField+"','"+m+"/1/"+y+"','"+selectDate+"');"
  123. return retVal
  124. }
  125.  
  126. function drawCalendar() { // draw day numbers in cal table
  127. var theYear = currYear;
  128. var month = currMonth;
  129. if (month == 2)
  130. months[2].length = getNumFebDays(theYear - 1900);
  131. var firstMonthDay = months[month].getFirstMonthDay(theYear);
  132. var numMonthDays = months[month].length;
  133.  
  134. // to keep count of how many days we have displayed in each month
  135. var daycounter = 1;
  136.  
  137. // style sheet
  138. calWindow.document.write("<STYLE type=text/css>");
  139. calWindow.document.write(".TABLEHEAD {BACKGROUND-COLOR: #6666FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
  140. calWindow.document.write(".DAYS {BACKGROUND-COLOR: #9999FF; COLOR: #000099; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
  141. calWindow.document.write(".SELECTED {BACKGROUND-COLOR: #CCCCFF; COLOR: #0000FF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
  142. calWindow.document.write(".ANOTHERMONTH {BACKGROUND-COLOR: #EEEEFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}");
  143. calWindow.document.write(".TODAY {BACKGROUND-COLOR: #CCCCFF; COLOR: #FF0000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
  144. calWindow.document.write(".CURRENTMONTH {BACKGROUND-COLOR: #CCCCFF; COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: normal}");
  145. calWindow.document.write(".INPUT {BACKGROUND-COLOR: #3333FF; COLOR: #FFFFFF; FONT-FAMILY: Arial; FONT-SIZE: x-small; FONT-STYLE: normal; FONT-WEIGHT: bold}");
  146. calWindow.document.write("</STYLE>");
  147.  
  148. // basic table html
  149. calWindow.document.write( "<TABLE border=1 borderColor=#ffffff cellPadding=4 cellSpacing=0");
  150.  
  151. // writes a Prev link, month and year, and Next Link
  152. calWindow.document.write("<TR align=center>");
  153. calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(-1) + "><<</a></td>");
  154. calWindow.document.write("<TD align=center colspan=5 CLASS=TABLEHEAD><B>" + months[month].name + " " + currYear + "</B></TD>");
  155. calWindow.document.write("<TD colspan=1 CLASS=TABLEHEAD><A CLASS=TABLEHEAD HREF=" + calendarHref(1) + ">>></a></td>");
  156. calWindow.document.write("</TR>");
  157.  
  158. // writes the days of the week
  159. calWindow.document.write("<TR align=center bgcolor=#EEEEEE>");
  160. for(var d=0;d<7;d++)
  161. calWindow.document.write("<TD width=14% CLASS=DAYS><SMALL><B>&nbsp;" + days[d] + "&nbsp;</B></SMALL></TD>");
  162. calWindow.document.write("</TR>");
  163.  
  164. // allows month to possibly span over 6 weeks
  165. for(var i=0; i<6; i++) {
  166. calWindow.document.write("<TR align=center>");
  167.  
  168. // display each day of the week
  169. for(var j=0;j<7;j++) {
  170. var tMonth, tDay, tYear, tDate;
  171.  
  172. // if we are not displaying the current month
  173. if( (i==0 && j<firstMonthDay) || daycounter>months[month].length ) {
  174. if (daycounter>months[month].length) {
  175. tMonth = nextMonth;
  176. tDay = daycounter-months[month].length;
  177. tYear = nextYear;
  178. daycounter++;
  179. }
  180. else {
  181. tMonth = prevMonth;
  182. tDay = months[prevMonth].length-firstMonthDay+1+j;
  183. tYear = prevYear;
  184. }
  185. tDate = tMonth + "/" + tDay + "/" + tYear;
  186. tClass = "ANOTHERMONTH";
  187. //if we are displaying the current date
  188. }
  189. else if((daycounter==today.getDate()) && (currMonth==today.getMonth()-0+1) && (currYear==today.getYear())) {
  190. tDay = daycounter;
  191. tDate = currMonth + "/" + daycounter + "/" + currYear;
  192. tClass = "TODAY";
  193. daycounter++;
  194. // if we are displaying the current month
  195. }
  196. else {
  197. tDay = daycounter;
  198. tDate = currMonth + "/" + daycounter + "/" + currYear;
  199. tClass = "CURRENTMONTH";
  200. daycounter++;
  201. }
  202.  
  203. if (selectDate == tDate)
  204. tClass = "SELECTED";
  205.  
  206. calWindow.document.write("<TD width=14% CLASS=" + tClass + "><A CLASS=" + tClass + " HREF=" + "javascript:window.opener.document."+targetField+".value='"+tDate+"';window.close();" + ">" + tDay + "</A></TD>");
  207. }
  208. calWindow.document.write("</TR>");
  209. }
  210. calWindow.document.write("</TABLE>");
  211. }
  212.  
  213. function popupCalendar(target, start, select) {
  214. targetField = target;
  215. startDate = start;
  216. selectDate = select;
  217.  
  218. var w=250; var h=230; var t; var l;
  219. if (navigator.appName=="Microsoft Internet Explorer"){
  220. t = (document.calimg.offsetTop + window.screenTop) -60;
  221. l = (document.calimg.offsetLeft + window.screenLeft) -10;
  222. } else {
  223. t = (document.calimg.offsetTop + screenY)-400;
  224. l = (document.calimg.offsetLeft + screenX);
  225. }
  226.  
  227. calWindow = window.open("", "Calendar", "width="+w+",height="+h+",status=yes,resizable=no,top="+t+",left="+l);
  228. calWindow.opener = self;
  229. calWindow.focus();
  230. calWindow.document.close();
  231.  
  232. initCalendar();
  233. drawCalendar();
  234. }

here is an example of how to use it
ASP Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script language=JavaScript src="pc.js"></script>
  4. </head>
  5. <body>
  6. <form name="FormName">
  7. <td valign=top width=100>From:
  8. <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>
  9. </form>
  10. </body>
  11. <html>
Reputation Points: 14
Solved Threads: 19
Posting Pro in Training
campkev is offline Offline
484 posts
since Jul 2005
Jun 7th, 2006
0

Re: Pop-Up Calendar for ASP

the calendar / popup page
ASP Syntax (Toggle Plain Text)
  1. <%@ Language=VBScript %>
  2. <%Option Explicit%>
  3. <%
  4. Dim m_dtCurrentDate 'Currently selected date/time
  5. Dim m_lDayofFirst 'The day of the week that the first of the current month falls on
  6. Dim m_lDaysInMonth 'Number of days in the selected month
  7. Dim m_dtBegin 'Beginning date of the selected month
  8. Dim m_dtEnd 'Ending date of the selected month
  9. Dim m_lYear 'Currently selected Year
  10. Dim m_lMonth 'Currently selected Month
  11. Dim m_lDay 'Currently selected Day of the month
  12.  
  13. Dim m_sInputName 'Name of the input field from the parent page
  14. Dim m_dtPassedInDate
  15.  
  16. m_sInputName = Request.QueryString("N")
  17.  
  18. 'Build the date/time from individual parts if there has been a post back.
  19. 'Otherwise, just get the current date/time.
  20. If Request.QueryString("A") <> "" Then
  21. m_lYear = Request.Form("fldYear")
  22. m_lMonth = Request.Form("fldMonth")
  23. m_lDay = Request.Form("fldDay")
  24.  
  25. 'Fix the day of the month if we switch from a month that has less days in the month
  26. 'than the previously selected month and the day selected is not on the newly selected
  27. 'month (ie - going from March 31st and then selecting February which does not have a 31st.)
  28. m_dtBegin = m_lMonth & "/1/" & m_lYear
  29. m_dtEnd = DateAdd("m", 1, m_dtBegin)
  30. m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd)
  31. If CLng(m_lDay) > CLng(m_lDaysInMonth) Then m_lDay = m_lDaysInMonth
  32.  
  33. 'Build the Date
  34. m_dtCurrentDate = m_lMonth & "/" & m_lDay & "/" & m_lYear
  35. Dim formatofdate
  36. formatofdate = m_lDay&" "&MonthName(m_lMonth)&" "&m_lYear
  37.  
  38. 'If the date is not valid after all this then use the current date.
  39. If IsDate(m_dtCurrentDate) Then
  40. m_dtCurrentDate = CDate(m_dtCurrentDate)
  41. Else
  42. m_dtCurrentDate = Now()
  43. End If
  44.  
  45. Else
  46. m_dtPassedInDate = Request.QueryString("DT")
  47. If CStr(m_dtPassedInDate) <> "" Then
  48. If IsDate(m_dtPassedInDate) Then
  49. m_dtCurrentDate = CDate(m_dtPassedInDate)
  50. Else
  51. m_dtCurrentDate = Date()
  52. End If
  53. Else
  54. m_dtCurrentDate = Date()
  55. End If
  56. End If
  57.  
  58. 'Break out certain parts of the currently selected date/time.
  59. m_lYear = DatePart("yyyy", m_dtCurrentDate)
  60. m_lMonth = DatePart("m", m_dtCurrentDate)
  61. m_lDay = DatePart("d", m_dtCurrentDate)
  62.  
  63.  
  64. m_dtBegin = CDate(DatePart("m", m_dtCurrentDate) & "/1/" & DatePart("yyyy", m_dtCurrentDate))
  65. m_dtEnd = DateAdd("m", 1, m_dtBegin)
  66. m_lDayofFirst = DatePart("w", m_dtBegin)
  67. m_lDaysInMonth = DateDiff("d", m_dtBegin, m_dtEnd)
  68. %>
  69. <HTML>
  70. <HEAD>
  71. <TITLE>Choose a date/time</TITLE>
  72. <LINK rel="stylesheet" type="text/css" href="Calendar.css">
  73. </HEAD>
  74. <BODY bgcolor="#D4D0C8">
  75. <FORM method=post action="?A=1&N=<%=m_sInputName%>" id=Form1 name=Form1>
  76. <table class=overall cellpadding=0 cellspacing=10>
  77. <tr>
  78. <td>
  79. <%DisplayCalendar%>
  80. </td>
  81. <td valign=top>
  82. <table>
  83. <tr>
  84. <td class="Title">
  85. Month:<BR>
  86. </td>
  87. <td class="Title">
  88. Year:<BR>
  89. </td>
  90. </tr>
  91. <tr>
  92. <td>
  93. <SELECT id=fldMonth name=fldMonth onchange="javascript:document.Form1.submit();">
  94. <%DisplayMonths%>
  95. </SELECT>
  96. </td>
  97. <td>
  98. <INPUT type="text" id=fldYear name=fldYear value="<%=m_lYear%>" size=3 maxlength=4 onblur="javascript:document.Form1.submit();"><BR>
  99. </td>
  100. </tr>
  101. <tr>
  102. <td colspan=2 class="Title">&nbsp;
  103.  
  104. </td>
  105. </tr>
  106. <tr>
  107. <td colspan=2>&nbsp;
  108. </td>
  109. </tr>
  110. </table>
  111. <p><BR>
  112.  
  113. <table width="100%" border="0" cellpadding="0" cellspacing="0" >
  114. <tr>
  115. <td><input type="button" value="OK" id=cmdOK name=cmdOK class=Button onClick="javascript:SetDateOnParent();"></td>
  116. <td><input type="button" value="Cancel" id=cmdCancel name=cmdCancel class=Button onClick="javascript:window.close();"></td>
  117. </tr>
  118. </table>
  119. <p> </td>
  120. </tr>
  121. </table>
  122. </FORM>
  123. </BODY>
  124. </HTML>
  125. <%
  126. Sub DisplayMonths
  127. Dim arrMonths 'An array of months starting with January
  128. Dim i 'counter
  129.  
  130. arrMonths = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
  131.  
  132. For i = 0 To UBound(arrMonths)
  133. If CLng(i) = (CLng(m_lMonth) - 1) Then
  134. Response.Write "<OPTION value=" & i + 1 & " SELECTED>" & arrMonths(i) & "</OPTION>"
  135. Else
  136. Response.Write "<OPTION value=" & i + 1 & ">" & arrMonths(i) & "</OPTION>"
  137. End If
  138. Next
  139. End Sub
  140. Sub DisplayCalendar
  141. Dim arrDays 'An array of days starting with Sunday
  142. Dim i 'counter
  143. Dim lColumnCount 'Column Count
  144. Dim lNumber 'For building the calendar
  145. Dim bFinished 'For building the calendar
  146. Dim bStart 'For building the calendar
  147.  
  148. arrDays = Array("S", "M", "T", "W", "T", "F", "S")
  149.  
  150. Response.Write "<table width=100 class='Calendar' cellpadding=4 cellspacing=0><tr class=Header>"
  151. For i = 0 to Ubound(arrDays)
  152. Response.write "<td>" & arrDays(i) & "</td>"
  153. Next
  154.  
  155. lNumber = 1
  156. bFinished = False
  157. bStart = False
  158. Do
  159. Response.Write "<tr>"
  160. For lColumnCount = 1 to 7
  161. If CLng(lColumnCount) = CLng(m_lDayofFirst) Then
  162. bStart = True
  163. End If
  164.  
  165. If CLng(m_lDay) = CLng(lNumber) AND CBool(bStart) Then
  166. Response.Write "<td class=SelectedDay>"
  167. Response.Write "<input name=fldDay type=hidden value=" & lNumber & ">"
  168. Else
  169. Response.Write "<td class=NormalDay>"
  170. End If
  171.  
  172. If NOT CBool(bFinished) AND CBool(bStart) Then
  173. If CLng(m_lDay) <> CLng(lNumber) Then
  174. Response.Write "<A href='javascript:ChangeDay(" & lNumber & ");'>"
  175. End If
  176. Response.Write lNumber
  177. If CLng(m_lDay) <> CLng(lNumber) Then
  178. Response.Write "</A>"
  179. End If
  180. lNumber = lNumber + 1
  181. If CLng(lNumber) > CLng(m_lDaysInMonth) Then
  182. bFinished = True
  183. End If
  184. Else
  185. Response.Write "&nbsp;"
  186. End If
  187. Response.Write "</td>"
  188. Next
  189. Response.Write "</tr>"
  190. Loop Until CBool(bFinished)
  191.  
  192. Response.Write "</tr></table>"
  193. End Sub
  194. %>
  195. <script language="javascript">
  196. function ChangeDay(v_lDay) {
  197. document.Form1.fldDay.value = v_lDay;
  198. document.Form1.submit();
  199. }
  200.  
  201. function SetDateOnParent() {
  202. var sRetDateTime;
  203.  
  204. sRetDateTime = '<%=formatofdate%> '
  205. window.opener.eval('<%=m_sInputName%>').value = sRetDateTime;
  206. window.close();
  207. }
  208. window.onload = function () {
  209. document.focus()
  210. }
  211. </script>


how to use:

***** goes right at the bottom or where the scripts thing goes in the page*****

ASP Syntax (Toggle Plain Text)
  1. <script language="javascript">
  2. function CalPop(sInputName)
  3. {
  4. window.open('calendar/Cal.asp?N=' + escape(sInputName) + '&DT=' + escape(window.eval(sInputName).value), 'CalPop', 'toolbar=0,width=378,height=225');
  5. }
  6. </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)
  1. <input name="insertdate" type="text" id="insertdate" value="" >
  2.  
  3. <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
Reputation Points: 10
Solved Threads: 2
Junior Poster
william_stam is offline Offline
131 posts
since Mar 2005
Jun 7th, 2006
0

Re: Pop-Up Calendar for ASP

Thanks for your aid, the calendar works like magic, you are my life-saver. Just to let you know, there seems to be some error in the second example that you have given me, the one which is written in VBScript.

Have a nice day.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
SeekAnswers is offline Offline
20 posts
since Mar 2006
Aug 23rd, 2010
0
Re: Pop-Up Calendar for ASP
i have gone through this code...pls tell me if i want to display 2 months at a time
(I am using .net 4.0)


pls pls replyyyy...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
muktiranjan is offline Offline
3 posts
since Aug 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in ASP Forum Timeline: DSNs ASP and windows x64
Next Thread in ASP Forum Timeline: how to connect ms access with asp vbscript





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC