User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the ASP section within the Web Development category of DaniWeb, a massive community of 375,171 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,140 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our ASP advertiser: Lunarpages ASP Web Hosting
Views: 4227 | Replies: 3
Reply
Join Date: Mar 2006
Posts: 20
Reputation: SeekAnswers is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
SeekAnswers SeekAnswers is offline Offline
Newbie Poster

Pop-Up Calendar for ASP

  #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...
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jul 2005
Location: Dallas, TX
Posts: 481
Reputation: campkev is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 19
campkev campkev is offline Offline
Posting Pro in Training

Re: Pop-Up Calendar for ASP

  #2  
Jun 2nd, 2006
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>
Reply With Quote  
Join Date: Mar 2005
Location: LTT, South Africa
Posts: 125
Reputation: william_stam is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
william_stam's Avatar
william_stam william_stam is offline Offline
Junior Poster

Re: Pop-Up Calendar for ASP

  #3  
Jun 7th, 2006
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
Reply With Quote  
Join Date: Mar 2006
Posts: 20
Reputation: SeekAnswers is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
SeekAnswers SeekAnswers is offline Offline
Newbie Poster

Re: Pop-Up Calendar for ASP

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

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb ASP Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the ASP Forum

All times are GMT -4. The time now is 11:57 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC