Pop-Up Calendar for ASP

[SeekAnswers]

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...

[campkev]

here,
save this in a file called pc.js

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>&nbsp;" + days[d] + "&nbsp;</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

<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>

[william_stam]

the calendar / popup page

<%@ 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">&nbsp;
    
   </td>
  </tr>
  <tr>
   <td colspan=2>&nbsp;
   </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 "&nbsp;"
   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*****

<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.

<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

[SeekAnswers]

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.

[muktiranjan]

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...