[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 441
  • Last Modified:

500 pts. URGENT How to use the free JAVASCRIPT calendar www.mattkruse.com in my ASPX?

Hi Experts

URL: http://www.mattkruse.com/javascript/calendarpopup

I Need to use the third and room calendar .  

I am not obtaining to use this developed example in in JAVASCRIPT in my page ASPX.  

It would like much that sent an example page ASPX and the way to install and to call this calendar.  

Very thanks.  

Wanderson Pin
0
PINWAN
Asked:
PINWAN
  • 10
  • 8
  • 2
1 Solution
 
nauman_ahmedCommented:
Why not try this one:

http://www.eworldui.net/CustomControls/CalendarPopupDemo.aspx

Its much easier :).

-Nauman.
0
 
nauman_ahmedCommented:
http://www.mattkruse.com/javascript/calendarpopup
Hover your mouse on the Select link on this URL.  It will show you the code that it used to insert the calendar. Are you using the same?  Possible to see your web site online?

-Nauman.
0
 
raterusCommented:
what do you mean, "third and room" calendar.  I actually have written my own custom control around this javascript, so I probably can help you a little bit...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
PINWANAuthor Commented:
sorry.

I need to use the 3th or 4th calendar in my aspx.

This error is show when run my page
Line: 133
Char 1
Error: 'cal18' is null or not and object
Code: 0
URL: http://localhost/Calend2/WebForm1.aspx

