Pop-Up Calendar for ASP

Reply

Join Date: Mar 2006
Posts: 20
Reputation: SeekAnswers is an unknown quantity at this point 
Solved Threads: 0
SeekAnswers SeekAnswers is offline Offline
Newbie Poster

Pop-Up Calendar for ASP

 
0
  #1
Jun 2nd, 2006
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...
Reply With Quote Quick reply to this message  
Join Date: Jul 2005
Posts: 483
Reputation: campkev is an unknown quantity at this point 
Solved Threads: 19
campkev campkev is offline Offline
Posting Pro in Training

Re: Pop-Up Calendar for ASP

 
0
  #2
Jun 2nd, 2006
here,
save this in a file called pc.js
  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
  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>
Reply With Quote Quick reply to this message  
Join Date: Mar 2005
Posts: 131
Reputation: william_stam is an unknown quantity at this point 
Solved Threads: 2
william_stam's Avatar
william_stam william_stam is offline Offline
Junior Poster

Re: Pop-Up Calendar for ASP

 
0
  #3
Jun 7th, 2006
the calendar / popup page
  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*****

  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.

  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
Reply With Quote Quick reply to this message  
Join Date: Mar 2006
Posts: 20
Reputation: SeekAnswers is an unknown quantity at this point 
Solved Threads: 0
SeekAnswers SeekAnswers is offline Offline
Newbie Poster

Re: Pop-Up Calendar for ASP

 
0
  #4
Jun 7th, 2006
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.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC