Solved

a popup calendar

Posted on 2006-07-11
3
907 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Automatic sizing of HTML.TextAreaFor based on content 1 26
c# LinkButton OnClientClick 2 34
Error in query expression 3 35
Split in Javascript 5 31
In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
As a trusted technology advisor to your customers you are likely getting the daily question of, ‘should I put this in the cloud?’ As customer demands for cloud services increases, companies will see a shift from traditional buying patterns to new…

911 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