The javascript files to be in same path that WebForm1.aspx (http://localhost/Calend2/)
AnchorPosition.js
CalendarPopup.js
date.js
PopupWindow.js


Reminder:I need to use "asp:TextBox"  to show the calendar


Regards.

Wanderson Pin
0
 
PINWANAuthor Commented:
Folow my aspx.
I need of 2 textbox (start date and end date)

<!--========================================================= -->
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="Calend2.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>WebForm1</title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name=vs_defaultClientScript content="JavaScript">
            <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">

            <SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
            <!-- This prints out the default stylehseets used by the DIV style calendar.
     Only needed if you are using the DIV style popup -->
            <SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
            <!-- These styles are here only as an example of how you can over-ride the default
     styles that are included in the script itself. -->
            <STYLE>
      .TESTcpYearNavigation { FONT-WEIGHT: bold; COLOR: #ffffff; BACKGROUND-COLOR: #6677dd; TEXT-ALIGN: center; TEXT-DECORATION: none }
      .TESTcpMonthNavigation { FONT-WEIGHT: bold; COLOR: #ffffff; BACKGROUND-COLOR: #6677dd; TEXT-ALIGN: center; TEXT-DECORATION: none }
      .TESTcpDayColumnHeader { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpYearNavigation { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpMonthNavigation { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpCurrentMonthDate { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpCurrentMonthDateDisabled { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpOtherMonthDate { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpOtherMonthDateDisabled { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpCurrentDate { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpCurrentDateDisabled { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpTodayText { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpTodayTextDisabled { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      .TESTcpText { FONT-SIZE: 8pt; FONT-FAMILY: arial }
      TD.TESTcpDayColumnHeader { BORDER-RIGHT: #6677dd 0px solid; BORDER-TOP: #6677dd 0px solid; BORDER-LEFT: #6677dd 0px solid; BORDER-BOTTOM: #6677dd 1px solid; TEXT-ALIGN: right }
      .TESTcpCurrentMonthDate { TEXT-ALIGN: right; TEXT-DECORATION: none }
      .TESTcpOtherMonthDate { TEXT-ALIGN: right; TEXT-DECORATION: none }
      .TESTcpCurrentDate { TEXT-ALIGN: right; TEXT-DECORATION: none }
      .TESTcpCurrentMonthDateDisabled { COLOR: #d0d0d0; TEXT-ALIGN: right; TEXT-DECORATION: line-through }
      .TESTcpOtherMonthDateDisabled { COLOR: #d0d0d0; TEXT-ALIGN: right; TEXT-DECORATION: line-through }
      .TESTcpCurrentDateDisabled { COLOR: #d0d0d0; TEXT-ALIGN: right; TEXT-DECORATION: line-through }
      .TESTcpCurrentMonthDate { FONT-WEIGHT: bold; COLOR: #6677dd }
      .TESTcpCurrentDate { FONT-WEIGHT: bold; COLOR: #ffffff }
      .TESTcpOtherMonthDate { COLOR: #808080 }
      TD.TESTcpCurrentDate { BORDER-RIGHT: #000000 thin solid; BORDER-TOP: #000000 thin solid; BORDER-LEFT: #000000 thin solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 thin solid; BACKGROUND-COLOR: #6677dd }
      TD.TESTcpCurrentDateDisabled { BORDER-RIGHT: #ffaaaa thin solid; BORDER-TOP: #ffaaaa thin solid; BORDER-LEFT: #ffaaaa thin solid; BORDER-BOTTOM: #ffaaaa thin solid }
      TD.TESTcpTodayText { BORDER-RIGHT: #6677dd 0px solid; BORDER-TOP: #6677dd 1px solid; BORDER-LEFT: #6677dd 0px solid; BORDER-BOTTOM: #6677dd 0px solid }
      TD.TESTcpTodayTextDisabled { BORDER-RIGHT: #6677dd 0px solid; BORDER-TOP: #6677dd 1px solid; BORDER-LEFT: #6677dd 0px solid; BORDER-BOTTOM: #6677dd 0px solid }
      A.TESTcpTodayText { HEIGHT: 20px }
      SPAN.TESTcpTodayTextDisabled { HEIGHT: 20px }
      A.TESTcpTodayText { FONT-WEIGHT: bold; COLOR: #6677dd }
      SPAN.TESTcpTodayTextDisabled { COLOR: #d0d0d0 }
      .TESTcpBorder { BORDER-RIGHT: #6677dd thin solid; BORDER-TOP: #6677dd thin solid; BORDER-LEFT: #6677dd thin solid; BORDER-BOTTOM: #6677dd thin solid }
      </STYLE>
      </HEAD>
      <body>
            <form id="Form1" method="post" runat="server">
                  <P>DIV-style calendar using a CSS prefix and different styles define in this HTML
                        page (view source to see the defined styles)
                        <SCRIPT language="JavaScript" id="js18">
var cal18 = new CalendarPopup("testdiv1");
cal18.setCssPrefix("TEST");
                        </SCRIPT>
                        <SCRIPT language="JavaScript">writeSource("js18");</SCRIPT>
                  </P>
                  <P><INPUT type="text" size="25" name="date18"><A id="anchor18" title="cal18.select(document.forms[0].date18,'anchor1x','MM/dd/yyyy'); return false;"
                              onclick="cal18.select(document.forms[0].date18,'anchor18','MM/dd/yyyy'); return false;" href="#" name="anchor18">select</A></P>
            </form>
      </body>
</HTML>


<!--========================================================= -->
0
 
raterusCommented:
>>Reminder:I need to use "asp:TextBox"  to show the calendar

Use an asp:textbox for the final value returned, or use the textbox to actually popup the calendar.  You must use a hyperlink to startup the calendar, I don't think there is another way.
0
 
PINWANAuthor Commented:

Hi Raterus.

Ok, all well, i can to use the hyperlink, no problem.

Please, run my code above and past in to your empty aspx form.

Before, make the download of jscript files in site http://www.mattkruse.com/javascript/calendarpopup, in label "SOURCE"
AnchorPosition.js
CalendarPopup.js
date.js
PopupWindow.js

Thanks.

Wanderson
0
 
raterusCommented:
Two questions:

1.  Are you sure "CalendarPopup.js" is located in the same directory as this aspx page?
2.  You are instantiating the popup in javascript to show in "testdiv1", a <div>, is this what you want?  If not remove that, if so, then you must declare a div id'd "testdiv1"
0
 
raterusCommented:
This works for me:

<html>
  <head>
    <title>TestCalendar</title>
  </head>
  <body>

    <form name="Form1" method="post" action="TestCalendar.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwtNTc3MTY3NTc7Oz6lMTUNPh6Jv/A9hkGLlSX0mrtb2g==" />
      <script language="javascript" src="/include/CalendarPopup.js"></script>

      <script language="javascript">document.write(getCalendarStyles());</script>


            <input name="txtPopulate" type="text" id="txtPopulate" />
            <a id="anchortxtPopulate" title="calendarPopupcs.select(document.getElementById('txtPopulate'),'anchortxtPopulate','MM/dd/yyyy'); return false;" onClick="calendarPopupcs.select(document.getElementById('txtPopulate'),'anchortxtPopulate','MM/dd/yyyy'); return false;" href="#"><img border="0" src="/images/SmallCalendar.gif" alt="Select"/></a>
    <script language="javascript">var calendarPopupcs = new CalendarPopup();</script>

</form>

  </body>

</html>
0
 
PINWANAuthor Commented:
Yes, all jscript files to be in same directory as this aspx page!

Please see/analyse the code below, or the full code above.


      </HEAD>
      <body>
            <form id="Form1" method="post" runat="server">
                  <P>DIV-style calendar using a CSS prefix and different styles define in this HTML
                        page (view source to see the defined styles)
                        <SCRIPT language="JavaScript" id="js18">
                              var cal18 = new CalendarPopup("testdiv1");
                              cal18.setCssPrefix("TEST");
                        </SCRIPT>
                        <SCRIPT language="JavaScript">writeSource("js18");</SCRIPT>
                  </P>
                  <P><INPUT type="text" size="25" name="date18"><A id="anchor18" title="cal18.select(document.forms[0].date18,'anchor1x','MM/dd/yyyy'); return false;"
                              onclick="cal18.select(document.forms[0].date18,'anchor18','MM/dd/yyyy'); return false;" href="#" name="anchor18">select</A></P>
            </form>
      </body>
0
 
PINWANAuthor Commented:


Your code show the error:

Microsoft JScript runtime error: 'PopupWindow' is undefined


0
 
raterusCommented:
You probably didn't fix the declaration of the .js file to correspond to where you've put that file.  Also, I have the combined file from the site, that contains everything I need.
0
 
PINWANAuthor Commented:
Hi.

Now that i "too" have the combined file form the site, your code works fine.

So...
I need to show the 3th sample :
   var cal1xx = new CalendarPopup("testdiv1");
   cal1xx.showNavigationDropdowns();

and your code show the error : Microsoft JScript runtime error: Object expected at line 12:
document.write(getCalendarStyles());

0
 
PINWANAuthor Commented:
Hi.
Now the erro to be in line 137 (<SCRIPT LANGUAGE="JavaScript">writeSource("js18");</SCRIPT>).

I verify the code and appear normal. Wat's do you think ?


<html>
  <head>
    <title>TestCalendar</title>
    <SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
<!-- This javascript is only used for the show/hide source on my example page.
     It is not used by the Calendar Popup script -->
<SCRIPT LANGUAGE="JavaScript" SRC="../common.js"></SCRIPT>
<!-- This prints out the default stylehseets used by the DIV style calendar.
     Only needed if you are using the DIV style popup -->
<SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
<!-- These styles are here only as an example of how you can over-ride the default
     styles that are included in the script itself. -->
<STYLE>
      .TESTcpYearNavigation,
      .TESTcpMonthNavigation
                  {
                  background-color:#6677DD;
                  text-align:center;
                  vertical-align:center;
                  text-decoration:none;
                  color:#FFFFFF;
                  font-weight:bold;
                  }
      .TESTcpDayColumnHeader,
      .TESTcpYearNavigation,
      .TESTcpMonthNavigation,
      .TESTcpCurrentMonthDate,
      .TESTcpCurrentMonthDateDisabled,
      .TESTcpOtherMonthDate,
      .TESTcpOtherMonthDateDisabled,
      .TESTcpCurrentDate,
      .TESTcpCurrentDateDisabled,
      .TESTcpTodayText,
      .TESTcpTodayTextDisabled,
      .TESTcpText
                  {
                  font-family:arial;
                  font-size:8pt;
                  }
      TD.TESTcpDayColumnHeader
                  {
                  text-align:right;
                  border:solid thin #6677DD;
                  border-width:0 0 1 0;
                  }
      .TESTcpCurrentMonthDate,
      .TESTcpOtherMonthDate,
      .TESTcpCurrentDate
                  {
                  text-align:right;
                  text-decoration:none;
                  }
      .TESTcpCurrentMonthDateDisabled,
      .TESTcpOtherMonthDateDisabled,
      .TESTcpCurrentDateDisabled
                  {
                  color:#D0D0D0;
                  text-align:right;
                  text-decoration:line-through;
                  }
      .TESTcpCurrentMonthDate
                  {
                  color:#6677DD;
                  font-weight:bold;
                  }
      .TESTcpCurrentDate
                  {
                  color: #FFFFFF;
                  font-weight:bold;
                  }
      .TESTcpOtherMonthDate
                  {
                  color:#808080;
                  }
      TD.TESTcpCurrentDate
                  {
                  color:#FFFFFF;
                  background-color: #6677DD;
                  border-width:1;
                  border:solid thin #000000;
                  }
      TD.TESTcpCurrentDateDisabled
                  {
                  border-width:1;
                  border:solid thin #FFAAAA;
                  }
      TD.TESTcpTodayText,
      TD.TESTcpTodayTextDisabled
                  {
                  border:solid thin #6677DD;
                  border-width:1 0 0 0;
                  }
      A.TESTcpTodayText,
      SPAN.TESTcpTodayTextDisabled
                  {
                  height:20px;
                  }
      A.TESTcpTodayText
                  {
                  color:#6677DD;
                  font-weight:bold;
                  }
      SPAN.TESTcpTodayTextDisabled
                  {
                  color:#D0D0D0;
                  }
      .TESTcpBorder
                  {
                  border:solid thin #6677DD;
                  }
</STYLE>
</HEAD>
   
  </head>
  <body>

    <form name="Form1" method="post" action="TestCalendar.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwtNTc3MTY3NTc7Oz6lMTUNPh6Jv/A9hkGLlSX0mrtb2g==" />
     <script language="javascript" src="CalendarPopup.js"></script>

     <script language="javascript">document.write(getCalendarStyles());</script>


          <input name="txtPopulate" type="text" id="txtPopulate" />
          <a id="anchortxtPopulate" title="calendarPopupcs.select(document.getElementById('txtPopulate'),'anchortxtPopulate','MM/dd/yyyy'); return false;" onClick="calendarPopupcs.select(document.getElementById('txtPopulate'),'anchortxtPopulate','MM/dd/yyyy'); return false;" href="#"><img border="0" src="/images/SmallCalendar.gif" alt="Select"/></a>
    <!--
    <script language="javascript">var calendarPopupcs = new CalendarPopup();</script>
    -->
    <!-- ================================================================================== --><HR>

DIV-style calendar using a CSS prefix and different styles define in this HTML page (view source to see the defined styles)<BR>
<SCRIPT LANGUAGE="JavaScript" ID="js18">
var cal18 = new CalendarPopup("testdiv1");
cal18.setCssPrefix("TEST");
</SCRIPT>
<!-- The next line prints out the source in this example page. It should not be included when you actually use the calendar popup code -->
<SCRIPT LANGUAGE="JavaScript">writeSource("js18");</SCRIPT>
<INPUT TYPE="text" NAME="date18" VALUE="" SIZE=25>
<A HREF="#" onClick="cal18.select(document.forms[0].date18,'anchor18','MM/dd/yyyy'); return false;" TITLE="cal18.select(document.forms[0].date18,'anchor1x','MM/dd/yyyy'); return false;" NAME="anchor18" ID="anchor18">select</A>
<!-- ================================================================================== --><HR>
</form>
</body>
</html>
0
 
raterusCommented:
I certainly don't see the implementation of the function "writeSource()", just the call, which is failing...What are you trying to do there...

Also, these are declared twice in the page source you just posted...
     <script language="javascript" src="CalendarPopup.js"></script>

     <script language="javascript">document.write(getCalendarStyles());</script>
0
 
PINWANAuthor Commented:
Hi Raterus.


The code now to be correct. But don't work.

Have a problem in to CalendarPopup, at line 652
              document.getElementById(this.divName).style.visibility = "hidden";
as show in code below :

// Hide the popup
function PopupWindow_hidePopup() {
      if (this.divName != null) {
            if (this.use_gebi) {
                  document.getElementById(this.divName).style.visibility = "hidden";
                  }
            else if (this.use_css) {
                  document.all[this.divName].style.visibility = "hidden";
                  }
            else if (this.use_layers) {
                  document.layers[this.divName].visibility = "hidden";
                  }
            }
      else {
            if (this.popupWindow && !this.popupWindow.closed) {
                  this.popupWindow.close();
                  this.popupWindow = null;
                  }
            }
      }
0
 
raterusCommented:
I can't see your html, so I really don't know what you are doing right now, there isn't a problem with the real javascript you received off of the site, I can tell you that for sure.
0
 
PINWANAuthor Commented:
Ok friend.  
For gentility, you it can make an example in aspx that it shows 3th calendar and to send here in ee?  
If possible, send also all archives jscript that you are will use in the example that I am requesting to it.  
Regards.
Wanderson Pin
From Brazil
0
 
raterusCommented:
The best example can be found here:
http://www.mattkruse.com/javascript/calendarpopup

I don't really see how rehashing exactly what you find here is going to make any difference.  It's open source, and it's not that difficult.  I even gave you a working example many posts ago.  Why don't you start from there again, and cease adding extras, like the writeSource() function until you get it working.
0
 
PINWANAuthor Commented:
Ok Raterus,

Thanks for you help!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 10
  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now