Solved

a popup calendar

Posted on 2006-07-11
3
901 Views
Last Modified: 2008-01-09
I got code from one of the experts -a popup calendar (in an aspx pop up page) to set the text of a textbox to the date. I am using vb2005. Is the first part below written in C#?

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ where do I insert this code below


///ASPX code and client script
<script type="text/javascript">
function ToggleCal(){//Toggle Calendar Visibilty of the calendar control inside the divCal
if(document.getElementById('divCal').style.display=='none')
document.getElementById('divCal').style.display='block'
else
document.getElementById('divCal').style.display='none';
}
</script>
<asp:Label ID="lblDate" runat="server" CssClass="lbl" Text="Click Here To View Calendar"></asp:Label>
                    <div id="divCal" style="position: absolute; right: 380px; top: 330px; display: none;">
                        <asp:Calendar ID="CalBook" runat="server" NextMonthText=" >" CssClass="Cal" NextPrevStyle-CssClass="NextPrev" TodayDayStyle-CssClass="TodayStyle"
                            DayStyle-CssClass="DayStyle" ShowGridLines="true" NextPrevFormat="ShortMonth">
                            <WeekendDayStyle CssClass="WeekendStyle" />
                            <OtherMonthDayStyle CssClass="OtherMonthDayStyle" />
                            <SelectedDayStyle CssClass="SelectedDayStyle" />
                            <DayHeaderStyle CssClass="DayHeader" />
                            <TitleStyle CssClass="TitleStyle" />
                            <DayStyle CssClass="DayStyle" />
                            <NextPrevStyle CssClass="NextPrev" />
                        </asp:Calendar>
                    </div>
///End aspx code

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++




'Start VB.NET Code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Me.lblDate.Attributes.Add("onclick", "javascript:ToggleCal();") 'Plug in the client side script to the label control
End Sub
 Protected Sub CalBook_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles CalBook.DayRender
        Dim dtToday As DateTime = DateTime.Now.ToShortDateString
        If e.Day.Date < dtToday Then 'Check date if its past in the calendar
            e.Day.IsSelectable = False 'dont make past days selectable
        End If
    End Sub
    Protected Sub CalBook_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CalBook.SelectionChanged
        Me.lblDate.Text = Me.CalBook.SelectedDate.ToShortDateString 'show the selected date in the label control

        CalBook.VisibleDate = Me.CalBook.SelectedDate 'make sure the calendar control knows which date is selected when its hidden

    End Sub
0
Comment
Question by:VBdotnet2005
3 Comments
 
LVL 25

Accepted Solution

by:
clockwatcher earned 500 total points
ID: 17088036
No... the first part:

   <script type="text/javascript">
   function ToggleCal(){//Toggle Calendar Visibilty of the calendar control inside the divCal
      if(document.getElementById('divCal').style.display=='none')
          document.getElementById('divCal').style.display='block'
      else
          document.getElementById('divCal').style.display='none';
   }
   </script>

is client-side javascript to show/hide the calendar.  It goes in your .aspx page -- preferably within the <head></head> section somewhere but doesn't really matter.

This:

<asp:Label ID="lblDate" runat="server" CssClass="lbl" Text="Click Here To View Calendar"></asp:Label>

goes wherever you want the click here to go (again on the aspx page)

And finally this:

                    <div id="divCal" style="position: absolute; right: 380px; top: 330px; display: none;">
                        <asp:Calendar ID="CalBook" runat="server" NextMonthText=" >" CssClass="Cal" NextPrevStyle-CssClass="NextPrev" TodayDayStyle-CssClass="TodayStyle"
                            DayStyle-CssClass="DayStyle" ShowGridLines="true" NextPrevFormat="ShortMonth">
                            <WeekendDayStyle CssClass="WeekendStyle" />
                            <OtherMonthDayStyle CssClass="OtherMonthDayStyle" />
                            <SelectedDayStyle CssClass="SelectedDayStyle" />
                            <DayHeaderStyle CssClass="DayHeader" />
                            <TitleStyle CssClass="TitleStyle" />
                            <DayStyle CssClass="DayStyle" />
                            <NextPrevStyle CssClass="NextPrev" />
                        </asp:Calendar>
                    </div>

Can go anywhere you want within your <body> element.  It's going to pop it up absolute positioned at the coordinates (380, 330).  Probably makes sense to put it somewhere near the "click here" for text-based browsers that don't support the absolute positioning and the visibility style.
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17088223
VB,
This is the way I initially setup the calendar popup for http://itteam.ca/book.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestCalendar.vb" Inherits="TestCalendar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
function ToggleCal(){
if(document.getElementById('divCal').style.display=='none')
document.getElementById('divCal').style.display='block'
else
document.getElementById('divCal').style.display='none';
}
</script>
</head>
<body>
    <form id="form1" runat="server">
<div>
<asp:Label ID="lblDate" runat="server" CssClass="lbl" Text="Click Here To View Calendar"></asp:Label>
</div>
<div id="divCal" style="position: absolute; right: 380px; top: 330px; display: none;">
                        <asp:Calendar ID="CalBook" runat="server" NextMonthText=" >" CssClass="Cal" NextPrevStyle-CssClass="NextPrev" TodayDayStyle-CssClass="TodayStyle"
                            DayStyle-CssClass="DayStyle" ShowGridLines="true" NextPrevFormat="ShortMonth">
                            <WeekendDayStyle CssClass="WeekendStyle" />
                            <OtherMonthDayStyle CssClass="OtherMonthDayStyle" />
                            <SelectedDayStyle CssClass="SelectedDayStyle" />
                            <DayHeaderStyle CssClass="DayHeader" />
                            <TitleStyle CssClass="TitleStyle" />
                            <DayStyle CssClass="DayStyle" />
                            <NextPrevStyle CssClass="NextPrev" />
                        </asp:Calendar>
                    </div>
 </form>
</body>
</html>
Once I tested it, I moved the script to js file called Utilities.js to keep the page source code clean

Hope this clears it for you.
0
 

Expert Comment

by:heyday2004
ID: 20526183
Thanks for the reply. In the website: http://itteam.ca/book.aspx
It still has problem When I clicked next month. Is there anyway that when I cliccked the next month, i can keep clicking on it until i got the month I want? In the website, i dont see this is functioning. So my question is: is there anyway to add in the event handler to keep displaying the calendar until user selects a date (then post back the date to textbox)?

i.e.:

protected void  calEventDate_MonthChanged(Object sender, MonthChangedEventArgs e)
    {
        //displayCalendar(); ???    
    }

Thanks a lot again for the help.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This video discusses moving either the default database or any database to a new volume.
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now