Solved

a popup calendar

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
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…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

776 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